MENU
アーカイブ
ぐちこ
看護師歴30年以上の55歳
病棟勤務、在宅医療(診療所・訪問診療・訪問看護)などの経験をへて、4年前から老健に勤務中。
49歳からの約2年間に3回の転職を繰り返し、職場選びの重要性を実感。

【グチるあなたの毎日を笑顔に変えたい】

人生を楽しむ余裕を見つけられる、自分を大切にする働き方をしたい看護師さんを応援します。
あなたの『ぐち』を捨てて行きませんか?

【SWELL】見出しの設定方法|パターン組み合わせを紹介

  • URLをコピーしました!

ページはアフィリエイトプログラムによる収益を得ています。

WordPressでブログを始めて記事を書くことで精いっぱい、

気が付いたら最初に設定した見出しのままになっていませんか?

SWELLには、

  • H2見出し12種類(装飾なし含む)
  • H3見出し8種類(装飾なし含む)
  • H4見出し3種類(装飾なし含む)

の計288パターン(12×8×3)もあって、キーカラーの選択を含めればその数は無限大!とも言えます。

一体どれを選べばいいの?とお悩みのかた、

この記事にある見出しの組み合わせパターンの具体例をみて、その悩み解決しましょう。

この記事はこんな方におススメ
  • 最初に設定したかな?の見出しをそのまま使って、記事を書いている方
  • 「好きな見出しデザインを選んで」って言われても、多すぎて決められない
  • えっ?見出しデザインってどこから設定するの?

\SWELL公式で紹介されている見出しデザインはこんなにあります/

SWELL見出しの種類
出典;SWELL公式

この記事は初心者さん向けに、以下の内容について説明しています。

  • H2見出し11種類に対する、H3見出し7種類、H4見出し2種類の組み合わせ具体例を紹介(装飾なし除く)
  • 外観>カスタマイズで見出しの設定をする方法
    • 見出しのデザインは、記事エディター画面からは変更できません
この記事が目指すあなたの姿

記事数の少ないうちに見出しデザインを決めておく⇒サイトの統一感が生まれ、テキスト装飾がしやすくなる

目次に反映されることを意識して記事を書ける⇒読者さんも読みやすくPV数アップ

見出しから記事を書き始めることで効率よく書ける⇒ブログを継続できる

自己紹介
  • 老健に勤務して5年目の50代半ばの看護師
  • 50代前後に転職を繰り返した経験から職場選びの重要性を実感
  • 病棟(内科・外科・整形・小児科)、在宅医療(診療所・訪問診療・訪問看護)など看護師歴30年以上、ケアマネ資格もあり
  • 老後の不安からファイナンシャルプランナー3級取得

詳しいプロフィールはこちらから

よろしくね!

\あなたの愚痴を捨てていきませんか?/

スポンサーリンク
ジャンプできる見出し↓

SWELL見出しデザインパターン具体例

装飾なしを含むSWELLで作れる「見出しデザイン」は全部で288種類(12×8×3)

それを全部ためしていくことは、時間がいくらあってもたりません。

私がH2見出しに合うと思う、H3見出し、H4見出しのセットの紹介と、

それぞれの見出しを組み合わせてみて思った私個人の意見・感想をのべてます。

ぐちこ

カラーのセンスは・・・あなたにお任せしますね

この具体例を参考に、あなたのサイトに似合いそうな見出しの組み合わせを見つけてくださいね。

装飾なしデザインは具体例に入れていません。

①H2見出し;帯デザイン

H3見出し;2色の下線(メイン・薄メイン)

H4見出し;左に下線

H2見出しがわかりやすく、使われているブログをよく見かけます。
H3見出しは、1/3ほどで色が薄くなるので少し濃いめのキーカラーにした方がよさそうです。

見出しパターン1
帯デザインの見出しパターン

②H2見出し;塗り潰しデザイン

H3見出し;2色の下線(メイン・グレー)

H4見出し;チェックアイコン

思い切って赤色で試してみました。
はっきりした色だと、H2見出しに目が行きます。
H3見出しを2色の下線(メイン・グレー)はグレー部分がほとんど表示されていないように見えます。

見出しパターン2
塗り潰しデザインの見出しパターン

③H2見出し;左に縦線デザイン

H3見出し;下線(メインカラー)

H4見出し;左に下線

シンプルなH2見出しで見出し内容に視線が行きます。
H3見出しが一文字分ずれていますが、実際の記事ではH3見出しの方が目立つかもしれません。

見出しパターン3
左に縦線の見出しパターン

④H2見出し;左に2色のブロックデザイン

H3見出し;下線(グラデーション)

H4見出し;チェックアイコン

H2見出しの左に2色のブロックはキーカラーと薄キーカラーの組み合わせのシンプルなものです。
H3見出しはグラデーションにすると、見出し2/3ほどにキーカラーが見えます。

