炎のサラリーマンZ

★「システムエンジニア7年目」の血と汗と涙の記録★

【はてなブログ】テーマ「Haruni」ユーザー必見!コピペで簡単なカスタマイズ参考記事のご紹介!

f:id:salarymanZ:20190715171919j:plain


はてなブログを始めて色々悩んだ末、テーマを

「Haruni」

に決め、一通りのカスタマイズを終えました。

blog.hatena.ne.jp

テーマ「haruni」の特徴は、ざっとこんな感じです。

①「レスポンシブ対応」

②「2カラム」

③「カード型」

④「グラデーション」がオシャレ

⑤PCでは「グローバルメニュー」⇔スマホでは「トグルメニュー」の変換機能が、ほとんど標準装備

⑥「Minimalizm」「Brooklyn」に次ぐ第3位の人気(※2019年5月時点)

色々検索すれば、先輩方の良質なカスタマイズ記事もわんさかHITし、かなり短時間で満足できるカスタマイズを施すことができました。一通り満足しましたし、これ以降は「Haruni」からテーマを変更する予定はありません。⇒2019年7月以降から「zeno-teal」を使用しています。トップページのお洒落さに惹かれました

当記事では、私が今まで参考にしたカスタマイズの記事をご紹介したいと思います。これから「Haruniに変更しよっかな」という方にお役に立てれば幸いです。

【haruni デモサイト】カスタマイズ記事

「あちこち検索して、試行錯誤するのが面倒だ!!」

というめんどくさがりやさんは、

「デモサイト」に載っているカスタマイズ

これだけでも、一通りやることをオススメします。

yumekawa.hatenadiary.com

良質なカスタマイズ方法の記事が事例ごとに載っておりますので、これをやるだけでもかなり立派な見栄えにすることができますよ。

【1】グローバルメニュー⇔トグルメニュー(ハンバーガーメニュー)

一番初めに行っておいてほしいカスタマイズです。

ほぼコピペだけで、簡単にグローバルメニューが設置出来ちゃいますので、サクッとやってしまいましょう。

yumekawa.hatenadiary.com

【2】グラデーションの変更

デフォルトは

「ピンクのグラデーション」

となっていますが、簡単に違う色にも変更できます。

自身のブログのイメージに沿う色合いに変更しましょう。

yumekawa.hatenadiary.com

もしグラデーションが嫌な場合やしっくりこない場合は

単色カラー

にすることも可能です。

 

当ブログはグラデーションの色合いがしっくりこなかったため、

「ピンクのグラデーション」

から

「青系の単色カラー」

に変更しています。

yumekawa.hatenadiary.com

【3】タイトル画像の調整

タイトル画像を設置する場合、変なところで切れてしまうとみっともないです。

きれいに収まるように、カスタマイズしましょう。

yumekawa.hatenadiary.com

yumekawa.hatenadiary.com

【4】フッターのカスタマイズ

はてなブログ標準のフッターってあまりイケてないので、

「はてなブログPRO」

に登録されている場合は、消した方が無難です。

自分好みのフッターにカスタマイズしておきましょう。

カスタマイズ次第で、色々リンクや情報を載せられるところですので、やらないと損ですよ!

yumekawa.hatenadiary.com

【5】シェアボタンのカスタマイズ

つい押したくなる

「シンプルで格好いいシェアボタン

が実装できました。

かなり気に入ってます。
yumekawa.hatenadiary.com

SNSでシェアされた回数を表示することもできます。

yumekawa.hatenadiary.com

【6】サイドバーのフォローボタン

標準のフォローボタンでは味気ないです。

カッコいいいデザインにカスタマイズしておくといいですね。

yumekawa.hatenadiary.com

【その他】オススメなカスタマイズ記事

上記で紹介した

「デモブログ」

の内容以外に、当ブログで実施した諸々のカスタマイズについて、参考記事をご紹介します。もっと自身のブログをカッコよくしたい方は、是非やってみてください!

【1】「目次」のカスタマイズ

デフォルトのままでもいいですが、もっとカッコいい目次にすることが出来ます。

ブログに訪れた人は、目次の内容を見て読むか決める場合もありますので、目立つようにカッコよくカスタマイズしましょう。

mshitech.hatenablog.com

www.yukihy.com

【2】「404 NOT FOUNDページ」のカスタマイズ

「記事削除」や「URL変更」

等を行うと、該当の記事にアクセスした場合

「404 NOT FOUNDページ」

が表示されますが、標準のものだと味気ないです。

 

あまりに味気ないので、それを見た人は、

「なんやねん!」

ってなって、すぐ立ち去っちゃうかもしれませんね。せっかくアクセスして来てもらえたんですから、

「404 NOT FOUNDページ」

「他のオススメ記事を紹介する」

等といったカスタマイズを施し、ちょっとでもチャンスを広げましょう!

www.fair-skinned-monster.com

