SWELLは人気のWordPressテーマなので、他の人とデザインが被ってしまうというお悩みもあるかもしれません。
そんな時には、SWELLの見出しのデザインの組み合わせを変えてみることです。
SWELLの見出しのデザインは、「H2」が11種類、「H3」が7種類、「H4」が2種類と豊富な種類が揃っています。
さらに、見出しの色もメインカラーと違う色に変えることができます。
この機能を生かしてオリジナルの組み合わせを考えれば、ブログの見た目も他の人とは違う印象になるでしょう。
そこでこの記事では、SWELLの見出しのデザインを変更する方法と、見出しのデザインを紹介していきます。
見出しのデザインの変更方法
WordPressの管理画面から、「外観」⇒「カスタマイズ」と進みます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/ea430ec34f72bb2f2b3f629eea55c460.png)
「投稿・固定ページ」⇒「コンテンツのデザイン」と進みます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/46a88a54c1a74881452124f1f1dc8ad8.png)
「■見出しのデザイン設定」で、リアルタイムで仕上がりを確認しながらカスタマイズができます。
キーカラーは、サイトのメインカラーと異なる色を選択することも可能です。各見出しのデザインの変更ができます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/304deca38683dcdff42bd7e8f15d7f62.png)
各見出しのデザインの変更ができます。
デザインは次のトピックで紹介します。
見出し2(H2)のデザイン
見出しの種類<11種類+装飾なし>
見出し2(H2)のデザインには、以下の11種類と装飾なしがあります。
【帯】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/aeae5afe3b5b7a0a688fed358ad90d25-800x86.png)
【塗りつぶし】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/11570f494caecb92cc1b2c65e9e5c22d-800x64.png)
【左に縦線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/78dc8d3aaebc62e81ec44f784030c7f2-800x62.png)
【左に2色のブロック】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/b9093e69f90b07a460fe526eb3084c96.png)
【付箋風】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/9e319ca40c80972acc8b0a98113da5ae-800x64.png)
【付箋風(ストライプ)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/233421090a75cc5b96b61f535588cdd7-800x64.png)
【ステッチ】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/46a3679c72e9c02e6323a67726bb1132-800x76.png)
【ステッチ(薄)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/fabc333a1ddb1d8709806034b2bded3d-800x75.png)
【ふきだし風】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/63b69793e1a4d76f978ee31383c5e540-800x79.png)
【上下に線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/bc9e90350628a688f9a411317f4292a7-800x85.png)
【一文字目にアクセント】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/1d52a07b859cc6bb3f2780380ab3aeb6.png)
【装飾なし】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/6b9ffe7b751d427d5f1767fbd1992483.png)
見出し3(H3)のデザイン
見出しの種類<7種類+装飾なし>
見出し3(H3)のデザインには、以下の7種類と装飾なしがあります。
【2色の下線(メイン・グレー)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/87c7730124dd3e6256e3aceefe892b53-800x52.png)
【2色の下線(メイン・薄メイン)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/9478d7250d0c26f38f364455c61549da-800x52.png)
【下線(メインカラー)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/94531f9c399f8e791b0733a899907d21-800x51.png)
【下線(グラデーション)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/39f95a9bb4e8180d9ea432aaf0273c8d-800x53.png)
【下線(ストライプ)】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/0fa93a6f3e162e74afc0879600754a75-800x52.png)
【左に縦線 】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/726aa292f5ee9fcf14e15c8b1fc757c8-800x52.png)
【左に2色のブロック】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/a50ee1f92836857aecfec63b605552d4-800x52.png)
【装飾なし】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/9c812ab7766cbe355b797db5134f88ea.png)
見出し4(H4)のデザイン
見出しの種類<2種類+装飾なし>
見出し2(H2)のデザインには、以下の2種類と装飾なしがあります。
【左に縦線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/ed72e8f4db049cd54457b5dd1d5957fb.png)
【チェックアイコン】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/cb0e8fcf9099064bc1aa865e1081b1c0.png)
【装飾なし】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/020231df7e79f47a4ac0f1de728e147a.png)
H4が地味だと思ったら
H4が少し地味だと思う時は、ブロックメニューから「スタイル」の「付箋」を選びます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/b525bf2c2c458f2e847b70395b142b0a.png)
さらに文字を太字にすれば、以下のようになります。
H4見出し
記事下エリアのH2見出しのデザインを変更する方法
H2見出しのデザインの変更方法
記事下エリアのH2見出し(赤線で示したところ)のデザインを変更することもできます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/1264d461f7994e234074d9ad42a852f0-800x490.png)
WordPressの管理画面から、「外観」⇒「カスタマイズ」⇒「サイト全体設定」と進みます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/a8b1a143c48062995fda4ea96c181339.png)
「サイト全体設定」⇒「タイトルデザイン」へと進みます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/35d44448c9a141435afcba972354c94c.png)
「サブコンテンツのタイトルデザイン」からデザインの変更が出来ます。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/b77d8d1b99f4bc13c8dc9213152acf13.png)
デザインの種類<3種類>
デザインは以下の3種類です。
【左に縦線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/f751f0c62e4d8e626b9fa53ca60d8200-800x79.png)
【左右に横線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/9feee3289b6033387330ff451cbd77fc-800x78.png)
【下線】
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/c328df1d29893786cb8d89e5af5df748-800x82.png)
まとめ
この記事では、SWELLの見出しのデザインを変更する方法と、見出しのデザインを紹介していきました。
SWELLの見出しは種類が豊富で、メインカラーと異なる色にも変えられるので、多種多様な組み合わせが楽しめます。
SWELLの機能を活用し、自分オリジナルのブログに仕上げていきましょう。
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/aa3cca6267210d19b234a01de5be5573.jpg)
![](https://komyushou-no-hanamichi.com/wp-content/uploads/2023/04/SWELL10.jpg)