はてぶカスタマイズ★ちょっとおしゃれな見出しを設定する

はてなブログの見出しをカスタマイズするデザインアイデアです。

ご利用中のテーマやブザウザによっては、正しく設定しても表示が崩れてしまうかもしれませんのでご了承ください。色替えなどカスタマイズは各自でよろしくお願いいたします。

デザインcssの設定

管理画面以下の場所にお好きな見出しのソースを貼り付けてください。

デザイン → カスタマイズ → デザインCSS

ちなみにはてぶでの見出しは以下の通りです。
変更したい見出しの種類に合わせて「.entry-content hX」の「X」部分を変えてご使用ください。

• .entry-content h3：はてなブログで言う大見出し
• .entry-content h4：はてなブログで言う中見出し
• .entry-content h5：はてなブログで言う小見出し

1.重なり

重なり具合をずらしてみたよ。

「#ef9e9f」が濃い方、「#fccccc」が薄い方の色です。

.entry-content h3 {
	position: relative;
	padding: 10px;
	z-index: 0;
	background: none;
	border: 2px solid #ef9e9f;
}
.entry-content h3::after {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	opacity: 0.5;
	background: #fccccc;
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
}

2.吹き出し

丸っこいステッチ入りの吹き出し。

「#ef9e9f」が背景の色です。

.entry-content h3 {
	position: relative;
	padding: 10px;
	color: #fff;
	background: #ef9e9f;
	border-radius: 30px;
	border: 1px dashed #fff;
	box-shadow: 0 0 0 3px #ef9e9f;
}
.entry-content h3::after {
	content: '';
	position: absolute;
	height: 0;
	width: 0;
	top: 105%;
	left: 50%;
	border: 10px solid transparent;
	border-top: 12px solid #ef9e9f;
}

3.チェック柄

チェック柄も作れちゃいますよー。

「#ef9e9f」が濃い方、「#fccccc」が薄い方の色です。

.entry-content h3 {
	position: relative;
	padding: 10px;
	z-index: 1;
	color: #fff;
	text-shadow: 0 0 2px #ef9e9f, 0 0 4px #ef9e9f, 0 0 8px #ef9e9f;
	border-radius: 5px;
	border: solid 1px #ef9e9f;
}
.entry-content h3::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0.5;
	z-index: -1;
	background: -webkit-repeating-linear-gradient(45deg, #ef9e9f, #ef9e9f 8px, #fccccc 5px, #fccccc 16px);
	background: repeating-linear-gradient(45deg, #ef9e9f, #ef9e9f 8px, #fccccc 5px, #fccccc 16px);
}
.entry-content h3::after  {
	content: '';
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	background: -webkit-repeating-linear-gradient(135deg, #ef9e9f, #ef9e9f 10px, #fccccc 5px, #fccccc 16px);
	background: repeating-linear-gradient(135deg, #ef9e9f, #ef9e9f 8px, #fccccc 5px, #fccccc 16px);
}

4.手書きステッチ

ざっくり手書き風ステッチ。

「#ef9e9f」が枠線の色です。

.entry-content h3 {
	padding: 10px;
	background: #fff;
	border-radius: 320px 120px 360px 100px / 50px 220px 80px 220px;
	border: 2px dashed #ef9e9f;
}

5.ストライプ

しましまキャンディーみたいなストライプ×下線。

「#ef9e9f」が濃い方、「#fccccc」が薄い方の色です。

.entry-content h3 {
	position: relative;
	padding: 10px 10px 20px;
	border: none;
}
.entry-content h3::after  {
	content: '';
	position: absolute;
	height: 15px;
	width: 100%;
	bottom: 0;
	left: 0;
	border-radius: 10px;
	background: -webkit-repeating-linear-gradient(45deg, #ef9e9f, #ef9e9f 8px, #fccccc 5px, #fccccc 16px);
	background: repeating-linear-gradient(45deg, #ef9e9f, #ef9e9f 8px, #fccccc 5px, #fccccc 16px);
}

その他Tips

もしどうしてもご使用中のテーマデザインとぶつかって綺麗に表示されない場合は、最初に以下のソースも記載してみると直るかもしれません。

.entry-content h3 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
.entry-content h3::before, 
.entry-content h3::after {
	content: none;
}

見出しからはてぶキーワードのリンク下線を消したい方は以下を記載してみてください。

.entry-content h3 a.keyword {
	border: 0;
}

おわりに

いかがでしたか！一般的な見出しアイデアは他所さまでも紹介されていると思うのでちょっと変わったデザインのご紹介でした。もし気になるデザインがありましたら使ってみてくださいなー。