投稿本文内のh1~h6の見出し、ウィジェットタイトルの見出しなど、見出しのデザインをカスタマイズできる機能です。
管理画面からボタン操作と数値の入力で簡単に見出しのデザインを設定できます。
目次
見出しデザイン編集機能でできること
見出しデザイン編集機能では、投稿本文内の h1〜h6、投稿タイトル、固定ページタイトル、一覧ページタイトルなどに使う見出しデザインを作成できます。
作成した見出しデザインは、次の2つの方法で利用できます。
「見出しレベルへ割り当てる」を使うと、投稿本文内のh2やh3など、同じ見出しレベルへまとめてデザインを反映できます。
「ブロックスタイルとして使う」を使うと、ブロックエディター上で必要なブロックだけにデザインを適用できます。
見出しブロックのほか、段落ブロックにもスタイルを登録できます。
見出しデザイン編集画面の操作
管理画面メニューから「[ys] Toolbox」→「見出しデザイン編集」を開きます。
見出しデザイン編集画面には、次の2つの編集モードがあります。
まず「スタイル編集」で見出しデザインを作成し、必要に応じて「割り当て設定」でh2やh3などへ割り当てます。
見出しスタイル編集
スタイルを追加する
「スタイル編集」を開き、「スタイル追加」をクリックします。
スタイル追加画面では、次の項目を入力します。
「スタイルID」は、英数字とハイフンのみ使用できます。最初の文字は英字にしてください。
ハイフンは1回のみ使用できます。
「スタイル名」は、管理画面やブロックエディター上に表示される名前です。
編集画面などで表示された時に分かりやすい名前を付けてください。
スタイルを編集する
編集するスタイルを選択すると、左側に設定パネル、右側にプレビューが表示されます。
プレビューを確認しながら、見出しの見た目を調整します。
主な設定パネルは次のとおりです。
設定を変更したら、「スタイル設定を更新」をクリックして保存します。
保存する前に別のスタイルへ切り替えたり、編集モードを切り替えたりすると、編集中の内容は破棄されますのでご注意ください。
デザインプリセットを使う
「プリセットから選択」から、あらかじめ用意されたデザインを選択できます。
テンプレートを選んだあとに、文字色・背景色・余白・線などを調整もできます。
最初から細かく設定するのが難しい場合は、テンプレートを選んでから必要な部分だけ変更する方法がおすすめです。
ブロックスタイルとして使う
「ブロックスタイル」パネルでは、作成したスタイルをブロックエディターで選択できるようにするかを設定します。
「見出しブロックのスタイルとして使う」をONにすると、見出しブロックのスタイル一覧にこのデザインが追加されます。（初期値はONです）
「段落ブロックのスタイルとして使う」をONにすると、段落ブロックのスタイル一覧にこのデザインが追加されます。（初期値はOFFです）
見出し風のリード文や、強調したい短い文章を作るときに便利です。
スマホ/タブレット/PCを別々に設定できる項目
設定によっては「標準」「デバイス別」のタブに分かれているものがあります。
「デバイス別」を選択すると、PC・タブレット・スマホでそれぞれ別々の値を設定できます。
スタイルを削除する
不要になったスタイルは、「スタイル編集」で対象のスタイルを選択し、「スタイルを削除」をクリックします。
削除したスタイルを見出しレベルに割り当てていた場合は、表示を確認し、必要に応じて別のスタイルを割り当て直してください。
見出しレベルへの割り当て
「割り当て設定」では、作成したスタイルを見出しレベルやページタイトルへ割り当てます。
割り当てるスタイルを選択したら「割り当て設定を更新」ボタンを押して設定を更新してください。
yStandardテーマを利用しているか否かで割り当てられる項目が変わります。
yStandard以外のテーマでは、テーマのHTML構造によって、投稿タイトル・一覧ページタイトルなどへの割り当て設定が反映されない場合があります。
割り当て設定が反映されない場合は、ブロックスタイルとして登録し、ブロックエディター上で必要なブロックへ適用してください。