ワードプレス ピンタレスト風デザイン

ワードプレスでピンタレスト風にデザインするカスタマイズメモ。
イラストとデザインの作品を掲載している自分のサイト「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;

2件のコメント

  1. はじめまして、近藤と申します。
    みなさんと同じくピンタレスト風のWPテーマを探していたところ
    こちらのサイトを参考にしながら設定をさせて頂きました。

    「tanzaku」のカスタマイズをしようといろいろとやってみたのですが
    参考サイトとしてあげられていた「 http://kimura.ciao.jp/ 」のように
    横幅を広げて目いっぱい広げたかったのですがCSS内の設定では対抗できず。。。

    差支えなければ設定箇所を教えて頂けませんでしょうか?
    よろしくお願いします。

    1. 近藤さま。はじめまして。木村です。
      コメントありがとうございます。

      横幅はとくに設定しているわけでななく、
      ブラウザのウィンドウサイズを広げると、自動的に広がってくれるはずです。

      サイトを拝見したところ、一つだけの投稿になっているので、
      4つ以上の投稿をつくってから、
      ブラウザのウィンドウサイズ変えると、自動的に横幅いっぱいまで
      広がってくれると思います。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.