WordPressテーマ「Twenty Fifteen」を編集する

2015年5月3日

特に告知もしてませんが、2015年3月下旬くらいに既存のテーマから変更しました。理由としてはスマホ未対応だとGoogleでの検索順位が変わると知ったからです。

ASCII.jp：Google検索順位が変わる！スマホ対応の最終チェック法

このブログ、検索エンジンからの流入は多くないですが、Googleさんがスマホファーストと言っている時代に旧時代のテンプレートをそのまま使ってるのはかっこ悪いな、と思ったわけです。

旧テンプレートはこんな感じでした。

旧テンプレートのvicunaには感謝していますが、ここ最近のWeb技術が反映されておらず「旧時代のテンプレート」化してしまったのでした。無料・善意のソフトウェアでupdate続けるのは難しいですよね。

CMSでおなじみvicuna.jpのドメインが契約切れで誰でも取得可能になるけど何だかもったいないという話 | ノート100YEN.com

そんなわけで次のテンプレを探してました。WordPress用のテンプレは山ほどあって選び放題だなぁ…と思っていたところ、その7割になんらかのトラッキングコードが仕込まれているらしく。PHPはよーわからんしそこまでテーマへの拘りもない。安全な無料テンプレ使ってもvicunaみたいにメンテナンスされなくなったら面倒、ということで無難に公式WPテーマである「Twenty Fifteen」を選ぶことにしたのでした。

「Twenty Fifteen」の編集

絶対忘れるので自分用メモです。

フォント種類(style.css)

デフォルト状態では

• “Noto Sans", sans-serif
• “Noto Serif", serif

がフォントに指定されているので、

• Meiryo, Tahoma, Verdana, Arial, sans-serif

にしました。

フォントサイズ(style.css)

フォントが大きかったので少し小さくしました。「Twenty Fifteen」はレスポンシブデザインとなっており、スマホサイズの画面で閲覧すると、それ用のレイアウトに変更されて表示されます。

で、それってどうやってるか分からなかったのですが、フォントサイズを変更しようとしたときに仕組みを調べることとなりました。どうやら、

• @media screen and (min-width: 38.75em)

のような記述で、ウィンドウサイズ毎のスタイルを決定していたようです。フォントサイズについてもそれぞれ記載があり、ここを変更すればサイズが変わりました。最初、旧ブラウザ用に記載された素のfont-sizeを変更して変わらねーとか迷ってました。

「Twenty Fifteen」では以下の7タイプのウィンドウサイズが定義されています。

• 16.1 Mobile Large 620px / フォントサイズ：17px(1.7rem)
• 16.2 Tablet Small 740px / フォントサイズ：17px(1.7rem)
• 16.3 Tablet Large 880px / フォントサイズ：19px(1.9rem)
• 16.4 Desktop Small 955px / フォントサイズ：16px(1.6rem)
• 16.5 Desktop Medium 1100px / フォントサイズ：17px(1.7rem)
• 16.6 Desktop Large 1240px / フォントサイズ：19px(1.9rem)
• 16.7 Desktop X-Large 1403px / フォントサイズ：19px(1.9rem)

この7種類に対してそれぞれフォントサイズやpaddingなどが定義されています。これを全部編集するのは面倒だったので、CSSをいじって

• 16.1 Mobile Large 620px / フォントサイズ：17px(1.7rem)
• 16.2 Tablet Small 740px / フォントサイズ：17px(1.7rem)
• 16.4 Desktop Small 955px / フォントサイズ：16px(1.6rem)

の3種類だけの判定としました。…ただ大きいウィンドウで見た時にpaddingなどが微妙におかしく、時間があるときにちゃんと編集する予定。

フォントの色(inc/customizer.php)

フォントの色を編集したくていろいろ探したところ、なぜかinc/customizer.phpというファイルに定義がありました。なんでCSSじゃないんや！おそらく、管理画面からテーマ色選ぶ仕組みがあるからやろな…。

ってことで流儀に合わせて新定義「20150430」を追加したのでした。

php
'20150430' => array(
'label' => __( '20150430', 'twentyfifteen' ),
'colors' => array(
'#ffffff',
'#222222',
'#ffffff',
'#222222',
'#ffffff',
'#f1f1f1',
),
),

残タスク

• はてブ/facebook/twitterなどのボタンつける
• googleのアクセス解析のコード仕込む
• googleアドセンス追加
• Web拍手仕込む

ここらへんもレスポンシブデザインで上手い事やってくれるのかな?PHPの構成読み切れておらず、まだ分かりません…。