【3】アイキャッチ画像のサイズ調整

記事一覧に表示される

「アイキャッチ画像」

は、ブロガーのセンスの見せ所ですよね。

しかし、いくら

「格好いいアイキャッチ画像」

を使っていても、

「サイズがちぐはぐ」

だと上手いこと表示されないのでもったいないです。

「ブログでの見栄え」や、「ターゲットとするSNS」を意識して適切なサイズにしましょう。

「横830px × 縦580px」が最適だそうですよ。

kiniblog.com

【4】文字サイズの調整

文字が小さいと読む気がうせてしまいます。

読みやすい文字サイズに調整しましょう。

Googleが推奨しているのは「16px以上」とのことです。

www.okuni.me

【5】「外部リンク」は「別ウインドウ」で開くようにカスタマイズ

せっかく自分のブログにアクセス頂いたからには

「できる限り長い時間」

「色々な記事」

をよんでほしいですよね。

 

それなのに、デフォルトでは

「外部リンク」「内部リンク」に関わらず

「同じウィンドウ」

開く状態となっています。

 

自ブログからの離脱を防ぐため、

「外部リンクをクリックした場合

「別ウィンドウで開く

ようにカスタマイズしておくことをオススメします。

www.inside-shiina.com

【6】トップに戻るボタンの設置

記事を読み進めているときに、クリックすると

「しゅい~ん」

と最上部に戻ることができるボタンの設置方法です。

長い記事だと、スクロールして戻るのも面倒ですので、是非設置しておきたい機能です。

nohack-nolife.hatenablog.com

【7】aboutページのカスタマイズ

標準のままだと、とても不格好なので、カッコいいページにカスタマイズしましょう。アクセスを解析すると、意外と訪れる人がいてビックリします。

www.okuni.me

【8】ブログ全体を枠で囲む

ブログ全体を枠線で覆うことができるカスタマイズです。ヘッダーやボタンの色との相性を考えて設定するとベターですね。

当ブログの場合は、全体を

「緑ぽい色で枠線」

で囲っています。

blog.minimal-green.com

【9】細長いテキストリンクの設置

ヘッダーの下などに

細長いテキストリンク

を設置するカスタマイズ方法です。

「オススメ記事のリンク」

を載せたり、

「読者への通知」

を載せたりといった用途で、非常に役立ちますので、まだ設置していない人は活用してみてはいかがでしょうか!

www.oheya-migaru.com

【ブクマ必須】カスタマイズ時お役立ちリファレンスサイト

カスタマイズ時に、もはや

「辞書代わり」

として使用している、超有能な記事をご紹介します。

サルワカ

見出し サンプル

カッコいい見出しが

「68種類」

もご紹介されています。

ここで探せば、きっとあなたにピッタリの見出しが見つかるはずです!
saruwakakun.com

枠線 サンプル

記事中に一覧で情報を載せたりするとき

「枠線(囲み枠)」

は大活躍します。

何個かピックアップして使うと記事のまとまりもよくなりますよ。

イケてる枠線が

「30種類」

もご紹介されていますので、是非参考にしてみてください。

saruwakakun.com

CSSデザイン サンプル

私が参考にさせていただいたのは

「見出し」

「枠線」

のサンプルでしたが、それ以外にも良質なサンプル集が豊富にありました。

以下記事で「サンプル集」がまとまっているので、ここからご自身のブログで足りていないカスタマイズを補ってみてはいかがでしょうか。

saruwakakun.com

HTML 色一覧

HTMLのカラーコードは、ブログを運営している方なら誰しも色の変更は随時行っているでしょうが、参考に私が愛用しているリファレンスサイトをご紹介します。

www.colordic.org

www.netyasun.com

Font Awesome アイコン一覧

使いたいアイコンを探すのに使用しています。イメージにピッタリなアイコンを使用すると、グっとおしゃれになります。

fontawesome.com

「エクセル表⇒テーブル(HTML)」変換ツール

「テーブル」を使って情報をまとめると、記事の内容が一気に見やすくなるのでオススメです。

以下のツールを使って「エクセルの内容」「テーブル(HTML)」に置換することができます。

tech-unlimited.com

styleme.jp

 

「Haruni」ユーザーの感想

Haruniを気に入っている方は多いようで、オススメしている記事がたくさんありましたのでご紹介します。「Haruni」を使ってみるか悩んでいる方は、参考にしてみてください。
www.okuni.me
www.chata13.com

最後に

参考記事を参考に、試行錯誤もしながら色々とカスタマイズを施していきましたが

「やり始めるとキリがないなあ」

というのが感想です。

「ある程度デザインが完成」

したら、いったん区切りをつけて

「いい記事をいっぱい書く」

ことにシフトしていった方がいいでしょう。

ある程度は当ブログのデザインが完成しましたし、一旦は一段落ですが、まだまだやり残したカスタマイズもありますので、実施したら随時追記してご紹介したいと思います!