【CSS】コピペで簡単！おしゃれな見出しのデザイン例

CSS勉強中のパイセンです。

早速学んだことをアウトプットしていきたいので、いくつか見出しを作りました。随時更新していく予定です。

この記事内で紹介した見出しのコードはご自由にお使いください。改変等ももちろんOKです。

 1.導入方法

PC表示の場合

デザイン→カスタマイズ（スパナのマーク）→カスタムCSSにコピペ

スマホ表示の場合

デザイン→スマートフォン（スマホのマーク）→ヘッダ→タイトル下→<style> </style>で挟んでコピペ

2.見出しの色の変え方

#で始まる6文字の英数字（例：#FE9A2E）は色を示し、カラーコードと呼ばれます。

このカラーコードを書き換えると様々な色に変更ができます。

カラーコード表を参照し、自分の好きな色にカスタマイズしてみましょう。

html-color-codes.info

3.見出し一覧

シンプル系１

見出しの例

本ブログのh3（はてなで言う大見出し）で使用している見出しです。

コード

.entry-content h3{
	border-bottom:solid 2px #FE9A2E;/*下の線の色*/
	border-left:solid 10px #FE9A2E;/*左の線の色*/
	background:#F8ECE0;/*背景の色*/
	padding: 10px;
}

シンプル系２

見出しの例

真ん中にドーンと表示されます。

コード

.entry-content h3{
	background:#F6E3CE;/*背景の色*/
	border-radius:10px;
	border:solid 10px #FE9A2E;/*左右の線の色*/
	border-bottom:solid 4px #FE9A2E; /*下の線の色*/
	border-top:solid 4px #FE9A2E; /*上の線の色*/
	padding: 10px 10px;
	text-align: center;
}