読者です 読者をやめる 読者になる 読者になる

ナンダのサラリーマンblog

どうも南田です。IT会社に勤めるアラサーサラリーマン。

はてなブログのデザインカスタマイズまとめ(おしゃれさもいいけど、見やすさも重要だと思います)

ブログ運営 お役立ち

f:id:nadanonadanotamenonadaniyoru:20170124130151j:plain

どうも南田です。

今日はブログカスタマイズで実施したことをまとめました。

ぼちぼちブログをはじめて半年となります。始めた当初よりPV数も増え、ここら辺でまとめておくのもいいかなと思いました。

はじめに

今回は僕がブログをはじめて、どのようなカスタマイズをしたかというお話です。

こんなカスタマイズしてるんだ、こんなことにこだわってるんだという観点で参考程度に読んでいただけたら幸いです。

なお、順番は適当です(導入した順番ではございません)

 

アイキャッチ画像(サムネイル)を入れる

これは説明するまでもないと思いますが自分自身の記事を目立たせるため(多くの人に見てもらうため)に設定しております。 

下記の画像は、僕がブログをはじめてから一番最初にスマートニュースに載った記事です(嬉しくてスクショ撮ってましたw)

こちらがアイキャッチ画像なし(右下に僕の記事があります)

f:id:nadanonadanotamenonadaniyoru:20170124132852j:image

 

続いてこちらがアイキャッチ画像ありです(左下が僕の記事です)

f:id:nadanonadanotamenonadaniyoru:20170124132855j:image

 

記事の内容がスーツの上着の話だったので、暑そうなぽっちゃりサラリーマン画像を探し、アイキャッチ画像に設定しました(こうすることで、サラリーマンが記事をクリックしてくれるかなと)

 

今回の例はスマートニュースでしたが記事が載るスペースまで変化しているのがわかります。ちなみに、ツイッターとかフェイスブックと連携している人にとっても同じことが言えます。

 

アイキャッチ画像の設定方法はこちらを参考にしました。

※はてなブログの場合、だいたい記事の最初の画像がアイキャッチ画像として設定されると思いますが、個別に変える方法も載ってます。

 

補足としてアイキャッチ画像サイトも載せておきます。

 

目次を入れる

記事の中に目次を設定している目的は記事の内容がだいたいこんな話だとわかるようにと、欲しい情報だけがすぐにわかるように(その見出しに飛べるように)という目的で設定しております。

 

僕の記事だとこのような画面です(PC版)

f:id:nadanonadanotamenonadaniyoru:20170124140047p:plain

目次を入れるのは超簡単です(1文追加するだけです)

 

検索流入と、雑記では書き方を変えたりしてますが、だいたい記事を書くときには、冒頭に”今回の記事は〇〇な話”という要約を入れることを心がけております。

その”要約”プラス”目次”があれば今回の話はこんな感じだなとイメージが湧くので、そのイメージとのGAPをうまく発生させると離脱率が下がる…なんてテクニックもあります。

 

目次の設定方法はこちらを参考にしました。

※見出し、小見出しの設定や、リスト表示を番号に変更したりもできます。

 

見出しの色を変える

見出しの色を変えることの目的は記事の中にメリハリをつけることです。

僕の記事だとこのような画面です(PC版)

f:id:nadanonadanotamenonadaniyoru:20170124145335j:image

 

あとは見やすさ(デザイン)が変わるので、読者にとっていいと思ってます。

見出しデザインの設定方法はこちらを参考にしました。

 

文字の強調太文字を蛍光ペン風にする

強調太文を蛍光ペン風にする目的は、見やすさ(デザイン)の向上により、記事中で何が言いたいかがよりはっきり伝わることです。

 

僕の記事だとこんな画面です(PC版)

 f:id:nadanonadanotamenonadaniyoru:20170124145328j:image

 

強調太文字デザインの設定方法はこちらを参考にしました。

 

デザインの配色について

余談ですが、見出しの色、蛍光ペンの色等に関しては色相関を考えて選んでおります。

素人ながら僕の考え方はシンプルで、ブログデザインはグレーやブルー系の寒色系をベースとしているので、強調太字には補色のオレンジを選んでおります。

色相環の前提としては、色相環図で中心を通り反対側に配置されている色を”補色”といいます。”補色”は色相環図の中で最も性質の異なる色相で、この2色の組み合わせはお互いの色を引き立てる性質があります。

f:id:nadanonadanotamenonadaniyoru:20170124150518p:plain

色相 - Wikipedia

 

フォントサイズ、行間の幅を調整する

フォントサイズ変更、行間サイズ変更の目的は見やすさ(デザイン)の向上です。

