みやもとブログ

好きなものの感想などを書いています。読書、ラジオ、資格、Notionなど。

【はてなブログ-カスタマイズ】見出しをカスタマイズしてみる(CSS対応)

この記事をシェアする

数日前から適用していますが、見出しを少しカスタマイズしてみました。

今回のカスタマイズは既存のデザイン(デザインテーマ)に変更が入っています。

実はこれまで記事にしてきたブログカスタマイズは

など、既存のデザイン変更というよりは、パーツ追加というか、付け加える感じのカスタマイズが多かったです。
※カテゴリーリンクのデザイン変更は既存デザインの変更ですが、小さな変化でした。

ということで今回の見出しカスタマイズはちょっと抵抗があったのですが、試しにデザイン変更してみたら、やっぱり適用してみたくなりました。

とはいえ大きくデザイン変更したわけではないです。
ですが、ブログにおいて見出しのデザインはけっこう印象が変わる部分かなと。

長々とアレコレ書きましたが、どんな対応をしたか書いていきます。

変更内容(画像)

まずは手っ取り早く、変更前後の画像を載せます。

変更前

変更前

変更後

変更後

こんな感じです。

変更前のデザインに関して「大見出し」と「中見出し」に大きく差がないなと若干思っておりました。(個人の好みですが。)

そこで今回は「大見出し」と「中見出し」でもう少し差がつくようなデザインに変更しています。

「大見出し」の背景色を薄いグレーにして、下ボーダーをなくしてみました。

「大見出し」の変更のみで、「中見出し」「小見出し」に変更はないです。



これから貼る画像は、今回適用を見送ったデザインです。
とはいえ適用する可能性も捨てきれないなということでここに貼ります。

見送った案1

見送った案1

「大見出し」は変更せず、「中見出し」の左ボーダーを濃い目のグレーにしてみました。

あまり変化がないですね。
ただ「中見出し」のグレーを更に薄くすると、今度は「小見出し」との差がなくなってしまうので見送りとなりました。

見送った案2

見送った案2

「大見出し」の背景色をグレーにしてみました。

今度は「大見出し」の下ボーダーが余計に感じてしまいました。
この案から、今回採用した案につながります。

見送った案3

見送った案3

「大見出し」の背景色を薄めのグレーにし、下ボーダーを濃い目グレーにして立体的にしてみました。

これは見送ったものの、けっこう気に入っているデザインです。
ただ「大見出し」だけ立体的なのはどうなんだろう?となり見送りとなりました。



どの案にしようかは悩みました。
アレコレ悩んで、「変更前がやっぱり一番良いんじゃないか?」とも思いつつ。
「でもせっかくだから適用しよう」と思い立ちました。

適用したCSS

/***見出し***/
.entry-content h3 {
    padding: 8px 0px 8px 10px;
    border-bottom: none;
    background: #eee;
}
.entry-content h3:after {
    content: none;
}
/***見出しここまで***/

上記のCSSを適用すると見出しのデザインが変更されます。



見送った案のコードも残しておきます。
残しておくことで、いつでも見送った案を適用できます。

見送った案1

/***見出し***/
.entry-content h4 {
    border-left: 4px solid #333;
}
/***見出しここまで***/

見送った案2

/***見出し***/
.entry-content h3 {
    background: #eee;
    padding: 8px 0 8px 10px;
}
/***見出しここまで***/

見送った案3

/***見出し***/
.entry-content h3 {
    padding: 4px 0px 4px 10px;
    border-bottom: solid 4px #CCC;
    background: #FCFCFC;
}
.entry-content h3:after {
    content: none;
}
/***見出しここまで***/

デザインの適用手順

一応、適用手順を載せておきます。

①ヘッダーの右上あたりにあるところをクリックして「デザイン」をクリック

②「カスタマイズ」→「デザインCSS」→「CSS記述領域」をクリック

③上述のCSSをコピペする(既存のCSSは消さずに)

④「変更を保存する」をクリック

⑤デザインが変更されているか確認する
デザインが変更されなかったり、変になっている方は
手順が間違っているか、今使っているデザインテーマと相性が悪いか、他にもCSSやJSを埋め込んでいてその影響か、、などなど原因は色々考えられます。

注意事項

はてなブログで適用したものです。
はてなブログ以外では試してないので、うまく動かない可能性があります。

今使っているSilenceというデザインテーマに追加でCSS適用した形となります。

他のデザインテーマを使っている方や、他にもCSSやJSを埋め込んでいる人はうまく動かない可能性がありますので、もし今回記載のCSSを適用しようとしている方はその辺りご了承ください。

おわりに

ということで見出しのカスタマイズでした。

変更前のデザインと比べると、「大見出し」と「中見出し」でデザインに差がついたかなと思っています。

ただやはり既存のデザインを変更するのにはけっこうな葛藤があり、しれっと変更前に戻す可能性が大いにあります。

とはいえ見出しはほとんどの記事に設定しているので、見出しのデザイン変更は新鮮味がありました。

またなにかブログカスタマイズしたら記事にします。

関連記事

これまでの見出しデザイン変更の記事をリンクしておきます。
気になる記事があればぜひ。


見出しをカスタマイズしてみる

見出しデザインをCSSで変更(2回目)

見出しデザインをCSSで変更(3回目)

見出しデザインをCSSで変更(4回目)

TOP HOME