![](https://blog.rabbitseries.com/wp-content/uploads/2023/11/疑問-150x150.webp)
SWELLの見出しってどうやって変えるのかがわかりません!
どこから設定できるのかが教えて欲しいです
という内容で疑問にお答えしていきます。
- 見出しのカスタマイズ方法がわからない方
- 見出しがどういうふうにしたいのかがよくわからない方
SWELLの見出し設定変更方法
SWELLはCSSによるプログラミングコードを不要で見出しをデザインをすることができます。
SWELLの機能には見出しを簡単に装飾を変更できる機能があります
WordPress管理画面から、外観の項目を押して、カスタマイズを選択します。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/11/bandicam-2023-11-25-14-55-30-496-1.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/11/bandicam-2023-11-25-14-55-30-496-1.jpg)
カスタマイズ設定から「投稿・固定ページ」の項目を開き、その後はコンテンツデザインを開きます。
コンテンツのデザインにたどり着いたら、見出しのデザインを変更することができます。
そのうち、見出し2、見出し3、見出し4を変更できます。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/11/bandicam-2023-11-25-14-55-54-445.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/11/bandicam-2023-11-25-14-55-54-445.jpg)
SWELLの見出し種類
![](https://blog.rabbitseries.com/wp-content/uploads/2023/06/見出しの種類.webp)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/06/見出しの種類.webp)
SWELLの見出しには様々な種類が用意されています。
そのため通常、CSSによる見出しの装飾は不要です。
![](https://blog.rabbitseries.com/wp-content/uploads/2024/01/ゴールドコイン2-普通-150x150.webp)
![](https://blog.rabbitseries.com/wp-content/uploads/2024/01/ゴールドコイン2-普通-150x150.webp)
![](https://blog.rabbitseries.com/wp-content/uploads/2024/01/ゴールドコイン2-普通-150x150.webp)
逆にCSSで改変を行うと不具合起こす可能性があるので未推奨。
通常用とセクション用がある
SWELLには通常に使うデフォルトと、おしゃれなデザインを前提にしたセクション用があります。
見出しのデザインは基本的に重要じゃないのでデフォルトでも十分と言えるでしょう。
H2タグ
SWELLが標準搭載している見出しは全部で11個用意しています。
H2は一番よく使われることから種類も豊富でデザインも目立つようなものも多くあります。
帯
初期状態のH2です。
見やすくて少しオシャレ感を入れている状況が伺えます。
![SWELLH2タグ帯](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-50-971.jpg)
![SWELLH2タグ帯](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-50-971.jpg)
塗りつぶし
こちらは完全にシンプルに塗りつぶされたVerです。
完全に塗りつぶししているので思い切って濃いいろおすすめです。
![SWELLH2タグ:塗りつぶし](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-55-981.jpg)
![SWELLH2タグ:塗りつぶし](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-55-981.jpg)
左に縦線
付箋のようなタイプの見出しです。
![SWELLH2タグ:左に縦線](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-59-313.jpg)
![SWELLH2タグ:左に縦線](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-34-59-313.jpg)
左に2色のブロック
上記の付箋のようなタイプを2色化Verの見出しです。
![SWELLH2タグ:左に2色のブロック](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-03-607.jpg)
![SWELLH2タグ:左に2色のブロック](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-03-607.jpg)
付箋風
縦線とは別で、こちらが本物の付箋ですが、違いがよくわかりません。
![SWELLH2タグ:付箋風](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-08-309.jpg)
![SWELLH2タグ:付箋風](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-08-309.jpg)
付箋風ストライプ
下地がストライプになったVerです。
しかし、ストライプの色があまり区別できないので正直どちらでも同じな気がします。
![SWELLH2タグ;付箋風ストライプ](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-11-359.jpg)
![SWELLH2タグ;付箋風ストライプ](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-11-359.jpg)
ステッチ
家庭科学習で服を縫う際にでてくる線のあれです。
色的にはデフォルトを使っているのでイメージつきにくいですが
可愛い色のブログと相性がよいです。
![SWELLH2タグ:ステッチ](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-16-210.jpg)
![SWELLH2タグ:ステッチ](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-16-210.jpg)
ふきだし風
女性やビジネス形によく使われているタイプです。
女性系はピンク色で、ビジネス系はスーツ色のようなものが多いです。
なお、当ブログの別サイト「マイクラはクリエィティブだ」ではこのタイプを採用しています。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-22-812.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-22-812.jpg)
上下に線
当ブログでも使われているこのタイプ。
SFやデジタルだと相性が良くて気に入っています。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-26-228.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-26-228.jpg)
1文字目にアクセント
たまに個性的なブログで使われていることがあるこのタイプ。
1文字目だけ大きく目立つようにカラーリングと大きさが変わっています。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-29-985.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-29-985.jpg)
装飾なし
最後は装飾なし。
特にこれと行っていいものはありません。
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-36-772.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-27-15-35-36-772.jpg)
H3タグ
次なる見出しH3ではH2ほど目立ちはなく比較的シンプルなものを8種類用意されています。
それでも使用頻度は高いのである程度はたくさんあるのでしょう
2色の下線(メイン・グレー)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-17-27-005.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-17-27-005.jpg)
2色の下線(メイン・薄メイン)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-17-27-005-1.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-17-27-005-1.jpg)
下線(メインカラー)
下線のメインカラーの見出しです
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-20-42-167.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-20-42-167.jpg)
下線(グラデーション)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-21-38-189.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-21-38-189.jpg)
下線(ストライプ)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-31-49-105.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-31-49-105.jpg)
左に縦線
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-32-11-802.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-32-11-802.jpg)
左に2色のブロック
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-32-43-677.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-32-43-677.jpg)
装飾なし
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-33-24-794.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-28-06-33-24-794.jpg)
H4タグ
最後はH4です。
H2やH3に比べて使用頻度が少なく、種類も3種類程度しかありません。
なお、それ以下のH5やH6には装飾はなく、実際にもほとんど使われることもないことから今後も実装されないと思われます。
左に縦線
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-55-996.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-55-996.jpg)
チェックアイコン
当ブログでも使用しているVer。
付箋など使っていたり、細かい論点がたくさんあるならこの項目はおすすめです
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-10-115.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-10-115.jpg)
装飾なし
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-22-931.jpg)
![](https://blog.rabbitseries.com/wp-content/uploads/2023/05/bandicam-2023-05-29-06-09-22-931.jpg)
まとめ
![](https://rabbitseries.com/wp-content/uploads/2023/06/まとめ-1.webp)
![](https://rabbitseries.com/wp-content/uploads/2023/06/まとめ-1.webp)
SWELLには見出しを簡単にカスタマイズ変更できる機能がありました。
- SWELLには見出しをカスタマイズできる機能がある
- ただし、見出しの変更できるのはH2、H3、H4のみである
- 見出しの種類はH2が一番多く、H4は少なめ。
デザインをこだわりたい上級者には少し物足りない気がしますが
そうでもない人はコードを書く自体が面倒なので見出しのカスタマイズ機能は本当に便利なものです。
まだ契約をしてない方はSWELLを割引購入できる
エックスサーバーがおすすめ!
お友達プレゼントで最大¥10,000割引実施!
6ヶ月
¥3,000割引
24ヶ月
¥7,500割引
12ヶ月
¥5,000割引
36ヶ月
¥10,000割引
\キャンペーン、10日間無料お試し併用可能/
サイトのリンク先https://www.xserver.ne.jp
すでにサーバーを契約をしている方は
WordPressテーマ「SWELL」
サイトのリンク先
コメント