デフォルトの文字サイズが小さく感じて(特にスマホ)、フォントサイズを大きくしました。あとは、行間の無駄な幅、改行の無駄な余白を調整して自分で読んで読みやすいなと感じた幅に調整しました。

 

フォントサイズ、行間の設定方法はこちらを参考にしました。

 

ちなみに僕の設定は下記です。

 

Check Points!!

PC:

 改行サイズ:0.7

 フォントサイズ17、行間1.7

スマホ:

 改行サイズ:0.5

 フォントサイズ14、行間1.8

 

スマホ向けのSNS固定ボタンを設定する

この固定ボタンを導入した目的はいつでもブクマコメントを見られるからです。

 

僕の記事だとこんな画面です(スマホ)

f:id:nadanonadanotamenonadaniyoru:20170124141430j:image

 

というのも、はてなブログを続けていると”ブクマコメントを見に来る人が多い”と感じました。本来なら記事を全部読んで、これは面白い!これは為になった!など、何かしら感じた方がブクマを押すと思いますが、それ以外にも他にその記事を読んだ人がどう思ったかという”ブコメ”を見にくる人が多いのです。

 

最初は、固定ボタンて結構なスペースを取られるので付ける予定はなかったんですが、邪魔にならないボタンを発見したので導入しました(実は別の目的もありますが)

SNSの固定シェアボタンの設定方法はこちらを参考にしました。

 

カエレバ、ヨメレバのデザインを見やすくする

このカエレバ、ヨメレバのデザインカスタマイズの目的はデザインの向上とクリック率の向上です。

簡単にカエレバ、ヨメレバのサービス概要を説明すると、アマゾンや楽天などの商品リンクを簡単に作成できるサービスです。

下記のようなものを見たことがありませんか?(赤ボックスとオレンジボックス)

f:id:nadanonadanotamenonadaniyoru:20170124201210p:plain

たまにアフィリエイト記事を書くのでかなり助かっております。1つの商品でアマゾンと楽天のリンクを両方貼れるだなんて、素晴らしいすぎる(他にもリンク貼れますが、現段階で僕が使っているのは楽天とアマゾンのみです)

 

ちなみに、上記のデザインを白抜きに変えました(シンプルにしたかった…)

f:id:nadanonadanotamenonadaniyoru:20170124201514j:image 

 

カエレバ、ヨメレバのデザインカスタマイズ設定方法はこちらを参考にしました。

 

サイドバーを固定する

これは是非お勧めしたいカスタマイズです。

当ブログの場合は目次を固定しております。

f:id:nadanonadanotamenonadaniyoru:20170312202815p:plain

 

その他にも自分のプロフィールを固定するもよし、関連記事を固定するもよし、自分の好きなものを固定してください。

サイドバーの固定については、こちらの記事を参考にしました。

 

アドセンスをダブルレクタングルにする

ダブルレクタングルについては有名なので説明を省きます(広告が横並びになるものです)

今回のカスタマイズはレスポンシブにしているブログにおいて、PCではダブルレクタンブル、スマホでは1つしか広告が表示されないという素晴らしいカスタマイズです。

 

アドセンスのダブルレクタンブルについては、こちらの記事を参考にしました。

 

スペシャルサンクス

今回参考にさせていただいた記事をまとめます。

・アイキャッチ画像の設定方法はこちらを参考にしました。

 

・補足としてアイキャッチ画像サイトはこちら。

 

・目次の設定方法はこちらを参考にしました。

 

・強調太文字デザインの設定方法はこちらを参考にしました。

 

・フォントサイズ、行間の設定方法はこちらを参考にしました。

 

・SNSの固定シェアボタンの設定方法はこちらを参考にしました。

 

カエレバ、ヨメレバのデザインカスタマイズ設定方法はこちらを参考にしました。

 

・サイドバーの固定については、こちらの記事を参考にしました。

 

・アドセンスのダブルレクタンブルについては、こちらの記事を参考にしました。

 

参照させていただいた皆様、本当にありがとうございます。

 

最後に

僕がデザインのカスタマイズをする時に一番大切にしていることはユーザビリティです(できるだけ見やすいように意識してカスタマイズしてるつもりです)

デザインがオシャレだろ…どやー!も確かにいいのかもしれませんが、せっかく読みに来てもらった読者さんが読み難いと感じたら、本末転倒だと思います。

読者さんあってのブログだと思いますから、”いらっしゃい”とこころよく迎えられる為にはどうするべきか…それが重要だと思うのです。

今回のブログデザインカスタマイズが少しでも役に立てば幸いです。