【全26種類+α】SWELL見出しのデザイン設定を初心者向けに解説【おしゃれ度UP！】

「見出しをおしゃれにデザインしたい…」

「見出しの色を変更するには？」

「見出しに画像を挿入できる？」

この記事ではそんな方に向けて、SWELLで見出しのデザインを設定する方法を解説します。

この記事を読めば、あなたも簡単に

• 自分好みのおしゃれな見出しを作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事をおしゃれなデザインに様変わりさせることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

＼SWELL購入を検討中の人はこちらもご覧ください！／

SWELL見出しのデザインと設定方法【全26種類】

SWELLではH2～H4見出しのデザインを設定でき、自分好みのデザインを自由に選ぶことができます。

H○見出しとは…見出しの階層を表したもの。H1～H6まであり、数字が小さいほど階層の高い見出しになる。

以下の画像は当ブログで使用しているH2～H4見出しのデザインです。

設定方法は公式サイトでも紹介されていますが、本記事でも詳しく解説します。

公式サイト：見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法

実際にH2～H4見出しとセクション用H2見出しのデザインを見ていきましょう。

H2見出しのデザイン一覧

SWELLのH2見出しのデザインは12種類あります。

H3見出しのデザイン一覧

SWELLのH3見出しのデザインは8種類あります。

H4見出しのデザイン一覧

SWELLのH4見出しのデザインは3種類あります。

セクション用H2見出しのデザイン一覧

セクション用見出しとは…通常の見出しとは別のシンプルなデザインの見出しのこと

SWELLのセクション用H2見出しのデザインは3種類あります。

H2以外のセクション用見出しでは、デザインが「装飾なし」に統一されます。

SWELL見出しのデザインやテキスト・背景の色を変更する方法

SWELLの見出しは、デザインカラーやテキスト・背景の色を変更できます。

見出しの「デザイン」と「テキスト・背景」では色を変更する場所が異なります。

見出しの色を変更する方法をそれぞれ詳しく解説します。

デザインカラーを変更する

SWELLで見出しのデザインカラーはカスタマイザーで変更できます。

WordPress管理画面で、外観⇒カスタマイズ⇒投稿・固定ページ⇒コンテンツのデザイン⇒「(セクション用)見出しのキーカラー」で変更します。

色を変更する際は【方法①】直感的に選ぶ【方法②】カラーコードを入力するのどちらかで設定しましょう。※【方法②】がおすすめ

使いたい色を直感的に選べない場合は、Google Chromeの拡張機能「ColorPick Eyedropper」というカラーピッカーを用いてカラーコードを調べましょう。

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

_{＼クリックで開閉／}

テキストと背景の色を変更する

SWELLで見出しのテキストと背景の色は記事編集ページの右サイドバーで変更できます。

見出しを選択し、設定⇒ブロック⇒ タブ⇒「テキスト」「背景」から色を変更する

使いたい色を直感的に選んだり、カラーコードを入力して色を指定することもできます。

カラーコードを調べる方法はこちら 

SWELL見出しのデザインを独自におしゃれアレンジ4選！

SWELLでは、CSSを記述せずに見出しのデザインをおしゃれにアレンジすることもできます。

本記事では以下4つの方法で、見出しを独自のデザインにしていきます。

それぞれ詳しく解説します。

見出しのデザインを「装飾なし」にしてからの利用を推奨します。

グループ化の装飾を使う

SWELLのグループ化で使用できる装飾は、ボーダー4種類とスタイル16種類あります。

見出しをグループ化することで、これらの装飾にデザインすることができます。

ボーダーとスタイルは組み合わせることができるので、使用できるデザイン装飾は全84種類！(=ボーダー4種類+スタイル16種類+ボーダー4種類×スタイル16種類)

画像を挿入する

SWELLでは見出しに画像を挿入することができます。

WordPressで利用できないフォントやデザイン装飾を見出しにできるので、よりオシャレに仕上がりますよ。

_{＼クリックで開閉／}

アイコンを配置する

SWELLには無料で使用できるアイコンが1000種類以上あります。

見出しに入力するテキストの頭にアイコンを配置すれば、ユーザーの目を引くデザインに作成できますよ。

_{＼クリックで開閉／}

マーカーを引く

SWELLでは4パターンのマーカーを使用でき、見出しに引くと以下のようにデザインできます。

文章の長さに応じてマーカー装飾の長さも変化していくよ。

_{＼クリックで開閉／}

SWELL見出しのデザインまとめ

今回は、SWELLで見出しのデザインを設定する方法を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。