※この記事を書いた時点よりも機能追加されて、バグも減っている安定版が公開されています。この記事自体の意味合いが減ってきていますので、最新版の記事をご参照ください。
WordPressテーマ「Simplicity」の安定版と開発版が出ているので、開発版をインストールしてちょこっとカスタマイズしたお話
最近、書籍と旅行記とアイドルの話しか書いていないような気もしますが、書籍の原稿が1つ脱稿した気分転換にSimplicityというテーマを使ってブログのデザインを変更してみました。ちなみにもう一冊の原稿の締切が控えているのも認識していますが、時折、息抜きも必要なので見逃してください（懇願）。
テーマを変えた理由は、今まで使っていたテーマだと表示スピードが気持ち遅かったのと、微妙なカスタマイズがやりづらかったという点です。全体的なデザインや機能は気に入っていたんですが、ちょっとした箇所が自分のスキルだと直せなかったんですよ。
で、Simplicityに変更したわけですが、確かに表示スピードは体感的にも向上しました。とはいっても、いくつかレイアウト的に気に入らない箇所があったので、拙い知識を基にカスタマイズしてみました。そうしたら、あらびっくり。シンプルだと謳っているだけあって、ド素人の僕でもある程度のカスタマイズができてしまうのです。というわけで、最近話題のこの本
を参考にして、特にGoogle AdSenseの配置について調整してみました。
それと、前もっての注意点なのですが、プログラム知識のない素人が書いてる内容なので、「子テーマ弄れよ」とか「include使えよ」とか真っ当なご意見を頂戴すると泣いちゃうので、あくまでも人柱的な参考情報として生暖かく見守っていただければこれ幸いです。
目次
旧デザインと新デザイン
旧デザイン
新デザイン
超シンプルになって、まさにブログっぽくなりました。
Simplicityのカスタマイズ
右サイドバーの表示を変更
Simplicityのデフォルトはこんな感じです。シンプルですね。トップページでは右サイドバーに「人気エントリー」が最上部に自動的に配置されています。
これが個別記事になると右サイドバー最上部が「新着エントリー」に自動的に変わります。おそらくブログ内の回遊性を高めるためにこのような設定にしてあると思うのですが、実はこのレイアウトってウィジェットでは変更できないんですね。
で、僕としては右サイドバーの最上部に載せたい情報があったので、この「人気エントリー（新着エントリー）」は邪魔でした。
なのでテーマの編集画面からサイドバーに記載されているコードをごっそり削除しました。
<?php if (is_home()) { //メインページの場合?>
から
</div><!– /#new-entries –>
<?php } ?>
という箇所までですね。
広告（Google AdSense）の配置場所を追加
基本的にSimplicityにはレクタングル（大）とレクタングルのコードさえ指定項目に入力しておけば、PC版およびスマートフォン版に最適なスタイルで広告を表示してくれます。（→Simplicityテーマ内にGoogle AdSense広告を貼り付ける方法）
ただ、個別ページの配置は悪くないんですが、トップページの配置がちょっと少なくてもったいないなぁと。で、一応、僕、Google AdSenseの本なんか出しちゃってるので、きちんと配置しておかないといけないなぁと思いましてですね。
要はデフォルトだと、ブログのトップページに広告がないんです（ウィジェットでフッターに配置することは一応可能です）。
なので、home.phpをちょこっと弄ってですね。
こんなシンプルなhome.phpにゴリゴリと書き込みました。
やたら書き込んでますが内容は大したことなくて、
<?php //トップページ用 ?>
<?php get_header(); ?><?php get_template_part(\’list\’) ?>
<?php get_footer(); ?>
の
<?php get_header(); ?>
と
<?php get_template_part(\’list\’) ?>
の間にアドセンスのコードを入れて、
<?php get_footer(); ?>
の上に
<?php get_template_part(\’ad-article-footer\’);?>
というコードを書き込んだだけです。ちなみにこのad-article-footerというコードは、single.phpの記事本文の下あたりにあったコードをそのままコピペしています。
で、目ざとい人は気付いたと思いますが、AdSenseのコードはPCとスマートフォンで条件分岐させています。はじめはレスポンシブ広告ユニットを入れていたんですが、スマホで見ると上部にレクタングルが表示されちゃうんですね。
で、例のAdSense本いわく、上部のレクタングル表示は規約違反になるらしいので、PCで表示される広告ユニットとスマートフォンで表示される広告ユニットを分けた次第でございます。この条件分岐もぐぐったらこんなのが出てきたので、そのまま使っています。
<?php if ( wp_is_mobile() ) : ?>
スマートフォン用の広告ユニットコード
<?php else: ?>
PC用の広告ユニットコード
<?php endif; ?>
なおスマートフォン用の広告ユニットは320 x 100 ラージモバイルバナーを、PC用の広告ユニットはカスタムサイズで650 x 150のサイズを指定してます。
Simplicityのカスタマイズ後
こちらPCから見た画面。上部に650サイズの広告ユニット。右サイドバーに著書を配置しています。検索バーもAdSenseの検索ユニットに変更しようと思いましたが、ひとまずそのままにしてあります。
下部にはレクタングル（大）を横並びで配置しています。Simplicityの個別記事レイアウトと同じですね。
スマートフォンで見るとラージモバイルバナーが表示されています。めでたしめでたし。
削除しておきながらのお願いというか
できれば人気エントリーと新着エントリー、あと検索バーはウィジェット化していただけると嬉しいなぁ・・・。
Simplicityに変更して手こずった点
Simplicityのテンプレートは自動的に赤枠のようにサムネイル画像を表示してくれるはずなのですが、僕のアイキャッチが大きすぎるせいかサムネイルではなく巨大な画像が表示されていました。
で、ヘルプを見たら対応方法が載っていたので、これ通りにやったら直りました。
→Simplicityテーマをインストールして、サムネイルが正方形に表示されないときにやって欲しいこと
ポイントとしては、Simplicityのデザインに変更してからRegenerate Thumbnailsを実行するということですかね。
・・・って書いてたら、バージョンアップで機能改善されているそうです。凄い対応スピードだわ・・・。
→Simplicityをver20140808にバージョンアップ。デフォルトでサムネイルのデザインが崩れないように変更。
おそらく今後も物凄い勢いで機能改善されていく匂いがします。
PageSpeed Insightsで測定してみた
PageSpeed Insightsという、表示スピードやユーザーエクスペリエンスなどを100点満点で評価してくれるGoogle提供のツールが有ります。これを使って測定してみました。
スマートフォンの速度は54点ながらもユーザーエクスペリエンスは96点！これは凄い。
PC版の速度は87点！こちらも凄い（PC版にはユーザーエクスペリエンス項目はありません）。そりゃ体感的に早くなったと実感するはずです。
まとめてきな
個人的感想ですが、シンプルなデザインが好きな人にとってはかなりオススメです。僕のようなWordPress初心者でも、どこをいじればいいのかもわかりやすいです。
バージョンアップも恐ろしい頻度でおこなわれているので、今後さらに使いやすくなると思います。作者のわいひらさん、楽しみにしてますね。
公式サイトはこちら→Simplicity