ブログデザインを大幅リニューアル!採用したのは「マテリアル」テンプレートです。

このブログ、スマートフォンからのアクセスが半分以上を占めていることから、本格的にスマホ対応レイアウトへと切り替えることにしました。

今まで使っていたのは「Hueman」というテンプレート。シンプルで美しいUIが特徴ですが、スマホ向けサイトとしては機能が物足りないのですよね。

テンプレート「Hueman」

テンプレート「Hueman」

その課題点を上手くクリアしたのが「マテリアル」というテンプレートです。非常に使いやすく、これからブログを作る人にもピッタリだと思います。

マテリアルの特徴

詳細は「マテリアルの特徴」を見てもらうのが一番ですが、中でも私がお気に入りなのは次の特徴。

1.ボックスレイアウト

まず見た目がおしゃれ。特にPCから見た時は視覚性が高くないと見る気がなくなっちゃいますからね・・・以前のテンプレートでこれを実現するのは難易度がかなり高かったのです。

スクリーンショット 2016-03-04 9.30.10

2.カテゴリー別の記事表示

これも嬉しい機能。もちろん記事タイトルがキャッチーかつ内容が面白そうという前提ではありますが、以前の記事が拾われる可能性がグッと高くなるはず。

スクリーンショット 2016-03-04 9.28.11

導入時の問題点

全て完璧と行けたら最高なんですが、なかなかそうは行きません。今まさに頭を悩ませているのがこの問題。

Chrome、IE、AndroidでWebフォント「リガチャーシンボル」が表示されない。

詳しい説明は割愛しますが、SNSのシェアボタンやメニュー横にあるアイコンもこのフォントで描かれています。これが効かないと全部文字で表示されちゃうのです。

この問題をクリアすべく試行錯誤したのですが、これだという解決方法が見つからず・・・アイコン類はFontAwesomeを使うことで回避することに。(誰か解決方法知っていたら教えて下さい。)

その他カスタマイズした部分

フォント以外に、テンプレートをいくつか修正しました。

1.記事フッターにLIKEボタン設置

ブログサイトではお馴染みのLIKEボタンですが、作り方がようやく分かったので設置してみました。皆さん、ぜひポチッと押して下さいませ。

2.ページのヘッダー修正

以前のテンプレートだと広告設置と固定リンクが置ける場所を用意していたので、マテリアルテンプレートでも使えるように復活させました。

3.広告サイズの調整(予定)

このテンプレートはスマホ向け広告として336×280のサイズを使っています。私のブログは300×250を基本的に使っているので、後者に統一しようと思います。

ここは広告のパフォーマンスを見ながら調整していく予定。もちろん好調だったらここまま放置ですな。

切り替えた結果どうなったか?

テンプレートを切り替えて2日経過しました。その効果は少しづつ出ているようです。

アクセス数が増加

SEOに強いというコメントを見て多少期待していましたが、予想以上に増えています。この2日はあえて記事を投稿していませんが、それでも前月に比べてプラスで推移しています。すごい。

広告パフォーマンスの改善

私のブログはアクセス数に比べて収益性が低いのが課題でした。テンプレート切り替えによりCTR(知りたいかたはググッて下さいませ)が1.5倍ほどに増加しています。ここは月末改めて振り返りたいと思いますが。

結論としては、切り替えて正解だと言えるでしょう。カスタマイズの手間も減るので、より記事のほうに力を入れることができそうです。

というわけで、ブログレイアウトにお悩みの方は一度「マテリアル」を試してみることをおすすめします。

この記事をシェアする