やなぎのブログ

モンストネタ中心の雑記ブログ

超簡単!はてなブログの見出しカスタマイズで参考にした記事まとめ

MacBookのキーボード

はてなブログテーマ「innocent」最高!

Innocent - テーマ ストア

かなり完成度の高いテーマだと思うのでおすすめ!

なんだけど、やっぱり人気があるのか他の人と被ったりする。結構被る。

ちょっとは個人色出していきたい!

ということで、見出しのカスタマイズを決意。その時に参考にした記事をまとめておきます。

カスタマイズ方法(コピペする場所)

コピペする場所はここ。

はてなブログ管理画面上の「デザイン」をクリック。

「真ん中のマーク(工具みたいなやつ)」をクリックしてカスタマイズ画面を開き、「デザインCSS」をクリックするとコードを記述する欄が開きます。

はてなブログ デザインCSSの場所

最初から記載されてるものはそのまま。追記する形でコピペしてってね。それから、コピペ後は上にある「変更を保存する」のクリックを忘れずに。

記事中の見出しカスタマイズ方法

参考にした記事はこちら。

タイトルにあるように「ちょっとの工夫で印象が格段に変わる!」はマジ。

www.yukihy.com

基本的に上記記事の中から気に入った見出しのコードをコピペ。

特にいじってなければ

となるので、コードの「h〜」と記述されてる部分を該当するものに書き換えるだけ。超簡単!

コード書き換え部分

文字色や背景色を変える場合は次の部分を書き換えればOK

  • 文字色:color
  • 背景色:background
  • 枠線の色:border〜

色のコードを調べるにはこちらのサイトが便利。

www.colordic.org

サイドバー上の見出しカスタマイズ方法

記事中の見出しをカスタマイズしたのなら、それに合わせてサイドバーの見出しもカスタマイズして統一感を出したいところ。

これも超簡単。

「entry-content h〜」の部分を「hatena-module-title」に変えるだけ。

色味についても記事中の見出しと同様の部分を触ればOKです。

darie-daphnia.hatenablog.com

サイドバー上のカスタマイズにはこちらの記事を参考にさせてもらいました。

「続きを読む」のカスタマイズ方法

ここまで来たら「続きを読む」の色味も統一。

ちょっと難しいのかなーとか思いながらググってみるとこちらの記事を発見。意外に簡単そう。

georges.hatenablog.jp

てか、激簡単だった。

色の設定部分をコメントで補足してくれてるところが憎いよね。ありがとうございます!

どれにしようか悩んだところ、バイブレーション(ぶるぶる)に一目惚れ。

コードをコピペ、色の設定を見出しと揃えて完成。5分もかからなかった。

まとめ

僕みたいにデザインに関してド素人という人は、見出しと続きを読むボタンだけカスタマイズしてみるのがおすすめ。簡単な割に効果は大きいです。

逆に他の部分まで一気に触ってしまうと統一感がなくなってださくなってしまうこともありますからねー。怖い。

ソーシャルボタンの変更やナビゲーションバーの設置、関連記事の表示といったカスタマイズも簡単そうなので、様子を見ながら少しずつカスタマイズしていこうと思います。

それでは!