コピペでどうぞ。はてなブログ用の見出しCSSカスタマイズをとりあえず25個ほど

こんにちは、つばさ（@_tsubasa123_）です。

今日はみんな大好きコピペシリーズで王道の見出しデザインを試してみました。とりあえず25パターンほど用意しましたが、今後も気が向いたときに追加していければいいかなと思っています。ありきたりなデザインばかりであまり面白くないですが、誰かのお役に立てれば幸いです。

カスタマイズコードの登録方法と修正方法

この記事で紹介するCSSコードをそのままダッシュボードへコピペしていただければ、見出しのデザインが適応されるようにしてあります。PC、スマホどちらでも大丈夫です。HTMLとかCSSとかはちょっと…という方は作業をされる前にバックアップをとることをおススメします。

また、はてなブログを書く際に編集モードで「見たままモード」を利用されている方の場合、『大見出しにはh3』、『中見出しにはh4』、『小見出しにはh5』というタグが利用されています。

当記事で紹介するCSSコードは全てh3を指定していますが、h3をh4に変更していただければ中見出しのデザインを、h3をh4に変更していただければ小見出しのデザインをカスタマイズすることができるようになります。

CSSコードを追記した際にご利用中のテーマで適応されている見出しの設定と干渉してしまい、一部表示が崩れてしまうこともあります。その際には、

.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: none;
}

上記のCSSを本記事のカスタマイズコードの上に追記してください。これで、テーマが利用しているデザインをリセットすることができるようになっています。

デザインは悪くないんだけど色がちょっと…って方は、コード内の color、background-color、border-colorの後ろの、#333のような英数字部分を変更することで調整が可能です。（#記号は必要です。付け忘れにご注意ください）

color.adobe.com

このようなサービスもたくさん提供されているので参考にすると捗ると思います。「カラーパレット サービス」などで検索してみてください。

ではでは、見出しデザインスタートです。

見出しデザイン一気にどうぞ

見出しカスタマイズ1

.entry-content h3 {
padding: 10px;
color: #333;
border-bottom: 1px solid;
border-color: #999;
}

 

見出しカスタマイズ2

.entry-content h3 {
padding: 10px;
color: #333;
border-bottom: 3px double;
border-color: #999;
}

 

見出しカスタマイズ3

.entry-content h3 {
padding: 12px;
color: #333;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #999;
}

 

見出しカスタマイズ4

.entry-content h3 {
padding: 12px;
color: #333;
border-top: 3px double;
border-bottom: 3px double;
border-color: #999;
}

 

見出しカスタマイズ5

.entry-content h3 {
padding: 12px;
color: #333;
border-left: 4px solid;
border-color: #333;
}

 

見出しカスタマイズ6

.entry-content h3 {
padding: 12px;
color: #333;
border-bottom: 1px solid;
border-left: 4px solid;
border-color: #333;
}

 

見出しカスタマイズ7

.entry-content h3 {
padding: 12px;
color: #333;
border: 1px solid;
border-color: #999;
}

 

見出しカスタマイズ8

.entry-content h3 {
padding: 12px;
color: #333;
border: 3px double;
border-color: #999;
}

 

見出しカスタマイズ9

.entry-content h3 {
padding: 12px;
color: #333;
border: 1px solid;
border-color: #999;
background-color: #dfdfdf;
}

 

見出しカスタマイズ10

.entry-content h3 {
padding: 12px;
color: #333;
border: 3px double;
border-color: #999;
background-color: #dfdfdf;
}

 

見出しカスタマイズ11

.entry-content h3 {
padding: 12px;
color: #333;
border-top: 1px solid;
border-bottom: 1px solid;
border-color: #999;
background-color: #dfdfdf;
}

 

見出しカスタマイズ12

.entry-content h3 {
padding: 12px;
color: #333;
border-top: 3px double;
border-bottom: 3px double;
border-color: #999;
background-color: #dfdfdf;
}

 

見出しカスタマイズ13

.entry-content h3 {
padding: 12px;
color: #333;
border-left: 4px solid;
border-color: #333;
background-color: #dfdfdf;
}

 

見出しカスタマイズ14

.entry-content h3 {
padding: 12px;
color: #333;
border-left: 4px solid;
border-bottom: 1px solid;
border-color: #333;
background-color: #dfdfdf;
}

 

見出しカスタマイズ15

