はてなブログで行った10+2のカスタマイズ方法まとめ
スポンサーリンク
連休明けくらいからはてなブログのカスタマイズ記事を書いてきました。
他のブログを参考に様々なカスタマイズを行ってきましたが、ブログの見栄えは以前よりよくなったでしょうか？
読者にとって見やすくなっているでしょうか？
カスタマイズももう個人的にはいじろうと思う部分がなくなってきたので、今日はこれまでこのブログで行ったカスタマイズ、全部で10+2個をまとめてみたいと思います。
はてなブログカスタマイズ
行ったカスタマイズをブログの上の方から順に10個見ていきたいと思います。
ほとんどがコピペとちょっとした書き込みのみでカスタマイズできます。
是非是非、参考にしてみてください。
また、リンク先の参考にしたブログさんの記事ではもっと詳しくコードの例が掲載されています。
そちらも是非、参考にカスタマイズしてみてください。
1. 広告などを中央揃えにする方法
たまに広告位置がずれているブログ、見かけますよね。
そうした広告位置をきちんと中央揃えにする方法を紹介しました。
コードで広告を挟むだけの非常に簡単な作業です。
ヘッダーやフッターに貼り付けた広告がずれているブログの方に是非使って欲しいですね。
2. グローバルメニュー
これはオススメのカスタマイズです。
初心者には何を言っているのかちょっと分からない感じで難易度少し高めですが、設置の流れは非常に簡単です。
実際の出来栄えもCSS-Generaterでプレビューしながら作れるので思い通りのデザインに仕上げることができます。
グローバルメニューがあるのとないのではブログの見た目はもちろん、ちょっとレベルが高いブログに見えなくもないですよね(笑)
簡単に好きなデザインにできるのでオススメです。
3. フォントサイズ
記事の読みやすさを左右する文字サイズ。
Googleも推奨している文字サイズは16px以上です。
自分のブログの文字サイズが分からない方はとりあえず、上の記事を読んで16pxに設定しましょう。
ちなみにこのブログではひとつ大きい17pxに設定しました。
理由は個人的にやや大きいほうが見やすいかなと・・・。
4. アンダーラインを蛍光ペン風に
こちらはよく見かける定番のカスタマイズですね。
参考にしたブログ記事がすでに消えていますが、上の記事の通り設定すればアンダーラインを蛍光ペン風にすることが可能です。
蛍光ペン風アンダーラインを引くことで、記事の文章中のアクセントになり、文章の重要度が変わってきます。
手軽にできる強調表現として使える手段ですね。
他のやり方もいろいろあるみたいですが、このブログではこの方法をご紹介しました。
5. 目次に「目次」の文字を入れる
このブログで紹介したのは、目次のカスタマイズというよりはただ目次に「目次」と文字をいれただけのカスタマイズになります。
ずっと気になっていた「目次」という文字のない目次。
やっと「目次」と入れることができました。
小さなカスタマイズですが、自分としてはかなり気になっていたので「目次」と追加できてよかったです。
参考にしたブログには目次そのもののカスタマイズも書かれているのでそちらを参考にしてみてください。
6. 見出しのカスタマイズ
こちらもずっと気になっていた部分でした。
カスタマイズ前は太字で文字サイズが大きくなるだけでしたが、カスタマイズ後はアンダーラインをいれて分かりやすくしたつもりです。
シンプルすぎて味気ないかもしれませんが・・・。
記事で参考にさせて頂いたブログではたくさんの参考例があるので自分ごのみのデザインがきっとみつかると思います。
是非、参考にしてみてください。
7. 記事リンクを枠で装飾(あわせて読みたい)
はてなブログでは、記事リンクは「ブログカード」「記事タイトルリンク」「URLリンク」の3つタイプがありますが、この記事では記事タイトルリンクを枠で囲って目立たせるカスタマイズを行いました。
仕上がりはこんな感じです↓
記事のリンクを枠で装飾するカスタマイズ - Random Life Blog
一風変わった感じで目立ってはいますよね。
ブログカードと使い分けていこうかと思います。
8. 吹き出しを使った会話形式のカスタマイズ
これは自分で記事を書いていて結構説明しずらい部分があったなと反省してます。
それほど難しくもないんですけど、敷居が高いものになってしまった感があります。
貼り付けコードが長かったり、画像を用意してURLも取得して・・・と結構手間はかかります。
しかし、一度実装してしまうと、効果的な対話形式の文章を展開でき、記事のアクセントにもなります。
少し難しいですが是非挑戦して欲しいカスタマイズです。
9. 記事下関連記事のカスタマイズ
記事の読後に他の記事も是非読んで欲しいですよね。
そんな思いも込めて、記事下の関連記事を目立たせてみました。
装飾は少なめで文字サイズを大きくして太字にしただけですがすごく目立つようになりました。
これで関連記事を読む方が増えてくれればよいのですが・・・。
10. サイドバーモジュールのタイトル
最後はサイドバーのタイトル。
文字を大きくしてアンダーラインを入れてみました。
アンダーラインを入れることでモジュールそれぞれが独立したものに見え、文字を大きくなった分見栄えもよくなりました。
ビフォー・アフターで比べてみるとかなり見やすくなったことが分かると思います。
文字サイズやアンダーラインは非常に大事なんだなと再認識しました。
さらに2つのカスタマイズ(追記)
11. 読了時間(この記事は何分で読めます)
記事上部に「この記事は◯分で読めます」という表示を入れました。
目安の読了時間を記事上部にわかるように示すことで、ユーザーに対して利便性を与えるものになると思います。
12. 「上へ戻る」ボタン
長い記事を読み終わって、ブログの上部に戻りたいときスクロールするのって結構大変ですよね。
「上へ戻る」ボタンを実装するとクリック1回で一気にブログ最上部まで戻ることが出来ます。
もう一度、記事を読んでもらえたり、サイドバーのリンクを辿ってもらえたりする可能性も出てくると思います
はてなブログカスタマイズまとめ
全部で10+2個のカスタマイズを行いました。
カスタマイズで個人的に気をつけたことはできるだけシンプルにするということでした。
もともとのブログデザインの延長線上になるよう極力シンプルにデザインしてみたつもりです。
特に色使いは黒を基調として文字の大きさや太さを変えるのみにしてアンダーラインなどを付け加えるのみのシンプルなデザインを目指しました。
シンプルさが見やすさにつながっていればよいのですが・・・。
見る方々それぞれの主観に委ねられそうですが、まぁ、うまくまとまった感は個人的にはあります。
ただ、せっかく色々カスタマイズしたのに、シンプル過ぎて物足りないという感じもありますが(笑)
10個のカスタマイズ中でどれかひとつでも興味を持ってもらえて、みなさんの参考になれば良いなと思います。
長々読んでいただいてありがとうございました。
