見出しをカラフルにして楽しむ!
はてなブログをカスタマイズする際に誰もがするであろう?見出しのカスタマイズですが基本はカスタムcssで定義してそれを使う感じだと思います。
ページによっては違うデザインで使用する為本文に<style></style>で再定義して使っている方もいると思います。
ただし通常は最後に定義した形でしか使えないので使える形は大見出し(h5)、中見出し(h4)、小見出し(h3)の3種類です
ま~それでも十分だとは思いますし、SEOを意識してかっちりとこの枠組みを利用している方もいると思いますが、自分の場合あまりSEOは意識せずに見た目を良くしたいと思い日々奮闘しています。
という事で3種類じゃ足りない()ので簡単に見出しの数を増やす?方法を紹介したいと思います。
それは見出しタグにid属性をつける方法です
その為まず<style></style>内に見出しを定義します
/* 見出しのリセット */
.entry-content h4,
.entry-content h4::before,
.entry-content h4::after {
background: none;
border: none;
border-radius: 0;
}
/* 見出しh4 用 */
#midasi1 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #fb90a4;
border-bottom: 1px solid #fb90a4;
}
#midasi2 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #8765c1;
border-bottom: 1px solid #8765c1;
}
#midasi3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #ff7b1d;
border-bottom: 1px solid #ff7b1d;
}
#midasi4 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #217ed6;
border-bottom: 1px solid #217ed6;
}
#midasi5 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #d70d20;
border-bottom: 1px solid #d70d20;
}
とりあえず中見出しを使っていますが、当然大見出し、小見出しでも問題無いです。
ポイントはまず最初に見出しの定義をリセットして素の状態にする事です。
これは試して見ればわかると思いますが、デザインを変更するとカスタムCSSで定義した内容が残っていてデザインが崩れてしまいます。
これは本文途中で切り替えても同じ事です。
デザインによっては切替も可能だと思いますが、あまりお勧めはしません。
という事で今回は見出しの色変更のみです。。。
実際に色を切り替えて見出しを使ってみます・・・
書式は通常の見出しタグにid="定義した見出し"を挿入します。
<h4 id="midasi1"> と言う感じです。
ちなみに自分は見たままモードを使っています。id="midasi1"の部分はHTML編集に切替て直接入力してください。
という事で見出しにidを定義して使ってみると・・・
鹿目まどか
暁美ほむら
巴マミ
美樹さやか
佐倉杏子
こんな感じになります。
idを使えば無限?に楽しめると思います。
よろしければお試しください。