ブログ運営

ブログデザインをシンプルな1カラムにリニューアルしました(2016年7月)

アナウンス記事を書くのが遅れてしまいましたが、先週末あたりから新デザインに切り替えました。せっかくなので今回のリニューアルについて考えたことなどを紹介したいと思います。

*2016年8月13日にリニューアル前のテーマ・デザインへ戻しました。

リニューアルのきっかけ

実のところ、今回のリニューアルは計画的に実施したものではありません。初めはサブブログ的なものを開設しようとしていたんですよ。新規ドメインまで取得して。

しかしですね、デザインをいじって完成がもうすぐって時に熱が冷めてしまったんですよ。わざわざサブブログでやらなくてもいいんじゃない?って。メインブログでやればいいんじゃない?って。

でも、デザイン自体は個人的には気に入っていたんです。素人ながら少しこだわって作りましたし、前から興味のあった1カラムデザインを採用したりしましたしね。完全になかったことにするのは勿体ない!ってことで当ブログに適用させることにしたのです。

リニューアル前のデザイン

リニューアル前はThemeForestで購入したCanosという有料テーマをカスタマイズして使っていました。トップページと記事ページはこんな感じです。ブツ切りしていますが、あくまで雰囲気の参考ということで。

▼トップページ

20160720-obolog-top-before

▼記事ページ

20160720-obolog-single-before2

これはこれで気に入っていました。いろいろと直せたらなと思っていたところはありましたが、愛着のあるテーマでした。

リニューアル後のトップページ

新しいWordPressテーマはENJIさんが作成したSTINGER PLUS+です。日本で最も有名な無料テーマのひとつであるSTINGERシリーズですね。子テーマを適用して自己満でいじりまくっているので「STINGERらしさ」が消えてしまっていますが……。

そんなリニューアル後のトップページは、記事上部の画像にあるように最新記事を3列で表示しています。現時点ではブログタイトルとメニューのほかに最新記事18件とページャーのみを置いています。

このブログのアクセス解析を見てみると、最初の訪問ページ=トップページであることが非常に少ないんですよ。先月だと0.2%です。何らかのテーマに特化しているわけでもなく、また知名度も低いブログなので、いきなりトップページに来る方はほとんどいないのです。

そのため、現時点でトップページを見るのは、記事ページを見た後に「他にどんな記事があるのかな?」と興味を持ってくれた方くらいだと思われるので、シンプルに記事一覧だけを表示することにしたのです。

関連して、テーマのデフォルトだとトップページのブログ概要にH1タグが使われていますが、当ブログでは概要を表示せずブログ名にH1タグを付け替えています。雑多なブログですし、検索エンジンから呼び込めそうな概要らしい概要がないですからね。

リニューアル後の記事ページ

続いて記事ページについてですが、これはもう今ご覧いただいているまんまです。……とこれで終わるのはあっけないので、いくつかの要素について説明したいと思います。

ヘッダーメニュー

ブログタイトル下に「Category・About・Follow・Search」と並んでいますが、各項目をクリック(タップ)すると次の画像のようにメニュー内容が浮かびあがります。

20160720-1

jQueryでclassを追加したり削除したりして表示・非表示を切り替えています。浮かび上がったエリア以外をクリック(タップ)で非表示になるようになっています。

記事タイトルまわり

記事タイトルの上部にパンくずリストと投稿日、下部にシェア数付きソーシャルボタン、背景にアイキャッチ画像を表示しています。

20160720-2

シェア数はワードプレスプラグイン「SNS Count Cache」を使って表示しています。背景画像は子テーマのfunctions.phpで追加した小さいサイズのものをインラインCSSで読み込み、疑似要素を使って暗く見えるようにしています。

本来のサイズのアイキャッチ画像を下で表示させるため、あえて画質は無視して小さいサイズを指定しています。

人気記事

シェアボタンの下にはプラグイン「Wordpress Popular Posts」を用いて直近24時間での人気記事を表示しています。記事が増えたら同カテゴリのものに変更したり、週間・月間のものもクリック(タップ)で表示できるようにしたりするかもしれません。

アイキャッチ画像

人気記事の下に表示。カスタムフィールドを活用して表示・非表示を決められるようにしました。今後はデザイン統一のためにこじつけレベルのアイキャッチ画像をデカデカと本文中に表示させることはなくなりそうです。

FacebookページへのLikeボタン

リニューアル前はプロフィール欄にFacebookページへのテキストリンクのみを表示していたのですが、本文エリア下にいいね!ボタンを置くことにしました。

20160720-3

これまた記事タイトル部分と同じように背景に画像を表示させています。よく見かける「左側にアイキャッチ画像・右側にいいね!を促す文章」というのも考えました。が、記事ページ全体を見たときの雰囲気の好みで画像みたいな形になりました。

今のところ人数は表示しない設定です。なんせ0人ですからねHAHAHA。

関連記事

いいね!ボタンの下にはプラグイン「Yet Another Related Posts Plugin」で関連記事を最大12個表示させています。リニューアル前とは異なり、アイキャッチ画像も一緒に表示させることにしました。

はじめは「Related Posts」という表記にしていましたが、普段ネットをあまりしない人には分かりづらいかもと思い、「こちらも読まれています」と分かりやすく、また記事一覧に目を通してもらえそうな表記に変更しました。

おわりに

以上、今回のリニューアルについて書いてみました。振り返ってみると去年の7月、そして一昨年の7月にもテーマ変更を伴うリニューアルをしていました。僕にとって7月とはそういう時期なんですかね。

そんなことはさておき、ここ1ヶ月更新が滞っていましたが(!)、これからはちゃんと更新していきたいと思います。リニューアルのきっかけでも触れたように、サラッと軽い感じの記事も書いていく予定です。

あとカテゴリ分けが適当なところがあるので、もう少し記事が増えたら再分類作業をしたいと思っています。その他の細かい点は順次修正していきます。

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