見出しパターン4
左に2色のブロックの見出しパターン

⑤H2見出し;付箋風デザイン

H3見出し;2色の下線(メイン・薄メイン)

H4見出し;左に下線

「見出しは短くわかりやすく」を意識して、見出し左側にキーカラーが集まるような組み合わせにしました。ちょっとシンプルすぎますか?
画像を多く使う記事を書く人には、シンプルな見出しもおススメです。

見出しパターン5
付箋風の見出しパターン

⑥H2見出し;付箋風(ストライプ)デザイン

H3見出し;下線(グラデーション)

H4見出し;チェックアイコン

H2見出し付箋風(ストライプ)の背景には薄いキーカラーが入ります。⑤付箋風より目立つ印象です。

見出しパターン6
付箋風(ストライプ)の見出しパターン

⑦H2見出し;ステッチデザイン

H3見出し;下線(ストライプ)

H4見出し;左に下線

H2ステッチは可愛い印象があります。
H3も下線(ストライプ)にして、よりキーカラーを表現できるようにしてみました。
濃いキーカラーより淡いパステルカラーが似合いそうです。

見出しパターン7
ステッチの見出しパターン

⑧H2見出し;ステッチ(薄)デザイン

H3見出し;下線(ストライプ)

H4見出し;チェックアイコン

H2ステッチ(薄)は囲み線がステッチで可愛いです。⑦同様、淡いキーカラーが似合いそうです。
H2見出しが主張しすぎず、柔らかな印象になります。

見出しパターン8
ステッチ(薄)の見出しパターン

⑨H2見出し;ふきだし風デザイン

H3見出し;左に2色のブロック

H4見出し;左に下線

H2ふきだしは、段落ブロックにも吹き出しがあるので、読者さんが見た時に混同しないかな?と思いました。
とはいえ、目立つ印象のH2見出しです。なので、H3はあえてシンプルなものにしてみました。

見出しパターン9
ふきだし風の見出しパターン

⑩H2見出し;上下に線デザイン

H3見出し;左に縦線

H4見出し;チェックアイコン

H2上下に線は、見出しを違和感なく区切ってくれる印象です。シンプルイズベスト!
H3、H4ともにシンプルに合わせてみました。

見出しパターン10
上下に線の見出しパターン

⑪H2見出し;1文字目にアクセントデザイン

H3見出し;下線(グラデーション)

H4見出し;左に下線

インパクトのある見出しです。読者さんにワクワク感を与える感じがします。その半面、ちゃんとワクワクにこたえられる記事にしなくては!のプレッシャーを私は感じます。

見出しパターン11
1文字目にアクセントの見出しパターン

見出しはキーカラー選びや色の濃淡でも、印象はずいぶん変わります。

塗り潰し部分が多いH2見出しは目立つけれど、圧迫感がないように少し淡い色がいいかもしれませんね。

SWELL見出しのカスタマイズ方法

WordPressではH6まで見出しとすることができますが、SWELLではH4までデザインできるようになっています。

STEP
WordPressの管理画面「外観」>「カスタマイズ」を選択する

WordPress管理画面からカスタマイズを選択
どちらかのカスタマイズを選択
STEP
「カスタマイズ」>「投稿・固定ページ」>「コンテンツのデザイン」を選択する
カスタマイズからコンテンツのデザインを選択
  1. 投稿した記事画面を見ながら見出しデザインを決めます。
  2. 「見出しのキーカラー」から色を選択する
  3. 「見出し2~4」を選択する
  4. 変更したら、「公開」をクリックを忘れずに!

パソコン画面だけでなく、スマホ画面からも確認をおススメします

なぜなら、読者さんの多くは、スマホから見ていますものね。

\SWELL公式HPでは以下のように解説しています/

お疲れさまでした
お疲れさまでした

まとめ

SWELLの見出しデザインは

  • H2見出し12種類(装飾なし含む)
  • H3見出し8種類(装飾なし含む)
  • H4見出し3種類(装飾なし含む)

の計288パターンもあって、カラーの選択を含めば無限大!

がゆえに、最初の設定のまま放置になっている人もいると思います⇒私がそうでした

見出しの設定は、カスタマイズ>投稿・固定ページ>コンテンツのデザインから設定できます。

見出しを整えて、気分よく記事を書いていきましょう。

今日でまた一つ、カスタマイズ画面で設定できることが増えましたね。

さぁ、忘れないうちに自分のイメージで見出しの設定をやってしまいましょう!

最後まで読んでくださりありがとうございます。

昨日よりちょっと前へを目指して。

今日はこの辺で、さようなら。

スポンサーリンク

ランキング参加してます。応援お願いします。

ブログ村でフォローする

ぐちこびより - にほんブログ村

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ジャンプできる見出し↓