【SWELL】見出しにサブタイトルを入れる方法!目次もすっきり

なやみさん

見出しが長くなってしまって目次も見づらい。
何か良い方法ないかな?

このように悩んでいる方は必見。

当記事では、サブタイトルを使って見出しをすっきりさせる方法について解説していきます。

こんな人におすすめの記事
  • 見出しが長くなりがち
  • 見出しをおしゃれに見せたい
  • 目次をすっきりさせたい

SWELLの基本機能だけで対処することが出来るので、余計なプラグインをいれる必要もありません。

今回紹介する方法では、サブタイトル部分は目次には反映されませんので見出しは長く、目次は短くしたい場合にも有効です。

是非参考にしてみてくださいね。

目次

見出しにサブタイトルを入れるとはどのようなもの?

クエスチョンのベクター画像

ではさっそく、どのようなものかを紹介していこうと思います。

それぞれ見出しH3に適応させています。

サブタイトルを入れる方法その1:
見出しの上に入れてみる

この方法は「メリットその1」「メリットその2」など、連続する場合に使いやすいのではないでしょうか。

個人的にもっとも多用しています。

見出しの下に入れてみる
その2:サブタイトルの追加方法について

こちらは見出しに「注釈要素」として入れたい場合に有効かと思います。

英訳を入れるというような使い方も便利ですね。

WordPressのSWELLで見出しをすっきりさせる方法
活用例

方法その3:見出しに並べてみる

「方法その3:」という部分ですが、こちらはぱっと見ではサブタイトルには見えません。

目次のみすっきりさせたい場合に有効です。

「方法その3:」の文字色とサイズを、タイトルに合わせています。

見出しにサブタイトルを入れる方法

OLのベクター画像

では本題、見出しにサブタイトルを入れる方法を紹介します。

STEP
見出しで改行する
WordPressのSWELLで見出しをすっきりさせる方法

見出しに、タイトルとサブタイトルに分けたい箇所を「Shift」+「Enter」で改行します。

STEP
サブタイトル部分を「注釈」にする
WordPressのSWELLで見出しをすっきりさせる方法

サブタイトル部分を選択し、ツールバーから「注釈」をクリックします。

STEP
形を整える
WordPressのSWELLで見出しをすっきりさせる方法

あとはツールバーから文字の大きさや色などを選択し、形を整えて完了です。

タイトルと並べる場合

サブタイトルをタイトルと並べる場合は、改行しないで文字サイズを「L」、色をテキストと合わせて調整してください。

見出しに注釈を入れて問題はないのか?

パソコンを見ながら悩む人のベクター画像

見出しに注釈を入れても問題は無さそうです。

なぜなら、同じような方法を公式の機能紹介「セクション用見出し」の使用方法でも解説しているから。

「セクション用見出し」を選択した場合は、「注釈」ボタンをクリックするだけで自動的に改行してくれます。

管理人

とても便利な機能ですね!

見出しにサブタイトルを入れる方法まとめ目次もすっきりさせよう!

パソコンとコーヒーのベクター画像

最後に「セクション用見出し」を使用してサブタイトルを入れてみました。

このようにサブタイトルを入れるだけで、見出しをスマートにさせることが出来ます。

管理人

目次もすっきり!

少し人と違った見出しにしたい場合にも、おすすめですよ。

以上、見出しにサブタイトルを入れる方法でした。

あと少しのカスタマイズでお困りではないですか?

スキルを身につけるなら、デイトラがおすすめです。

管理人

私はWeb制作とWebデザインを受講しました!

業界最安値で、学習内容もサポートも充実!
気になるコースがあれば是非覗いてみてください。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

目次