コピペで簡単！CSSではてなブログの見出しをカスタマイズ！

ブロガー必見記事

ブログでお小遣い稼ぎする方法大公開 – SHIROMAG

今回はたくさんの見出しを作ってみました。コピペだけで、はてなブログの見出しがカスタマイズできます。デザインは選べる8種類！

CSSの勉強にもなると思うので、WEBデザイン勉強中の人も必見です。

ただし、使っているテーマによっては、うまくいかない可能性があります。ご了承ください。

コピペでできる見出しのカスタマイズ

見出しのサンプルとそのコードの一覧です。コードを下の場所（デザイン→カスタマイズ→デザインCSS）に張り付ければ、CSSが反映されます。テーマを読み込むコードが記述されていると思うので、その下にコピペしてください。

先にコードの見方だけ説明しておきます。

はてなの編集画面では、見出しのタグは以下のように設定されています。

大見出し ・・・ h3

中見出し ・・・ h4

小見出し ・・・ h5

中見出しの見出しを変えたいときはコード内の h3 → h4 に書き換えて下さい。小見出しを変更したい場合は h3 → h5 に書き換えて下さい。

見出しの背景、ライン、文字の色はご自身で好きな色に変更してください。

たとえば、

の下線部が背景色です。ここのカラーコードを書き換えると色が変わります。

同様に、

の下線部が文字の色です。

下線部がラインの色です。

下記のサイトからカラーコードが確認できます。コードをコピペして書き換えれば好きな色に変更できます。

www.color-sample.com

もし使っているテーマの見出しデザインと重なってしまったら、下のコードを先に記述して、その後に見出しのコードを追加してください。

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
background: none;
border: none;
border-radius: 0;
}

見出しタイプ1

左にカラーのラインが入ったシンプルな見出しです。よく見かける見出しのデザインですね。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #2d70a4;
}

見出しタイプ2

左に太めのライン、下に細めのラインが入った見出し。こちらもよく見かける見出しのデザインですね。

.entry-content h3 {
padding: 4px 10px;
color: #111;
background-color: #f0f0f0;
border-left: 8px solid #1056a2;
border-bottom: 1px solid #1056a2;
}

見出しタイプ3

上下にラインが入った見出し。

.entry-content h3 {
padding: 4px 10px;
color: #111;
border-top: 2px solid #2d70a4;
border-bottom: 2px solid #2d70a4;
}

見出しタイプ4

見出しの下に2本のラインを重ねるデザイン。

.entry-content h3 {
position: relative;
color: #111;
border-bottom: 4px solid #ccc;
padding: 8px 10px;
}
.entry-content h3::before {
position: absolute;
top: 100%;
left: 0;
width: 20%;
height: 4px;
background-color: #3498db;
z-index: 2;
content: '';
}

見出しタイプ5

もみじさん（id:momijimom）からのリクエストでステッチ入りの見出しを作ってみました。ネイビーの背景色で、デニム生地風に。

.entry-content h3 {
position: relative;
padding: 6px 10px;
color: #fff;
background-color: #293b6a;
border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 100%;
height: 4px;
z-index: 2;
content: '';
}
.entry-content h3::before {
top: 0;
left: 0;
border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
top: 100%;
left: 0;
margin-top: -4px;
border-top: 1px dashed #fff;
}

見出しタイプ6

吹き出し風のデザイン。

.entry-content h3 {
position: relative;
color: #fff;
padding: 8px 12px;
background-color: #129b98;
border-radius: 6px;
}
.entry-content h3::before{
position: absolute;
top: 100%;
left: 32px;
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: transparent;
border-top-color: #129b98;
content: '';
}

見出しタイプ7

二枚の四角の背景を重ねてみました。色の組み合わせが楽しめる見出しです。

.entry-content h3 {
position: relative;
color: #fff;
padding: 6px 10px;
z-index: 2;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
width: 98%;
height: 100%;
content: '';
}
.entry-content h3::before{
top: 0px;
left: 0px;
z-index: -1;
background-color: #2a9ca2;
}
.entry-content h3::after{
top: 4px;
left: 4px;
z-index: -2;
background-color: #111;
}

見出しタイプ8

可愛い感じの見出し。たまに見かけるデザインですね。

.entry-content h3 {
position: relative;
padding: 6px 0 6px 34px;
color: #111;
border-bottom: 2px solid #ce0d55;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
background-color: #ce0d55;
content: '';
}
.entry-content h3::before{
top: 0;
left: 14px;
width: 12px;
height: 12px;
-webkit-transform: rotate(50deg);
transform: rotate(50deg);
}
.entry-content h3::after{
top: 18px;
left: 8px;
width: 8px;
height: 8px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}

スマホの見出し変更方法

スマホとPCのデザインを別にしている場合は、以下のようにデザインを設定してください。

スマホの見出しを変えたい場合は、デザイン→スマートフォン→記事上にコピペしてください。その場合、<style>タグを記述して、その中にコードをコピペしてください。

これでスマホの見出しも変更できます。

注：当ブログのコードで不具合が発生した場合の責任は負いかねますので、ご了承ください。カスタマイズは自己責任でお願いいたします。

このブログのデザインも飽きてきたのでそろそろ大幅な改修でもしようかな。

ブロガー必見のおすすめ記事はコレ！

ブログでお小遣い稼ぎする方法大公開

HTML、CSSを勉強してみたい方は、こちらの記事がオススメ。

HTML・CSS・JavaScriptを独学するのにおすすめの入門書・参考書まとめ

超初心者のためのHTML・CSS入門講座

他にもこんな記事書いてます。

コピペで簡単！はてなブログのシェアボタンをカスタマイズ | SHIROMAG

はてなブログの超便利なデザインテーマ「Brooklyn」を作りました | SHIROMAG

全くの未経験が独学でWEBデザイナーに転職するまで | SHIROMAG