今話題のWordPressテーマSimplicityに衣替え、サムネイルとアドセンスの設置についてやったこと。
2014/12/28
どうも、親父です。
普段着る服などまったく無頓着、平気で7,8年前のヨレヨレになったTシャツ身にまとう親父です。そんな親父が何故かブログのテーマをまたまた衣替え（変更）しました。嫁が子供たちの洋服だけは頻繁に買ってあげるのと同様に、親父の大事なブログちゃんに新しいのを着させてあげようって親心か？
photo credit: el frijole via photopin cc
それまでのお世話になっていたSTINGER3 FANSに不満があるわけでありませんが、別のシャツも試したくなっちゃったという心境です。また今日から親父は盆休み突入という比較的時間に余裕があるのも理由のひとつ、経験上テーマ変えるのって何かと時間がかかるから。まぁ気分転換ですね。
いま話題のSimplicityというテーマです。製作されたのは『わいひら＠寝ログ』さん。わいひらさん、テーマ使わせていただきます！
さっきの服の流れでいくとこのSimplicityは『真っ白なTシャツ』という表現がぴったり。ホント見た目シンプルです。あと全体的に言えるんですが、見やすいし読みやすい！この見やすさには一目ぼれですよ。。
スポンサーリンク
Simplicityの導入とその手順・カスタマイズ
そもそも親父がSimplicityを知ったのはこの記事から。
Simplicityという話題のWordPressテーマで、AdSense配置に関するカスタマイズとデザイン変更時に躓いた箇所のお話
かのアドセンス界の大御所、染谷さんのブログで知ったのです。染谷さんといえばなんつっても『ブログ飯』。その染谷さんのような経歴を意味する『ブログ飯』という言葉は今ではふつうに使われ通じる言葉となってしまいました。。あと先月もGoogleアドセンスの指南書である『GoogleAdsense 成功の法則57』をリリースされましたね。
染谷さんのブログも現在このSimplicityを利用されています。
Simplicityをダウンロード・テーマ追加・有効化
Simplicityのダウンロード からテーマをダウンロード。あとはWordpressの『外観』→『テーマ』から、Simplicityを有効化します。
パソコン内のテストサイトにインストールした直後、こんなホームです。
めっちゃシンプル！！
そして何度も繰り返しますけど、記事ページはほんと読みやすいんです。
初期設定手順は上記Simplicity公式サイトのSimplicityの初期設定・おすすめの設定 で 細かく書かれていますのでそちらを参照して下さい。逆に困った点とアドセンスの設置についてカスタマイズしたところを記事にします。
記事一覧のサムネイルが歪な状態だったのを修正
記事一覧に表示されるサムネイルが正常な状態とは異なる縦横比率で表示されました。サイズはちゃんとした正方形でしたが縦横が歪んじゃってて縦長のサムネイルです。公式サイトを確認すると、これまでもサムネイルについては正方形で表示されないなどの諸問題があったようですが、最新バージョンではこれも対策済みとのこと。うーん、どうしてだろう。
よーく見ていたら関連記事に以下の投稿、
Simplicityテーマをインストールして、サムネイルが正方形に表示されないときにやって欲しいこと
親父は正方形に表示はされていますが、この記事中にWordpress内にサムネイルを再生成する方法の記載があります。
そもそもこのように、正方形に表示されない原因は画像のサムネイルがWordpress側で作成されてないことが原因です。
これを、綺麗な正方形のサムネイルを表示させるには、サムネイルを再生成する必要があります。
ふーん、そうなんだ.. 何やら関係ありそうだったの書かれていた対策をやってみました。
プラグインの『RegenerateThumbnails』を使ってサムネイルを再生成します。
直った！
はい、見事直りました。現在はきれいな正方形のちゃんとしたサムネイルで表示されます。
偉人にならってホームページにアドセンスを設置
染谷さんの記事にあった内容をほぼそのままカスタマイズしています。今回ホームページにアドセンス3個を設置です。
home.phpの編集が必要です。『外観』→『テーマ編集』→『home.php』を開きます。
<?php //トップページ用 ?>
<?php get_header(); ?>
<?php get_template_part('list') ?>
<?php get_footer(); ?>
記事一覧上部にアドセンス1個を設置
2行目と4行目のあいだにアドセンスコードを入れます。ただPCとスマホではサイズが異なるので、条件分岐？を使って分けるそうです。あ、断っておきますが親父にはウェブやらhtmlの知識などありませんからね。見よう見まねでやっているだけですよ。それでも出来ますから。
<?php //トップページ用 ?>
<?php get_header(); ?>
<?php if ( wp_is_mobile() ) : ?>
スマホ用のアドセンスコード
<?php else: ?>
PC用のアドセンスコード
<?php endif; ?>
<?php get_template_part('list') ?>
この時、スマホ用にはモバイルバナー320＊50、PC用にはカスタムサイズの650＊90でアドセンスコードを作成しています。
記事一覧最下部にアドセンス2個を並列設置
4行目と6行目のあいだに、投稿記事（single.php）にある以下の記述をコピーします。
<?php get_template_part('ad-article-footer');?>
この記述によって、記事ページと同様にレクタングル大の2個並びのアドセンスが設置されます。
これで合計3つのアドセンスがホームページに設置されました。
サイドバートップにはアドセンス以外の広告
このSimplicityは広告の設置場所が選べます。個別記事ページの下部にあるレクタングル2個並びは固定ですが、あと1つを、『記事中』『サイドバートップ』『関連記事下』から選択できるんですね。おわかりでしょうが先ほどホームページにアドセンスを3つ設置したので、ここで『サイドバートップ』を選ぶとポリシー違反になるんでご注意を。
親父の場合、Simplicityのウィジェットにある広告設定の『300＊250』にはアドセンス以外を設定しこれをサイドバートップで選択、あとひとつは『QuickAdsense』を利用して記事中moreタグあとに設置しました。
親父のまとめ
しばらくはこの真っ白なSimplicityでいこうと思います。読みやすくなったはずなので、もっとたくさんの人が親父のブログを訪ねてくれるといいんですけどね。。
最後に染谷さんの書籍を紹介しときます。おもしろいしブログやる上で参考になりますよ！
親父の話に付き合ってくれて感謝です♪