Miyakawa Blog

ウェブディレクターが日々のことを綴るブログ

Pinterest風のWordPressフリーテンプレートを使って

Shaken Grid (Lite) | Shaken and Stirred Web: Kick-ass WordPress Themes and Templates

今回、上記のテンプレートを使ってと友人のとあるサイトを作りました。 上記テンプレートの有料版のテンプレートもあったのですが、コストをかけたくなかったので今回はフリー版で作ってみました。

この時に行ったときの作業の備忘録を残します。

テンプレートの特徴

  • ボックスの1つの幅が350pxあり、左右に10pxのマージンが取られている
  • ブラウザの表示幅に応じてボックスの横並び数が変わります。
  • 3列表示するためには 350 * 3 + 20 * 3 = 1110px の幅が取られます。
  • ボックスが縦横敷き詰められて表示しているのは JavaScriptにより 絶対値設定で表示位置を制御しています。

設置そのものは普通です

設置方法は簡単です。普通のWordPressテンプレートと同じでWordPressが設置されているディレクトリー内にFTPでアップロードし、テーマを「有効」に設定するだけ。

wp-content > themes

今回行ったカスタマイズ

  1. ヘッダー部分の表示を完全にカスタマイズ。ロゴ、ボタン類などの設置
  2. コンテンツエリアのBOX幅を狭くしました。
  3. トップページの幅を固定にして右サイドバーを表示し、かつセカンドページの表示幅も調整

ですが、3番は最終的にはボツになったため最終的に残った内容は1番, 2番です。

1番については普通のウェブデザイン作業に関する仕事になるのでここでは書きません。 2番の内容だけを備忘録として残そうと思う。

BOXの幅を変更しました

ターゲットのウインドサイズをどうするか?考えました。 今時ワイド画面のパソコンが多いのですが、1024 * 768 をメインターゲットから外す訳にはどうしてもいきませんでした。

次の写真例をみても分かりますように、1024 のワイドにすると右側が空きました。

f:id:miyakawa244:20160518215916p:plain

ブラウザ幅を 1024px でコンテンツを表示したときに右側に 300px 程の空きが生じてちょっとがっくりしました。どうせならピッタリ2列で並ぶか、3列で並んだ方がすっきりしますよね。

そこで今回は3列の写真がすっきり並ぶ方向でテンプレートをカスタマイズしました。 (iPad, iPad2および、iPad3でも3列がスッキリ入るように調整たかったのも事実です。)

ボックスの表示幅を調整する方法

まずは style.css の中身を書き換えます。

.box内に width の指定があるので、ここで幅を調整します。

wp-content > themes > shaken-grid-free > stylecc.css width を 310 → 285に変更します。

.box{
    background:#FFF;
    margin-bottom:10px;
    padding:10px;
    width:285px;
    float:left;
    -webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
    -moz-box-shadow:1px 1px 3px rgba(0,0,0,0.2);
    box-shadow:1px 1px 3px rgba(0,0,0,0.2);
    overflow:hidden;
    position:relative;
}

css で box幅を縮めても2列目、3列目の表示位置は固定されているので boxの並びは縮まりません。 表示位置の縦横の並びは JavaScript で制御されています。 JavaScript は次の

wp-content > themes > shaken-grid-free > js > script.js columnWidth を 350 → 325 に変更しました。

    $(window).load(function(){
        $('#sort').masonry({
            columnWidth: 325,
            animate: true,
            itemSelector: '.box'
        },
        function() { $(this).css({
            margin: '10px'
            });
        });
    });

修正結果はこうなりました

できるだけ、1024px の画面サイズで見れるように調整するとこの方法がベターのような気がします。 後はcssを何カ所か調整して、iPadの縦幅にも収まるように調整したと思います。