ブログデザインを2カラムにリニューアルしました(2016年8月)

先月、ブログデザインを1カラムに変更したばかりなのですが、思うところがあって2カラムに戻しました。

追記:またもやデザインをリニューアルしました→「OBOLOG」のデザインをリニューアルしました(2017年4月実施)

先月のリニューアルとは

ワードプレステーマをSTINGER PLUS+に変更し、カスタマイズして次のような画像のデザイン(記事ページ)にリニューアルしました。

記事ページの全景

ページの構成は次の通り。

  • ブログタイトル
  • メニュー
  • パンくずリスト
  • 記事タイトル
  • シェアボタン
  • 人気記事
  • 記事本文
  • 広告
  • 記事本文
  • シェアボタン
  • 広告
  • フェイスブックページへのいいね!ボタン
  • 関連記事
  • カテゴリ一覧(プルダウン)
  • 月別アーカイブ(プルダウン)
  • 前後の記事とトップページへのリンク

ページ上部からこんな感じにしていました。詳しくはブログデザインをシンプルな1カラムにリニューアルしました(2016年7月)に書いています。

やっぱり以前のデザインに

すぐ上で紹介している記事に書いている通り、先月のリニューアルは計画したものではありませんでした。別サイト用にいじっていたテンプレートをなかったことにするのは勿体ないと思い、このブログに適用させたのです。

最初は新鮮な感じでいいなあと思っていました。が、物足りなさも感じるようになってしまいました。確かにすっきりしていて見やすいことは見やすいのですが、PC環境で閲覧した時の殺風景な印象が気になったのです。

また、「カテゴリ一覧は中身が見えてた方が分かりやすいよな」、「人気記事はサムネイル付きの方がいいかな」、「簡単なプロフィールも表示しておいた方がいいかな」なんて考えも浮かんできました。

そういった要素も追加しようとしたのですが、元のデザインと調和する形で表示させる術が僕には思いつきませんでした。そのため、新デザインは諦めて以前使っていたワードプレステーマに戻すことにしたのです。

ただテーマを戻したわけではない

とはいえ、前のテーマを再び適用して終わりというわけではありません。前回のリニューアル記事で書いている「直せたらなと思っているところ」を修正しました。

余白の調整

デザインは8の倍数でできている|1 pixel|サイバーエージェント公式クリエイターズブログという記事(2年前のものですが)を見つけ、それを参考にCSSを調整しました。

全てを適用させることはできなかったのですが、余白を基本的に8の倍数(場合によっては4の倍数)に変更しました。これで以前より統一感が出ましたし、本文も読みやすくなったのではないかと思います。

グーグルアドセンスの調整

閲覧しているデバイスあるいは画面サイズによって表示・非表示を調整(is_mobile関数とdisplayプロパティを利用)しました。

PCを想定した環境では、記事の本文下に300×250サイズのものを横に2つ並べ、サイドバー上部に300x600(300×250が出ることも)を表示させることにしています。

スマホ・タブレットを想定した環境では、記事のmoreタグ部分に1つ、本文下に1つ、関連記事・前後の記事の下に回り込んだサイドバーの上部に1つ表示させることにしています。タブレットのサイズによっては、サイドバー上部の広告は表示させず、本文下に2つ横並びで表示させています。

この配置は当ブログにおける過去のパフォーマンスレポートをもとに決めました。

シェアボタン

以前はTwitter・Facebook・Google+・はてなブックマーク・Pocketのオリジナルボタンを本文下に置いていましたが、Google+のボタンを外し、Facebookページへのいいね!ボタン、Twitterのフォローボタン、Feedlyのオリジナルボタンを追加しました。

フォロー・シェアエリアの画像

パソコンから見るとこんな感じ↑になっています。

FacebookとTwitterは公式のボタンを使用していますが、SNSのシェアボタンの設置方法まとめ (サンプルコード付き) | Syncerを参考にスクリプトを遅延ロードしています。

そうそう、いまさら気が付いたのですが、IEだとツイッターボタンをクリックするとエラーになっていました。これまでの長期間ずっとそんな状況だったみたいです……。

オリジナルボタンを設置する際、URLや記事タイトルをエンコードしていなかったのが原因でした。他のボタンやブラウザでは大丈夫だったため全然気が付きませんでした(汗)

関連記事にサムネイル画像

以前は「記事タイトル・日付・抜粋文」を表示していました。

こんな感じのが12記事分ですね。ただ、記事本文を読み終わった直後に文字だらけなのはどうかなあと思ったので、サムネイル画像と記事タイトルを表示させるよう変更しました。

その他いろいろ

上記の他にもいろいろと修正・チェックしました。

  • 横からスライドするメニューに「閉じるボタン」を設置
  • 検索フォームをスライドメニュー内へ移動
  • 記事一覧ページのデザインを変更
  • 記事一覧ページのサイドバーにフォローボタンを設置
  • 各デバイスでの表示の微調整
  • 各ブラウザでの表示の確認

などなど。

あ、各ブラウザとは書いていますが、IE9、IE10、IE11、Microsoft Edge最新版、Google Chrome最新版、Mozilla Firefox最新版、iOS 9 Safariで表示の確認をしています。

Edgeで大幅なレイアウトの崩れ、IEでスクリプトエラーが発生していましたが、それぞれ修正しました。

おわりに

今回のリニューアルでは、以前から直したかったところに手を加えることができ、個人的にはかなり満足しています。しばらくはこのデザインでやっていくつもりです。

では、今後ともOBOLOGをよろしくお願いいたします。