こんにちは、はてなブログを使い始めてようやく7ヶ月のユキガオ（@yukigao_22）です。
まだまだブログ歴は浅いですが、読者の方から
ブログが（視覚的に）読みやすいですよね
と言われることがあります。
実はこのブログ、初期設定から色々とカスタマイズしているんです。
それが「ブログの読みやすさ」に繋がっているみたい。
そこで、このブログで実装しているカスタマイズをご紹介したいと思います！
細かいカスタマイズはたくさんありますが、中でも
- 読みやすくする
- 便利にする
- 個性を出す
といった観点のものを7つご紹介。
使えそうなものは参考にしてみてくださいね！
- 0. 注意事項
- 1. デザインテーマ
- 2. 会話の吹き出し
- 3. SNS・フォローボタン
- 4. 文字サイズ，行間
- 5. 太字のアンダーライン
- 6. 関連記事囲み枠
- 7. ヘッダー画像
- 読んでもらえるブログにしよう
0. 注意事項
カスタマイズ紹介の前に、まずは注意事項を2点。
これらをご承知の上で、参考にしてくださいね。
①はてなProです
私が使用しているのは「はてなブログ」です。
そのため、他のブログサービスでは適用できない可能性があります。
またはてなブログにも無料プランと有料プランがあり、私は有料プラン（はてなPro）を使用しています。
無料プランの場合は、スマホ版のカスタマイズができないことがあります。
実際にカスタマイズしてみて、上手くいかない場合はこれらの可能性を疑ってみてください。
②専門家ではありません
CSSやHTMLを勉強したことはありません。
どのカスタマイズも、調べてコピペしてちょっといじって…というもの。
なのでカスタマイズ記事自体ほとんど書いてませんし、これからもそんなに書けないと思います。
③設定は「デザイン」で
はてなブログのカスタマイズ設定は、基本的に「デザイン」のとこで行います。
CSSの設定が必要な場合は、ココにコピペをしましょう。
1. デザインテーマ
ブログ全体のデザインを変更することができる「デザインテーマ」。
私は「ZENO-TEAL」というデザインテーマを使っています。
さらにそのテーマをカスタマイズしてオリジナル仕様にしているのですが、その方法はこちらの記事を参考にしてください！
参考はてなブログ新テーマ「ZENO-TEAL」で色を変えてカスタマイズする方法
テーマストアへ行けば無料で利用できます。
シンプルで使いやすいテーマなのでおすすめです。
2. 会話の吹き出し
吹き出しって必要なの？
会話してるみたいに見えるし、アクセントになるよね！
↑このような会話の吹き出しも、カスタマイズしています。
私が参考にしたのはこちらのブログ。
ただしはてなPro出ないとスマホ対応できないので要注意。
私はHTMLをメモにコピペしておいて、いつでも使えるようにしてます。
画像URLは
- フォトライフを開く
- 使いたい画像をクリックして拡大
- 右クリック「画像URLをコピー」
で取得できます。
吹き出しは、インタビュー記事を書く時なんかにすごく便利！
参考アラサーからの挑戦。「人と人を繋げたい」旅する女性ライター・しぶりんさん
3. SNS・フォローボタン
記事のはじめと終わりにあるこちらのボタン。
記事をSNSでシェアしたり、記事を書いた人のSNSをフォローするためのものです。
たとえば「Twitter」のシェアボタンを押すとこのような画面が出てきます。
Twitterにログインしていれば、そのままツイートできます。
記事を読み終わってからシェアする方が多いので、記事上下につけると◎。
私が参考にしたのはこちらの記事です。コードなどもこちらからコピーしてください。
フォローボタンも同じブログのこちらの記事から。
表示させるアイテムは、自分が普段使っているものに絞ればOKです。
4. 文字サイズ，行間
記事本文の文字の大きさや、改行時の行間もカスタマイズできます。
このコードをデザインCSSにコピーしてください。
.entry-content {
font-size : 17px ; /*フォントサイズ*/
line-height : 1.7 ; /*行間*/
}
.entry-content p {
margin-bottom: 1.8em; /*段落の余白*/
}
私のブログはこのサイズですが、それぞれの数字を変えれば好きな大きさにできます。
お好みのサイズを探してみてください。
私の場合、スマホ版はフォントサイズを18pxにしてます。
.entry-content {
font-size : 18px ; /*フォントサイズ*/
}
初期設定だとこれより小さいので、大きくするのがオススメです。（もちろん好みによります！）
5. 太字のアンダーライン
太字の下にマーカーを引いたような感じにします。
コードはこちら。
article strong{
margin:0 0.1em;
padding:0.05em 0.05em;
background:#fcfc60 !important;
background:linear-gradient(to bottom, transparent 65%, #FFF8C2 60%) !important;
}
色コードを変えたり、マーカー幅を変えることもできます。
ただしこのコードを入れると、太字のみというのができません。（勝手にマーカー引かれる）
特に困らないので、私はそのままにしてますが、他にいいやり方があったら教えてください…
6. 関連記事囲み枠
記事中に、関係する記事を挿し込む場合に使ってます。
目立つし、関連していることが分かりやすいですよね。
だけど最近こんなデザインがあることにも気付いたので、今度からこっちを使おうと思ってます(笑)
クセになる「サクサクとろとろチーズタルト」を京都で食べよう！【BAKE CHEESE TART】
このデザインは、こちらの記事を参考にしています！
7. ヘッダー画像
私のブログのヘッダー画像はこちら。
よく褒められます。
実はこれ、デザイナーのがまたろうさん（@gamataro3）にお願いして作ってもらったもの。
以前、記事にも書かせてもらいました。
参考【オススメ】大満足なヘッダー画像を格安で作ってもらいました
作ってもらって、「やっぱり専門家に作ってもらうのが確実だなぁ」と実感。
自分じゃ絶対に作れないし、出来たものもすごく気に入っています！
作ってもらいたい方は、TwitterでがまたろうさんにDMを送って詳細を問い合わせてみてくださいね。
読んでもらえるブログにしよう
せっかく頑張って書いた記事も
見にくいからもういいや〜
って、途中までしか読まれなかったら悲しいですよね。
ブログなので、書く内容や頻度はもちろん大事。
だけど、読みづらいデザインですぐ離脱されるなんてもったいない！
凝りすぎるのは考えものですが、見やすさを考慮するのもブログ運営者としては大事じゃないかな？と思います。
そしてPVや読者を増やしたかったら、シェア＆フォローしやすい状態にしておくことも大切。
今回紹介したものは基本的なカスタマイズなので、ぜひ使ってみてほしいと思います。
気になることはLINE@へ！
今回の記事は、LINE@で友達登録してくれた皆さんのリクエストも反映しています。
もし他に気になることがあれば、ぜひユキガオのLINE@に登録してメッセージくださいね！
他にも
- アイキャッチ画像の作り方
- 記事中のイラストの作り方
についても記事にしようと思ってますので、そちらもお楽しみに！
ユキガオ