Kim's Lablog

ワードプレスでピンタレスト風にデザインするカスタマイズメモ。
イラストとデザインの作品を掲載している自分のサイト「T.K.I.D」
最近流行の可変グリッドをテーマにつくりたいのですが、いいものは有料のものばかりで無料のものが少ない。
無料の「tanzaku」というテーマが使いやすそうなので、これを使っていますが、
カスタマイズ方法があまり掲載されていないので、簡単にカスタマイズできる部分だけ紹介。
自分用のメモですので、間違い等あるかもしれませんが、ご了承ください。

■　ワードプレスの外観→テーマ　検索で「tanzaku」で検索し、tanzakuテーマをインストール

■　テーマ編集→スタイルシート　を下記のように編集

デフォルトではボックスの幅が少し大きめなので、横幅を200pxにしておきます。

/* ———- Grid Items, Single Item and Comments ———- */

/* value = (width * n) + (15+15+5) * (n-1).
* ex.
* width=200 : 200, 425, 650, 875
* width=250 : 250, 525, 800, 1075
* width=290 : 290, 615, 940, 1265
*/
div.x1 { width:  200px; }
div.x2 { width:  425px; }
div.x3 { width:  650px; }
div.x4 { width: 875px; }

■　テーマ編集→メインインデックスのテンプレート　を下記のように編集
赤字部分が表示される画像の横幅の大きさです。
ちなみに画像は、それぞれの記事の一番最初の画像が自動的に縮小されて表示されます。

// [grid column setting]
$col_w = 200; // width of grid column
$gap_w = 35; // padding + margin-right (15+15+5)
$max_col = 1; // max column size (style div.x1 ~ xN)

■テーマ編集→スタイルシート
の部分で、背景の色、文字の色等変更すればお好みのデザインに変更できると思います。

ちなみにそれぞれのボックスの間隔は赤字の部分を変更すれば大丈夫
影や角を丸める場合は、CSSを追加すれば大丈夫です。
他にもいろいろ方法があると思いますが、カスタマイズはそれぞれで。

div.grid-item,
div.single-item {
overflow: hidden;
margin: 0 13px 13px 0;
padding: 15px 15px 30px 15px;
border: 0;
background-color: #FFFFFF;

 */追加部分　ボックスに影
-webkit-box-shadow: 0px 0px 3px 2px rgba(50, 50, 50, 0.3);
box-shadow: 0px 0px 3px 0px rgba(50, 50, 50, 0.3);
-webkit-border-radius: 5px;
border-radius: 5px;