読者です 読者をやめる 読者になる 読者になる

Create Liberty

by inja369

コピペで簡単にできる!はてなブログの見出しカスタマイズ9種

ブログ

f:id:inja369:20161023214824j:plain
HTMLとCSSの勉強がてら、見出しをオシャレにカスタマイズできるCSSコードを書いてみた。シンプルなものから少し凝ったものまで9種類用意したので、もし気に入ったものがあったら使ってみてほしい。
※デザインテーマによってはうまくいかない場合がありますのでご了承ください。

見出しの編集の仕方

コードは デザイン → カスタマイズ → デザインCSS の場所にコピーして貼りつける。
f:id:inja369:20161023220715j:plain
f:id:inja369:20161023220728j:plain
f:id:inja369:20161023220737j:plain

編集する見出しを選ぶ

はてなブログでは、見出しタグは次のような設定になっている。
大見出し = h3
中見出し = h4
小見出し = h5

コード内のこれらのタグを変えれば、適用する見出しを自由に変えられる。

色を自由に変える

背景や文字の色を変えたい場合は、以下の下線の場所を変更する。
背景色 = background-color: #FFFFFF;
文字色 = font-color: #FFFFFF;

こちらのサイトでは自由に色を選び、コードを教えてくれるので楽にコピペできる。

www.color-sample.com

また、こちらでは配色も選べる。

color.adobe.com

「Result」を押すとサンプルを見ることができる。

見出し1

左にボーダーの入ったタイプ。シンプルで基本的なもの。

See the Pen vXbALZ by inja369 (@inja369) on CodePen.

見出し2

左と下にボーダーが入ったタイプ。こちらもシンプルで基本的なもの。

See the Pen amXGxO by inja369 (@inja369) on CodePen.

見出し3

上下にラインが通ったもの。

See the Pen JRxkRb by inja369 (@inja369) on CodePen.

見出し4

角を丸めたライン状の見出し。

See the Pen jrdKVR by inja369 (@inja369) on CodePen.

見出し5

吹き出しの形。

See the Pen qagKAA by inja369 (@inja369) on CodePen.

見出し6

リボンの形。

See the Pen YGBvxY by inja369 (@inja369) on CodePen.

見出し7

左にキューブのある、オシャレな見出し。よく見かける。

See the Pen dpaKdk by inja369 (@inja369) on CodePen.

見出し8

マンガの吹き出しのような形。

See the Pen ORdEva by inja369 (@inja369) on CodePen.

見出し9

チェックマークのついた見出し。

See the Pen BLrVEZ by inja369 (@inja369) on CodePen.

まとめ

まだ初心者なので、正直見よう見マネで作っている部分も多いです。もし不具合がありましたら教えていただけると嬉しいです。