セクション見出しブロックの解説をします。
セクション見出しブロックの追加
左上の「+」ボタンをクリックします。
「セクション見出し」をクリックします。
以下のような見出しが表示されます。
セクション見出しブロックの設定を表示する
右サイドバーにセクション見出しブロックの設定が表示されない場合は、赤枠の箇所をクリックすると右サイドバーにブロックの設定が表示されます。
テキストの設定
見出しのテキストは赤枠に直接入力できます。
スタイルの設定
5種類のスタイルが選択できます。
フォントサイズの設定
画面の幅に合わせてフォントサイズを変更できます。
画面の幅は下記の3つで分けられます。
- パソコン（992px以上）
- タブレット（991px以下）
- モバイル（767px以下）
パソコン・タブレット・モバイルのアイコンをクリックしてそれぞれ指定してください。
サブテキストの設定
サブテキスト設定で「サブテキストを付ける」をONにすると、セクション見出しの下にサブテキストを入力する箇所が表示されます。
フォントサイズはパソコンサイズとスマホサイズで設定可能です。
色の設定
右サイドバーにある「カラー設定」で色の変更ができます。背景色は単色とグラデーションから選択できます。
カラー設定の右上にある点三つのアイコンをクリックすると、設定をリセットできます。
テキストアニメーションを設定する
見出しブロックにはテキストアニメーションが設定できます。
速度の詳細トグルをONにすると、1文字ごとの表示間隔と速度調整ができます。
ツールバーからテキストの書式を変更した場合はアニメーションは設定できません。
またアニメーションを設定すると、ツールバーから書式変更はできなくなります。
背景テキストを追加する
以下のような背景テキストを追加できます。
「背景文字」のパネルを開いて、テキスト欄に表示したい文字を入力します。
入力がない場合は閉じられています。
入力すると「文字サイズ（PC・タブレット・スマホ別）」と「濃さ」、「太さ」が設定できます。
テキストのフォントはサイト単位・LP単位・ページ単位（LPのみ）で設定できます。
利用方法は下記をご確認下さい。
Googleフォントを追加したあとは、カスタマイザー（サイト共通・LP共通）もしくは、編集ページの一番下の「LPコンテンツ設定」の「セクション見出し」ブロックの背景テキスト でページ単位で設定できます。
下記はカスタマイザーより設定してます。
Background Colorスタイルに下三角ラベルを追加する
Background Colorスタイルに以下のような下三角ラベルを追加できます。
スタイルを選択します。
「見出しの下に三角形を表示する」をONにします。
下三角ラベルの表示位置は「ポジション」と連動しています。
背景色にグラデーションを選択した場合は無効になりますのでご注意下さい。
Tips
セクション見出しの横の長さを調整する方法
セクション見出しブロックは「幅広」になっていますが、
以下のように、ボックスブロックもしくはシンプルボックスを利用して、横幅を調整することができます。
セクション見出しブロックをボックスブロックの中に入れます。
ボックスブロックのスタイルから、「最大幅」を300px等に固定設定します。
余白が気になる場合は、マージン・パディングを全て「０」にします。
「カーテン」系のアニメーションを利用する場合は、必ず上記のようにボックスブロックに入れて下さい。
ボックスの設定で「横幅を内容幅に合わせる」にチェックを入れると文字幅でアニメーションできます。
ただし、背景テキストを利用している場合は、背景テキストが左寄せになるため、
※ この場合「横幅を内容幅に合わせる」にチェック外して下さい