.entry-content h3 {
padding: 12px;
color: #333;
background: #ffffff;
background: linear-gradient(to bottom,  #ffffff 0%,#d6d6d6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6',GradientType=0 );
border: 1px solid;
border-color: #d6d6d6;
}

 

見出しカスタマイズ16

.entry-content h3 {
padding: 12px;
color: #333;
background: #d6d6d6;
background: linear-gradient(to bottom,  #d6d6d6 0%,#f4f4f4 51%,#e8e8e8 52%,#ffffff 99%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d6d6d6', endColorstr='#ffffff',GradientType=0 );
border: 1px solid;
border-color: #d6d6d6;
}

 

見出しカスタマイズ17

.entry-content h3 {
position: relative;
padding: 12px;
color: #333;
border-bottom: 4px solid;
border-color: #999;
}
.entry-content h3::after {
position: absolute;
left: 0;
bottom: -4px;
z-index: 5;
content: '';
width: 20%;
height: 4px;
background-color: #333;
}

 

見出しカスタマイズ18

.entry-content h3 {
position: relative;
padding: 12px;
color: #333;
border-left: 4px solid;
border-color: #333;
}
.entry-content h3::before {
position: absolute;
top: 0;
left: -4px;
bottom: 0;
content: '';
width: 4px;
height: 50%;
background-color: #999;
}
.entry-content h3::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px solid;
border-color: #999;
}

 

見出しカスタマイズ19

.entry-content h3 {
position: relative;
padding: 12px 12px 6px;
color: #333;
}
.entry-content h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 10px;
background-color: #999;
}

 

見出しカスタマイズ20

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

 

見出しカスタマイズ21

.entry-content h3 {
position: relative;
padding: 12px;
color: #333;
border: 1px solid #999;
}
.entry-content h3::before,
.entry-content h3::after {
content: '';
position: absolute;
top: 100%;
left: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
}
.entry-content h3::before {
border-top: 15px solid #999;
}
.entry-content h3::after {
margin-top: -2px;
border-top: 15px solid #fff;
}

 

見出しカスタマイズ22

.entry-content h3 {
position: relative;
padding: 12px;
color: #333;
background-color: #dfdfdf;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
content: '';
top: 100%;
border-style: solid;
border-color: transparent;
}
.entry-content h3::before {
left: 0;
border-width: 0 18px 18px 0;
border-right-color: #999;
}
.entry-content h3::after {
right: 0;
border-width: 18px 18px 0 0;
border-top-color: #999;
}

 

見出しカスタマイズ23

.entry-content h3 {
position: relative;
padding: 12px;
color: #333;
background-color: #dfdfdf;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
content: '';
border-style: solid;
border-color: transparent;
}
.entry-content h3::before {
top: 100%;
left: 0;
border-width: 0 18px 18px 0;
border-right-color: #999;
}
.entry-content h3::after {
top: -18px;
right: 0;
border-width: 0 18px 18px 0;
border-bottom-color: #999;
}

 

見出しカスタマイズ24

.entry-content h3 {
position: relative;
padding: 12px 12px 12px 28px;
color: #333;
border-bottom: 1px solid;
border-color: #999;
}
.entry-content h3::after {
content: '';
position: absolute;
top: 20px;
left: 8px;
z-index: 5;
width: 10px;
height: 10px;
background-color: #999;
transform: rotate(45deg);
}

 

見出しカスタマイズ25

.entry-content h3 {
position: relative;
padding: 12px 12px 12px 28px;
color: #333;
border-bottom: 1px solid;
border-color: #999;
}
.entry-content h3::before,
.entry-content h3::after {
position: absolute;
content: '';
background-color: #999;
}
.entry-content h3::before {
top: 4px;
left: 10px;
width: 10px;
height: 10px;
transform: rotate(55deg);
}
.entry-content h3::after {
top: 20px;
left: 6px;
width: 7px;
height: 7px;
transform: rotate(30deg);
}

さいごに

勢いで書き始めてみましたが結構大変なんですね、デザインを量産する作業というものは。もうしばらくCSSは見たくないです。心残りはCSSのコードがハイライトされていないこと。ちょっと読みにくいですね、これは余力ができたら修正しないと。

あと、はてなブログの見たまま編集モードはコードが書きにくい。どうしてマークダウンだとstyleが適用されないのでしょうか。やり方をご存知の方がいましたら教えてください。

ではでは、最後までお付き合いいただきありがとうございました。