ブログのデザインを一新したので、作業メモ的な。
- 目次
- 動機など
- 利用テーマ、プラグイン
- 手動カスタマイズしたところ
- 広告（Adsense）設置
動機など
・ユーザビリティの改善（可読性向上、表示時間短縮など）による、滞在時間や回遊率の向上。
・デザインがかっこいいとソーシャルでの拡散もされやすのでは？
・レスポンシブデザインを試してみたかった。
・ついカッとなってやった。
利用テーマ、プラグイン
Word Pressの最新テーマ「Twenty Eleven」を利用しました。
適用すると、ブラウザの横幅が狭くなったときにサイドバーがメインコンテンツ下にもぐりこみます。
これで無事レスポンシブデザインになりました。簡単！
って、さすがにそれだけでは済まないので他にいじった点を。
Twenty Elevenでは個別記事や固定ページでサイドバーが表示されないので、プラグインで対応。
「Twenty Eleven Theme Extensions」をこちらの記事を参考に追加し、全ページにサイドバーを表示しました。
これでばっちりOK!と言いたいところなんですが、iPhone4Sで確認したところ、幅広なAdsenseが邪魔をして若干変な感じに。。。
ブラウザの横幅によって幅の違う広告を出し分ければいいのかな？この辺は宿題。
逆に停止したプラグインは「WPtouch」と「EZ zenback」。
WPtouchはWord Pressをスマートフォン最適化する定番プラグイン。いままでお世話になりました。
EZ zenbackは他ブログからの流入を目当てに導入していましたが、ほとんど流入がなく、デザイン的にもうるさいので削除。読み込み時間の短縮にも役立つはず。ソーシャルボタンの追加なら「WP Social Bookmarking Light」でじゅうぶんですし。
zenbackを削ることでitmediaドメインからの被リンク（例：zenbackキーワーズ）が大量になくなるため、SEO的な意味で少々不安があるものの、最近のGoogleの傾向からするとそれほどの影響はないと判断しました。いくらオーソリティが高くても、アンテナ的なページからの被リンクはあまり評価されない気がします。
手動カスタマイズしたところ
Google検索結果に著者情報を出すため、link rel aouthorをheader.phpのmeta要素内に追記。（参考）
デフォルトではサイドバーの幅が狭いので、こちらの記事を参考に…というか、丸パクリして広げました。ありがとうございます。
記事見出しの横に表示されるコメントの吹き出しをこちらの記事を参考に削除。content.phpから該当のコードを削除するだけなので簡単です。
しかし、これだけでは吹き出しが表示されていたスペースが空いたままになるので、スタイルシートをいじって余白を削りました。style.cssの733行目付近にある記述を削除するだけです。
/* 変更前 .entry-title, */
/* 変更前 .entry-header .entry-meta { */
/* 変更前 padding-right: 76px; */
/* 変更前 } */
blockquote（引用）のスタイルも変更しました。デフォルトだとイタリック体で読みづらいし、左右のmarginも深すぎる印象で好みではありませんでした。同じくstyle.cssの381行目付近にある記述を修正しています。
blockquote {
font-family: Georgia, "Bitstream Charter", serif;
/* 変更前 font-style: italic; */
font-weight: normal;
/* 変更前 margin: 0 3em; */
padding: 1em; /* 追記 */
margin: 0 2em 1.625em 2em; /* 追記 */
background-color: #E2E2E2; /* 追記 */
}
blockquote p { /* 追記 */
margin: 0; /* 追記 */
} /* 追記 */
こんなかんじになりました。
広告（Adsense）設置
設置箇所は以下の3つです。
- サイドバー最上段に300× 250 – レクタングル（中）を設置
- サイドバー最下段に300 × 600 – スカイスクレイパー（大）を設置
- 記事最下段に336 x 280 – レクタングル（大）を設置
サイドバーはウィジェットにコードを突っ込んだだけなので特に解説はなし。
記事最下段はcontent-single.phpの25行目付近をいじってAdsenseタグを挿入しました。
<div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'twentyeleven' ) . '</span>', 'after' => '</div>' ) ); ?> <!-- 追記ここから --> <script type="text/javascript"><!-- google_ad_client = "ca-pub-0588031032126823"; /* PC-footer */ google_ad_slot = "8666399463"; google_ad_width = 336; google_ad_height = 280; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> <!-- /追記ここまで --> </div><!-- .entry-content -->
過去のRPM（1,000ページビューあたりの収益）が￥184だったので、これがどう変化するか気になるところ。
1ヶ月くらいしたら回遊率の変化など、他の数値も併せてレポートしたいと思います。
