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

投稿日：2016-02-17 更新日：2019-06-19

ブロガー必見記事

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

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

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

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

1 コピペでできる見出しのカスタマイズ
2 見出しタイプ1
3 見出しタイプ2
4 見出しタイプ3
5 見出しタイプ4
6 見出しタイプ5
7 見出しタイプ6
8 見出しタイプ7
9 見出しタイプ8
10 スマホの見出し変更方法

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

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

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

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

大見出し・・・ h3

中見出し・・・ h4

小見出し・・・ h5

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

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

たとえば、

background-color: #111;

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

同様に、

color: #111;

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

border: #111;

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

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

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);
}