![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
今回は見出しの装飾をお伝えします。
見出しは「h1」「h2」「h3」などと表記される事もあり、大見出し、中見出し、小見出しと理解してもらうとわかりやすいと思います^^
目次
見だしの装飾
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/b-150x150.jpg)
見出しレベルは使って「h4」ぐらいまで。
あまり「h5」は使わないです。
見出しの装飾の変え方
![](https://shares-hp.com/wp-content/uploads/2022/10/1-14-1024x957.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-14-1024x957.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/2-14-1024x687.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/2-14-1024x687.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/3-10-1024x510.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/3-10-1024x510.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/4-8-1024x845.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/4-8-1024x845.jpg)
見出しのデザイン設定
見出しのキーカラー
![](https://shares-hp.com/wp-content/uploads/2022/10/5-8-1-1024x772.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/5-8-1-1024x772.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/6-8-1024x386.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/6-8-1024x386.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/8-7-1024x380.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/8-7-1024x380.jpg)
見出し2のデザイン
![](https://shares-hp.com/wp-content/uploads/2022/10/11-4-1-1024x493.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/11-4-1-1024x493.jpg)
帯
![](https://shares-hp.com/wp-content/uploads/2022/10/13-2-1024x250.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/13-2-1024x250.jpg)
塗り潰し
![](https://shares-hp.com/wp-content/uploads/2022/10/15-1-1024x240.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/15-1-1024x240.jpg)
左に縦線
![](https://shares-hp.com/wp-content/uploads/2022/10/16-1-1024x243.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/16-1-1024x243.jpg)
左に2色のブロック
![](https://shares-hp.com/wp-content/uploads/2022/10/17-1024x235.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/17-1024x235.jpg)
付箋風
![](https://shares-hp.com/wp-content/uploads/2022/10/18-1024x242.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/18-1024x242.jpg)
付箋風(ストライプ)
![](https://shares-hp.com/wp-content/uploads/2022/10/19-1024x241.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/19-1024x241.jpg)
ステッチ
![](https://shares-hp.com/wp-content/uploads/2022/10/20-1-1024x244.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/20-1-1024x244.jpg)
ステッチ(薄)
![](https://shares-hp.com/wp-content/uploads/2022/10/21-3-1024x241.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/21-3-1024x241.jpg)
ふきだし風
![](https://shares-hp.com/wp-content/uploads/2022/10/31-1024x243.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/31-1024x243.jpg)
上下に線
![](https://shares-hp.com/wp-content/uploads/2022/10/32-1-1024x246.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/32-1-1024x246.jpg)
1文字目にアクセント
![](https://shares-hp.com/wp-content/uploads/2022/10/33-1-1024x248.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/33-1-1024x248.jpg)
装飾なし
![](https://shares-hp.com/wp-content/uploads/2022/10/34-1-1024x245.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/34-1-1024x245.jpg)
見出し3のデザイン
![](https://shares-hp.com/wp-content/uploads/2022/10/40-1-1024x584.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/40-1-1024x584.jpg)
2色の下線(メイン・グレー)
![](https://shares-hp.com/wp-content/uploads/2022/10/56-1024x153.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/56-1024x153.jpg)
2色の下線(メイン・薄メイン)
![](https://shares-hp.com/wp-content/uploads/2022/10/41-1024x172.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/41-1024x172.jpg)
下線(メインカラー)
![](https://shares-hp.com/wp-content/uploads/2022/10/42-1024x169.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/42-1024x169.jpg)
下線(グラデーション)
![](https://shares-hp.com/wp-content/uploads/2022/10/43-1024x174.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/43-1024x174.jpg)
下線(ストライプ)
![](https://shares-hp.com/wp-content/uploads/2022/10/44-1024x173.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/44-1024x173.jpg)
左に縦線
![](https://shares-hp.com/wp-content/uploads/2022/10/45-1024x168.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/45-1024x168.jpg)
左に2色のブロック
![](https://shares-hp.com/wp-content/uploads/2022/10/46-1024x175.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/46-1024x175.jpg)
装飾なし
![](https://shares-hp.com/wp-content/uploads/2022/10/47-1024x174.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/47-1024x174.jpg)
見出し4のデザイン
![](https://shares-hp.com/wp-content/uploads/2022/10/51-1-1024x416.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/51-1-1024x416.jpg)
左に装飾
![](https://shares-hp.com/wp-content/uploads/2022/10/55-1024x146.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/55-1024x146.jpg)
チェックアイコン
![](https://shares-hp.com/wp-content/uploads/2022/10/52-1024x160.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/52-1024x160.jpg)
装飾なし
![](https://shares-hp.com/wp-content/uploads/2022/10/53-1024x171.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/53-1024x171.jpg)
セクション見出しのデザイン設定
セクション見出しは「見出しを真ん中に持って行きたい時によく使います。」
![](https://shares-hp.com/wp-content/uploads/2022/10/3-11.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/3-11.jpg)
セクション見出しの設定方法
![](https://shares-hp.com/wp-content/uploads/2022/10/1-16-1024x498.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/1-16-1024x498.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/2-15-1024x426.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/2-15-1024x426.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/5-9.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/5-9.jpg)
装飾なし
![](https://shares-hp.com/wp-content/uploads/2022/10/0-2-1024x258.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/0-2-1024x258.jpg)
下に線
![](https://shares-hp.com/wp-content/uploads/2022/10/6-9.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/6-9.jpg)
左右に線
![](https://shares-hp.com/wp-content/uploads/2022/10/7-7-1024x308.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/10/7-7-1024x308.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
![](https://shares-hp.com/wp-content/uploads/2022/09/DSCF08611-scaled-1-150x150.jpg)
ちょっとボリュームが多かったですが、見出しは頻繁に使い、デザインも重要なので、サイトのイメージに合わせたカラーや装飾にしたいですね。