はてなブログを始めて色々悩んだ末、テーマを「Haruni｣に決め、一通りのカスタマイズを終えました。
テーマ「haruni」の特徴は、ざっとこんな感じです。
①「レスポンシブ対応」
②「2カラム」
③「カード型」
④「グラデーション」がオシャレ
⑤ＰＣでは「グローバルメニュー」⇔スマホでは「トグルメニュー」の変換機能が、ほとんど標準装備
⑥「Minimalizm」「Brooklyn」に次ぐ第３位の人気（※２０１９年５月時点）
色々検索すれば、先輩方の良質なカスタマイズ記事もわんさかHITし、かなり短時間で満足できるカスタマイズを施すことができました。一通り満足しましたし、これ以降は「Haruni」からテーマを変更する予定はありません。⇒2019年7月以降から「zeno-teal」というテーマ使用しています。トップページのお洒落さに惹かれました。
当記事では、私が今まで参考にしたカスタマイズの記事をご紹介したいと思います。これから「Haruniに変更しよっかな」という方にお役に立てれば幸いです。
【haruni デモサイト】カスタマイズ記事
「あちこち検索して、試行錯誤するのが面倒だ！！」というめんどくさがりやさんは、
「デモサイト」のカスタマイズ
これだけでも、一通りやることをオススメします。
良質なカスタマイズ方法の記事が事例ごとに載っておりますので、これをやるだけでもかなり立派な見栄えにすることができますよ。
【１】グローバルメニュー⇔トグルメニュー（ハンバーガーメニュー）
「Haruni」にテーマ変更したら、まず一番初めに行っておいてほしいカスタマイズです。ほぼコピペだけで、簡単にグローバルメニューが設置出来ちゃいますので、サクッとやってしまいましょう。
【２】グラデーションの変更
デフォルトは「ピンクのグラデーション」となっていますが、簡単に違う色にも変更できるよう「着せ替え用のCSS」がご用意されてます。自身のブログのイメージに沿う色合いに変更しましょう。
「グラデーション」が嫌な場合や、なんかしっくりこない方のために、「単色カラー着せ替え用のCSS」も用意されています。当ブログは｢グラデーション｣がしっくりこなかったため、「ピンクのグラデーション｣から「青系の単色カラー」に変更しています。
【３】タイトル画像の調整
せっかく格好いいタイトル画像を設置したとしても、変なところで切れてしまうとみっともなく、もったいないです。きれいに収まるように、カスタマイズしましょう。
【４】フッターのカスタマイズ
「はてなブログ標準のフッター」って、お世辞にもあまりイケてないので、「はてなブログＰＲＯ」に登録されている場合は、消した方が賢明です。以下記事を参考に、自分好みのフッターを作りましょう。
割と手を抜いちゃう人も多いですが、色々なリンクや情報を載せられるところですので、やらないと損ですよ！
【５】シェアボタンのカスタマイズ
以下記事を参考に、つい押したくなる「シンプルで格好いいシェアボタン」が実装できました。シックな感じでかなり気に入ってます。
yumekawa.hatenadiary.com
SNSでシェアされた回数を表示することも可能です。
【６】サイドバーのフォローボタン
はてな標準のフォローボタンでは、イマイチパッとしませんよね。カッコいいいデザインにカスタマイズしておくといいです。
【その他】オススメなカスタマイズ記事
上記「デモブログのカスタマイズ」以外に、当ブログで実施した諸々のカスタマイズについて、参考記事をご紹介します。
もっと自身のブログをカッコよくしたい方は、是非参考にしてみてください。
【１】「目次」のカスタマイズ
デフォルトのままでもいいですが、もっとカッコいい目次にすることが出来ます。
ブログに訪れた人は、目次の内容を見て読むか決める場合もありますので、カッコいい目次にカスタマイズしましょう。
【２】「404 NOT FOUNDページ」のカスタマイズ
「記事削除」や「ＵＲＬ変更」等を行うと、該当の記事にアクセスした場合「404 NOT FOUNDページ」が表示されますが、標準のものだと味気ないです。あまりに味気ないので、それを見た人は、「なんやねん！」ってなって、すぐ立ち去っちゃうかもしれませんね。
せっかくアクセスして来てもらえたんですから、「404 NOT FOUNDページ」に「他のオススメ記事を紹介する」等といったカスタマイズを施し、ちょっとでもブログ回遊のチャンスを広げましょう！
【３】アイキャッチ画像のサイズ調整
記事一覧に表示される「アイキャッチ画像｣は、ブロガーのセンスの見せ所ですよね。しかし、いくらカッコいいアイキャッチ画像を使っていても、「サイズがちぐはぐ」だと、上手いこと表示されないのでもったいないです。「ブログでの見栄え」や、「ターゲットとするＳＮＳ」を意識して適切なサイズにしましょう。
⇒「横830px × 縦580px」が最適だそうですよ。
【４】文字サイズの調整
文字が小さいと読む気がうせてしまいます。読みやすい文字サイズに調整しましょう。文字サイズが1px違うだけで、読みやすさが格段に向上しますよ。
ちなみに、「Googleが推奨しているのは「16px以上」とのことです。
【５】「外部リンク」は「別ウインドウ」で開くようにカスタマイズ
せっかく自分のブログにアクセス頂いたからには、「できる限り長い時間」「色々な記事」を読んでほしいですよね。それなのに、デフォルトでは「外部リンク」「内部リンク」に関わらず「同じウィンドウ」で開く状態となっています。
自ブログからの離脱を防ぐため、「外部リンクをクリックした場合」は「別ウィンドウで開く」ようにカスタマイズしておくことをオススメします。
【６】トップに戻るボタンの設置
記事を読み進めているときに、クリックすると「しゅい～ん」と、最上部に戻ることができるボタンの設置方法です。気合の入った長い記事だと、スクロールして上に戻るのがとても煩わしいので、操作性向上のために是非設置しておきたい機能です。
【７】aboutページのカスタマイズ
はてな標準のままだと、とても不格好なので、カッコいいページにカスタマイズしましょう。アクセスを解析すると、意外と訪れる人がいてビックリします。
【８】ブログ全体を枠で囲む
ブログ全体を、枠線で覆うことができるカスタマイズです。ヘッダーやボタンの色との相性を考えて色を設定すると、ブログの印象が変わります。
【９】細長いテキストリンクの設置
ヘッダーの下などに細長いテキストリンクを設置するカスタマイズ方法です。「オススメ記事のリンク」を載せたり、「読者への通知」を載せたりといった用途で、非常に役立ちます。まだ設置していない人は活用してみてはいかがでしょうか！
【ブクマ必須】カスタマイズ時お役立ちリファレンスサイト
カスタマイズ時に、もはや「辞書代わり」として使用している、超有能な記事をご紹介します。
サルワカ
見出し サンプル
カッコいい見出しが
「６８種類」
もご紹介されています。
ここで探せば、きっとあなたにピッタリの見出しが見つかるはずです！
saruwakakun.com
枠線 サンプル
記事中に、一覧で情報を載せたりするとき「枠線（囲み枠）」が大活躍します。記事のまとまりもよくなるので、オススメです。
以下記事では、イケてる枠線が「３０種類」もご紹介されていますので、是非参考にしてみてください。
CSSデザイン サンプル集
「見出し｣「枠線」のサンプル記事をご紹介しましたが、それ以外にも良質なサンプル集が豊富にあります。
以下記事で「サンプル集」がまとまっているので、ここからご自身のブログで足りていないカスタマイズを補ってみてはいかがでしょうか。
HTML 色一覧
ブログを運営している方なら、誰しも色の変更は随時行いたくなるでしょう。
参考に私が愛用しているリファレンスサイトをご紹介します。
Font Awesome アイコン一覧
使いたいアイコンを探すのに使用しています。イメージにピッタリなアイコンを使用すると、グっとおしゃれになります。
「エクセル表⇒テーブル（HTML）」変換ツール
「テーブル」を使って情報をまとめると、記事の内容が一気に見やすくなるのでオススメです。
以下のツールを使って「エクセルの内容」を「テーブル（HTML）」に置換することができます。
テーブルの装飾を色々いじくりたい場合は、以下が参考になります。
「Haruni」ユーザーの感想
Haruniを気に入っている方は多いようで、オススメしている記事がたくさんありましたのでご紹介します。「Haruni」を使ってみるか悩んでいる方は、参考にしてみてください。
www.okuni.me
www.chata13.com
最後に
参考記事を参考に、試行錯誤もしながら色々とカスタマイズを施していきましたが「やり始めるとキリがないなあ」というのが感想です。
「ある程度デザインが完成」したら、いったん区切りをつけて「いい記事をいっぱい書く」
ことにシフトしていった方がいいでしょう。
ある程度は当ブログのデザインが完成しましたし、一旦は一段落ですが、まだまだやり残したカスタマイズもありますので、実施したら随時追記してご紹介したいと思います！
