PR
当ブログ愛用のWordPressテーマ
＼乗り換え先おすすめNo.1テーマ！／
／ブロガーとして本格的に取り組む＼
おすすめAIツール6選
- AIブログくん
【全26種類+α】SWELL見出しのデザイン設定を初心者向けに解説【おしゃれ度UP！】
「見出しをおしゃれにデザインしたい…」
「見出しの色を変更するには？」
「見出しに画像を挿入できる？」
この記事ではそんな方に向けて、SWELLで見出しのデザインを設定する方法を解説します。
かめコンパスこんにちは、かめコンパスです！
本記事の内容
この記事を読めば、あなたも簡単に
- 自分好みのおしゃれな見出しを作成できる
ようになります。
私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事をおしゃれなデザインに様変わりさせることができました。
どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！
また以下の記事では、SWELL導入後にやっておきたい設定を初心者向けに紹介しています。
＼SWELL購入を検討中の人はこちらもご覧ください！／
あわせて読みたい
【口コミ多数！】SWELLの評判レビュー｜メリット・デメリットや使ってみた感想まとめ
「SWELLを購入しようか迷っている…」 「SWELLのメリット・デメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事ではそんな方に向けて、SWELLの評判…
目次
SWELL見出しのデザインと設定方法【全26種類】
SWELLではH2～H4見出しのデザインを設定でき、自分好みのデザインを自由に選ぶことができます。
以下の画像は当ブログで使用しているH2～H4見出しのデザインです。
かめコンパスシンプルでおしゃれ！
設定方法は公式サイトでも紹介されていますが、本記事でも詳しく解説します。
公式サイト：見出しやマーカーなど、記事内コンテンツのデザイン切り替え方法
STEP
WordPress管理画面で、外観⇒カスタマイズの順にクリックする
STEP
投稿・固定ページをクリックする
STEP
コンテンツのデザインをクリックする
STEP
「見出し○のデザイン」で設定する ※〇は2～4
STEP
公開をクリックする
これで見出しのデザインを設定できます。
実際にH2～H4見出しとセクション用H2見出しのデザインを見ていきましょう。
H2見出しのデザイン一覧
SWELLのH2見出しのデザインは12種類あります。
- 帯
- 塗り潰し
- 左に縦線
- 左に2色のブロック
- 付箋風
- 付箋風(ストライプ)
- ステッチ
- ステッチ(薄)
- ふきだし風
- 上下に線
- 1文字目にアクセント
- 装飾なし
H3見出しのデザイン一覧
SWELLのH3見出しのデザインは8種類あります。
- 2色の下線(メイン・グレー)
- 2色の下線(メイン・薄メイン)
- 下線(メインカラー)
- 下線(グラデーション)
- 下線(ストライプ)
- 左に縦線
- 左に2色のブロック
- 装飾なし
H4見出しのデザイン一覧
SWELLのH4見出しのデザインは3種類あります。
- 左に縦線
- チェックアイコン
- 装飾なし
セクション用H2見出しのデザイン一覧
SWELLのセクション用H2見出しのデザインは3種類あります。
- 装飾なし
- 下に線
- 左右に線
SWELL見出しのデザインやテキスト・背景の色を変更する方法
SWELLの見出しは、デザインカラーやテキスト・背景の色を変更できます。
before
after / デザインカラーのみ変更
after / テキスト色のみ変更
after / 背景色のみ変更
見出しの「デザイン」と「テキスト・背景」では色を変更する場所が異なります。
見出しの色を変更する方法をそれぞれ詳しく解説します。
デザインカラーを変更する
SWELLで見出しのデザインカラーはカスタマイザーで変更できます。
色を変更する際は【方法①】直感的に選ぶ【方法②】カラーコードを入力するのどちらかで設定しましょう。※【方法②】がおすすめ
使いたい色を直感的に選べない場合は、Google Chromeの拡張機能「ColorPick Eyedropper」というカラーピッカーを用いてカラーコードを調べましょう。
＼クリックで開閉／
カラーピッカーでカラーコードを調べる方法はこちら
導入方法
- ChromeウェブストアからColorPick Eyedropperを導入するページを開き、chromeに追加をクリックする
使い方
- 使いたい色があるページで、拡張機能⇒ColorPick Eyedropperの順にクリックする
- 使いたい色をクリックすると、#から始まるカラーコードを調べられます。
カラーコードはコピぺして使ってください。
テキストと背景の色を変更する
SWELLで見出しのテキストと背景の色は記事編集ページの右サイドバーで変更できます。
使いたい色を直感的に選んだり、カラーコードを入力して色を指定することもできます。
SWELL見出しのデザインを独自におしゃれアレンジ4選！
SWELLでは、CSSを記述せずに見出しのデザインをおしゃれにアレンジすることもできます。
本記事では以下4つの方法で、見出しを独自のデザインにしていきます。
※上のリンクをクリックすると見たい場所へジャンプします。
それぞれ詳しく解説します。
見出しのデザインを「装飾なし」にしてからの利用を推奨します。
グループ化の装飾を使う
SWELLのグループ化で使用できる装飾は、ボーダー4種類とスタイル16種類あります。
見出しをグループ化することで、これらの装飾にデザインすることができます。
ボーダーとスタイルは組み合わせることができるので、使用できるデザイン装飾は全84種類！(=ボーダー4種類+スタイル16種類+ボーダー4種類×スタイル16種類)
かめコンパス私はボーダーと「方眼」の組み合わせをよく使うよ
＼クリックで開閉／
見出しをグループ化の装飾でデザインする方法はこちら
STEP
見出しを選択し、︙⇒グループ化の順にクリックする
STEP
グループ化ブロックを選択し、設定⇒ブロックの順にクリックして表示される装飾から選ぶ
これで見出しをグループ化の装飾でデザインできます。
画像を挿入する
SWELLでは見出しに画像を挿入することができます。
WordPressで利用できないフォントやデザイン装飾を見出しにできるので、よりオシャレに仕上がりますよ。
かめコンパスサイト型トップページで利用するのもアリだね
＼クリックで開閉／
見出しに画像を挿入する方法はこちら
STEP
見出しを選択し、ツールバーの項目⇒インライン画像の順にクリックして画像を挿入する
STEP
挿入されたインライン画像をクリックして幅を調整し、適応をクリックする
これで見出しに画像を挿入できます。
アイコンを配置する
SWELLには無料で使用できるアイコンが1000種類以上あります。
見出しに入力するテキストの頭にアイコンを配置すれば、ユーザーの目を引くデザインに作成できますよ。
＼クリックで開閉／
見出しにアイコンを挿入する方法はこちら
STEP
見出しの頭を選択し、ツールバーの項目をクリックする
STEP
使用したいアイコンをクリックする
これで見出しにアイコンを挿入できます。
マーカーを引く
SWELLでは4パターンのマーカーを使用でき、見出しに引くと以下のようにデザインできます。
文章の長さに応じてマーカー装飾の長さも変化していくよ。
＼クリックで開閉／
見出しにマーカーを引く方法はこちら
STEP
見出しに入力したテキストを全選択し、ツールバーの項目をクリックして装飾を選ぶ
これで見出しにマーカーを引けます。
ちなみに、マーカーは4つのスタイル+好きな色に変更できます。
SWELL見出しのデザインまとめ
今回は、SWELLで見出しのデザインを設定する方法を紹介しました。
本記事のおさらい
＼読み直したい箇所をクリック／
当ブログではSWELLに関する記事をいくつか書いてます。
下のカテゴリーページにまとめていますので、のぞいてみてください。
かめコンパスためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです！
・ ・ ・
＼当ブログ愛用の人気No.1*WordPressテーマはこちら！／
SWELLの関連記事まとめ
SWELL専用ブロックの使い方
SWELLサイト全体のカスタマイズ
この記事が気に入ったら
フォローしてね！
コメント