Pocket読者になるはてなブログを始めて色々悩んだ末、テーマを「Haruni」に決め、一通りのカスタマイズを終えました。blog.hatena.ne.jpテーマ「haruni」の特徴は、ざっとこんな感じです。1「レスポンシブ対応」2「2カラム」3「カード型」4「グラデーション」がオシャレ5PCでは「グローバルメニュー」⇔スマホでは「トグルメニュー」の変換機能が、ほとんど標準装備6「Minimalizm」「Brooklyn」に次ぐ第3位の人気(※2019年5月時点)色々検索すれば、先輩方の良質なカスタマイズ記事もわんさかHITし、かなり短時間で満足できるカスタマイズを施すことができました。一通り満足しましたし、これ以降は「Haruni」からテーマを変更する予定はありません。⇒2019年7月以降から「zeno-teal」というテーマ使用しています。トップページのお洒落さに惹かれました。あわせて読みたい【はてなブログ】「ZENO-TEAL」コピペで簡単なカスタマイズ参考記事まとめ当記事では、私が今まで参考にしたカスタマイズの記事をご紹介したいと思います。これから「Haruniに変更しよっかな」という方にお役に立てれば幸いです。「デモサイト」のカスタマイズこれだけでも、一通りやることをオススメします。yumekawa.hatenadiary.com良質なカスタマイズ方法の記事が事例ごとに載っておりますので、これをやるだけでもかなり立派な見栄えにすることができますよ。【1】グローバルメニュー⇔トグルメニュー(ハンバーガーメニュー)「Haruni」にテーマ変更したら、まず一番初めに行っておいてほしいカスタマイズです。コピペだけで、簡単にグローバルメニューが設置出来ちゃいますので、サクッとやってしまいましょう。yumekawa.hatenadiary.com【2】グラデーションの変更デフォルトは「ピンクのグラデーション」となっていますが、簡単に違う色にも変更できるよう「着せ替え用のCSS」がご用意されてます。自身のブログのイメージに沿う色合いに変更しましょう。yumekawa.hatenadiary.com「グラデーション」が嫌な場合や、なんかしっくりこない方のために、「単色カラー着せ替え用のCSS」も用意されています。当ブログは「グラデーション」がしっくりこなかったため、「ピンクのグラデーション」から「青系の単色カラー」に変更しています。yumekawa.hatenadiary.com【3】タイトル画像の調整せっかく格好いいタイトル画像を設置したとしても、変なところで切れてしまうとみっともなく、もったいないです。きれいに収まるように、カスタマイズしましょう。yumekawa.hatenadiary.comyumekawa.hatenadiary.com【4】フッターのカスタマイズ「はてなブログ標準のフッター」って、お世辞にもあまりイケてないので、「はてなブログPRO」に登録されている場合は、消した方が賢明です。以下記事を参考に、自分好みのフッターを作りましょう。手を抜いちゃう人も多いですが、色々なリンクや情報を載せられるところですので、やらないと損ですよ!yumekawa.hatenadiary.com【5】シェアボタンのカスタマイズ以下記事を参考に、つい押したくなる「シンプルで格好いいシェアボタン」が実装できました。シックな感じでかなり気に入ってます。yumekawa.hatenadiary.comSNSでシェアされた回数を表示することも可能です。yumekawa.hatenadiary.com【6】サイドバーのフォローボタンはてな標準のフォローボタンでは、イマイチパッとしませんよね。カッコいいいデザインにカスタマイズしておくといいです。上記「デモブログのカスタマイズ」以外に、当ブログで実施した諸々のカスタマイズについて、参考記事をご紹介します。自身のブログをカッコよくしたい方は、是非参考にしてみてください。【1】「目次」のカスタマイズデフォルトのままでもいいですが、もっとカッコいい目次にすることが出来ます。ブログに訪れた人は、目次の内容を見て読むか決める場合もありますので、カッコいい目次にカスタマイズしましょう。FOUNDページ」が表示されますが、標準のものだと味気ないです。あまりに味気ないので、それを見た人は、「なんやねん!」ってなって、すぐ立ち去っちゃうかもしれませんね。記事一覧に表示される「アイキャッチ画像」は、ブロガーのセンスの見せ所ですよね。カッコいいアイキャッチ画像を使っていても、「サイズがちぐはぐ」だと、上手いこと表示されないのでもったいないです。「ブログでの見栄え」や、「ターゲットとするSNS」を意識して適切なサイズにしましょう。縦580px」が最適だそうですよ。文字が小さいと読む気がうせてしまいます。読みやすい文字サイズに調整しましょう。文字サイズが1px違うだけで、読みやすさが格段に向上しますよ。ちなみに、「Googleが推奨しているのは「16px以上」とのことです。www.okuni.me【5】「外部リンク」は「別ウインドウ」で開くようにカスタマイズせっかく自分のブログにアクセス頂いたからには、「できる限り長い時間」「色々な記事」を読んでほしいですよね。それなのに、デフォルトでは「外部リンク」「内部リンク」に関わらず「同じウィンドウ」で開く状態となっています。自ブログからの離脱を防ぐため、「外部リンクをクリックした場合」は「別ウィンドウで開く」ようにカスタマイズしておくことをオススメします。記事を読み進めているときに、クリックすると「しゅい~ん」と、最上部に戻ることができるボタンの設置方法です。気合の入った長い記事だと、スクロールして上に戻るのがとても煩わしいので、操作性向上のために是非設置しておきたい機能です。nohack-nolife.hatenablog.com【7】aboutページのカスタマイズはてな標準のままだと、とても不格好なので、カッコいいページにカスタマイズしましょう。アクセスを解析すると、意外と訪れる人がいてビックリします。www.okuni.me【8】ブログ全体を枠で囲むブログ全体を、枠線で覆うことができるカスタマイズです。ヘッダーやボタンの色との相性を考えて色を設定すると、ブログの印象が変わります。blog.minimal-green.com【9】細長いテキストリンクの設置ヘッダーの下などに細長いテキストリンクを設置するカスタマイズ方法です。「オススメ記事のリンク」を載せたり、「読者への通知」を載せたりといった用途で、非常に役立ちます。設置していない人は活用してみてはいかがでしょうか!www.oheya-migaru.com【ブクマ必須】カスタマイズ時お役立ちリファレンスサイトカスタマイズ時に、もはや「辞書代わり」として使用している、超有能な記事をご紹介します。サンプルカッコいい見出しが「68種類」もご紹介されています。サンプル記事中に、一覧で情報を載せたりするとき「枠線(囲み枠)」が大活躍します。記事のまとまりもよくなるので、オススメです。以下記事では、イケてる枠線が「30種類」もご紹介されていますので、是非参考にしてみてください。「見出し」「枠線」のサンプル記事をご紹介しましたが、それ以外にも良質なサンプル集が豊富にあります。以下記事で「サンプル集」がまとまっているので、ここからご自身のブログで足りていないカスタマイズを補ってみてはいかがでしょうか。色一覧ブログを運営している方なら、誰しも色の変更は随時行いたくなるでしょう。参考に私が愛用しているリファレンスサイトをご紹介します。使いたいアイコンを探すのに使用しています。イメージにピッタリなアイコンを使用すると、グっとおしゃれになります。fontawesome.com「エクセル表⇒テーブル(HTML)」変換ツール「テーブル」を使って情報をまとめると、記事の内容が一気に見やすくなるのでオススメです。以下のツールを使って「エクセルの内容」を「テーブル(HTML)」に置換することができます。tech-unlimited.comstyleme.jp「Haruni」ユーザーの感想Haruniを気に入っている方は多いようで、オススメしている記事がたくさんありましたのでご紹介します。「Haruni」を使ってみるか悩んでいる方は、参考にしてみてください。www.okuni.mewww.chata13.com最後に参考記事を参考に、試行錯誤もしながら色々とカスタマイズを施していきましたが「やり始めるとキリがないなあ」というのが感想です。「ある程度デザインが完成」したら、いったん区切りをつけて「いい記事をいっぱい書く」ことにシフトしていった方がいいでしょう。22:02【はてなブログ】「Haruni」コピペで簡単なカスタマイズ参考記事まとめ関連記事2019-08-30【新人SEの掟】上司・先輩に「話しかけるタイミング」を見計らう2019-07-30【はてなブログ】「ZENO-TEAL」コピペで簡単なカスタマイズ参考記事まとめ「はてなブログ」のイケてるカード型のテーマ「ZENO-TEAL」。スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。