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

f:id:salarymanZ:20190505221611j:plain



はてなブログを始めて色々悩んだ末、テーマを「Haruni」に決め、一通りのカスタマイズを終えました。

blog.hatena.ne.jp

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

①「レスポンシブ対応」

②「2カラム」

③「カード型」

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

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

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

色々検索すれば、先輩方の良質なカスタマイズ記事もわんさかHITし、かなり短時間で満足できるカスタマイズを施すことができました。一通り満足しましたし、これ以降は「Haruni」からテーマを変更する予定はありません。

当記事では、私が今まで参考にしたカスタマイズの記事をご紹介したいと思います。これから「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

yumekawa.hatenadiary.com

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

標準のフォローボタンでは味気ないので、カッコいいいデザインにカスタマイズしておくといいですね。

yumekawa.hatenadiary.com

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

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

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

はてなブログ標準の目次はイマイチなので、かっこよくカスタマイズしましょう。

mshitech.hatenablog.com

www.yukihy.com

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

「記事削除」や「URL変更」等を行うと、該当の記事にアクセスした場合「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

【お気に入り登録必須】カスタマイズ参考記事

カスタマイズ時に、もはや「辞書代わり」として使用している、超有能な記事をご紹介します。

サルワカ

見出し サンプル

saruwakakun.com

枠線 サンプル

saruwakakun.com

CSSデザイン サンプル

saruwakakun.com

HTML 色一覧

www.colordic.org

www.netyasun.com

Font Awesome アイコン一覧

使いたいアイコンを探すのに使用します。

fontawesome.com

 

「Haruni」ユーザーの感想

Haruniを気に入っている方は多いようで、オススメしている記事がたくさんありましたのでご紹介します。


www.okuni.me
www.chata13.com