どうも南田です。
今日はブログカスタマイズで実施したことをまとめました。
ぼちぼちブログをはじめて半年となります。始めた当初よりPV数も増え、ここら辺でまとめておくのもいいかなと思いました。
- はじめに
- アイキャッチ画像（サムネイル）を入れる
- 目次を入れる
- 見出しの色を変える
- 文字の強調太文字を蛍光ペン風にする
- フォントサイズ、行間の幅を調整する
- スマホ向けのSNS固定ボタンを設定する
- スペシャルサンクス
- 最後に
はじめに
今回は僕がブログをはじめて、どのようなカスタマイズをしたかというお話です。
こんなカスタマイズしてるんだ、こんなことにこだわってるんだという観点で参考程度に読んでいただけたら幸いです。なお、順番は適当です（導入した順番ではございません）
アイキャッチ画像（サムネイル）を入れる
これは説明するまでもないと思いますが自分自身の記事を目立たせるため（多くの人に見てもらうため）に設定しております。
下記の画像は、僕がブログをはじめてから一番最初にスマートニュースに載った記事です（嬉しくてスクショ撮ってましたw）
こちらがアイキャッチ画像なし（右下に僕の記事があります）
続いてこちらがアイキャッチ画像ありです（左下が僕の記事です）
記事の内容がスーツの上着の話だったので、暑そうなぽっちゃりサラリーマン画像を探し、アイキャッチ画像に設定しました（こうすることで、サラリーマンが記事をクリックしてくれるかなと思ったので）
今回の例はスマートニュースでしたが記事が載るスペースまで変化しているのがわかります。ちなみに、ツイッターとかフェイスブックと連携している人にとっても同じことが言えます。
アイキャッチ画像の設定方法はこちらを参考にしました。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
※はてなブログの場合、だいたい記事の最初の画像がアイキャッチ画像として設定されると思いますが、個別に変える方法も載ってます。
補足としてアイキャッチ画像サイトも載せておきます。
最高のアイキャッチ画像に出会える！画像素材選びに役立つサイト集 | アフィリエイトまとめブログ
目次を入れる
記事の中に目次を設定している目的は記事の内容がだいたいこんな話だとわかるようにと、欲しい情報だけがすぐにわかるように（その見出しに飛べるように）という目的で設定しております。
僕の記事だとこのような画面です（PC版）
検索流入と、雑記では書き方を変えたりしてますが、だいたい記事を書くときには、冒頭に”今回の記事は〇〇な話”という要約を入れることを心がけております。
その”要約”プラス”目次”があれば今回の話はこんな感じだなとイメージが湧くので、そのイメージとのGAPをうまく発生させると離脱率が下がる…なんてテクニックもあります。
目次の設定方法はこちらを参考にしました。
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
※見出し、小見出しの設定や、リスト表示を番号に変更したりもできます。
見出しの色を変える
見出しの色を変えることの目的は記事の中にメリハリをつけることです。
僕の記事だとこのような画面です（PC版）
あとは見やすさ（デザイン）が変わるので、読者にとっていいと思ってます。
見出しデザインの設定方法はこちらを参考にしました。
コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ - Yukihy Life
文字の強調太文字を蛍光ペン風にする
強調太文を蛍光ペン風にする目的は、見やすさ（デザイン）の向上により、記事中で何が言いたいかがよりはっきり伝わることです。
僕の記事だとこんな画面です（PC版）
強調太文字デザインの設定方法はこちらを参考にしました。
コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 - North-Geek
デザインの配色について
余談ですが、見出しの色、蛍光ペンの色等に関しては色相関を考えて選んでおります。
素人ながら僕の考え方はシンプルで、ブログデザインはグレーやブルー系の寒色系をベースとしているので、強調太字には補色のオレンジを選んでおります。
色相環の前提としては、色相環図で中心を通り反対側に配置されている色を”補色”といいます。”補色”は色相環図の中で最も性質の異なる色相で、この２色の組み合わせはお互いの色を引き立てる性質があります。
フォントサイズ、行間の幅を調整する
フォントサイズ変更、行間サイズ変更の目的は見やすさ（デザイン）の向上です。
当初はデフォルトの文字サイズが小さく感じて（特にスマホ）、フォントサイズを大きくしました。あとは、行間の無駄な幅、改行の無駄な余白を調整して自分で読んで読みやすいなと感じた幅に調整しました。
フォントサイズ、行間の設定方法はこちらを参考にしました。
【コピペ＋α】はてなブログで文章を読みやすくするカスタマイズ集 - いつ俺〜いつから俺ができないと錯覚していた？〜
ちなみに僕の設定は下記です。
PC：フォントサイズ１８、行間１.９
スマホ：フォントサイズ１５、行間２.０
スマホ向けのSNS固定ボタンを設定する
この固定ボタンを導入した目的はいつでもブクマコメントを見られるからです。
僕の記事だとこんな画面です（スマホ）
というのも、はてなブログを続けていると”ブクマコメントを見に来る人が多い”と感じました。本来なら記事を全部読んで、これは面白い！これは為になった！など、何かしら感じた方がブクマを押すと思いますが、それ以外にも他にその記事を読んだ人がどう思ったかという”ブコメ”を見にくる人が多いのです。
最初は、固定ボタンて結構なスペースを取られるので付ける予定はなかったんですが、邪魔にならないボタンを発見したので導入しました（実は別の目的もありますが）
SNSの固定シェアボタンの設定方法はこちらを参考にしました。
画面下固定でも邪魔にならないSNSシェアボタンの設置方法（はてなブログのカスタマイズ） - NaeNote
スペシャルサンクス
今回参考にさせていただいた記事をまとめます。
・アイキャッチ画像の設定方法はこちらを参考にしました。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
・補足としてアイキャッチ画像サイトはこちら。
最高のアイキャッチ画像に出会える！画像素材選びに役立つサイト集 | アフィリエイトまとめブログ
・目次の設定方法はこちらを参考にしました。
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム - Yukihy Life
・強調太文字デザインの設定方法はこちらを参考にしました。
コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 - North-Geek
・フォントサイズ、行間の設定方法はこちらを参考にしました。
【コピペ＋α】はてなブログで文章を読みやすくするカスタマイズ集 - いつ俺〜いつから俺ができないと錯覚していた？〜
・SNSの固定シェアボタンの設定方法はこちらを参考にしました。
画面下固定でも邪魔にならないSNSシェアボタンの設置方法（はてなブログのカスタマイズ） - NaeNote
・参照させていただいた皆様、本当にありがとうございます。
最後に
僕がデザインのカスタマイズをする時に一番大切にしていることはユーザビリティです（できるだけ見やすいように意識してカスタマイズしてるつもりです）
デザインがオシャレだろ…どやー！も確かにいいのかもしれませんが、せっかく読みに来てもらった読者さんが読み難いと感じたら、本末転倒だと思います。
読者さんあってのブログだと思いますから、”いらっしゃい”とこころよく迎えられる為にはどうするべきか…それが重要だと思うのです。
今回のブログデザインカスタマイズが少しでも役に立てば幸いです。