見出し［Emanon］ブロック

プラグイン「Emanon Blocks」を有効化すると、見出しブロック［Emanon］が利用できます。見出しブロック［Emanon］は、独自の装飾やサブテキストの追加、フォントサイズの指定など高機能な見出しブロックです。

設定方法

見出しブロックは、Webページ上で特定のコンテンツに見出しを付けたい時に使用します。見出しブロックを配置する事で注意喚起につながり、訪問者の閲覧に繋がる効果が期待できます。それでは、見出しブロックの設定方法について紹介します。

1. タグを指定します。h1からh6のいずれかを選択。
2. 左寄せ・中央揃え・右寄せで指定できます。

見出し設定

見出しのフォントサイズ・文字間隔・行の高さ・フォントの太さを指定します。任意でフォントファミリーの指定が可能です。

1. 見出しのフォントを変更したい場合、フォントファミリーを入力してください。
2. 見出しが縁取りデザインになります。
3. スマホ・タブレットで見出しのフォントサイズ個別に指定できます。
4. 見出し周辺の余白指定です。
5. 上を基準に上下：左右を1：2に自動調整できます。

アイコン設定

見出しの左側にアイコン表示が可能です。任意設定です。

サブテキスト設定

サブテキストは見出しを装飾する短文です。サブテキストの表示を有効に切り替えて設定します。

1. サブテキストのHTMLタグを指定できます。
2. 見出しに対してサブテキストの表示位置を指定します。
3. スマホ・タブレットで見出しのフォントサイズ個別に指定できます。
4. 表示位置に応じて水平または垂直方向の位置指定ができます。
5. サブテキストのフォントを変更したい場合、フォントファミリーを入力してください。

1. 見出しとの距離を調整します。
2. サブテキスト周辺の余白指定です。
3. 上を基準に上下：左右を1：2に自動調整できます。

リンク設定・アニメーション設定

サブテキストにリンクURLを付与できる設定です。ホバー時のアニメーション設定も可能です。

カスタムデータ属性設定

見出しのあしらいをリッチにしたい場合、カスタムデータ属性を指定することで表現に幅が広がります。

1. 見出しを装飾する文言を入力してください。

1. データ属性の表示位置をパソコン・タブレット・スマホ単位で指定できます。

1. カスタムデータ属性の表示基準を切り替えます。
2. 上むきの表示位置をマイナス方向に切り替えます。
3. 左むきの表示位置をマイナス方向に切り替えます。
4. 見出しに対してカスタムデータ属性を中央に表示します。
5. 見出しに対してカスタムデータ属性を前面・背面の表示切り替えが可能です。

1. カスタムデータ属性のフォントを変更したい場合、フォントファミリーを入力してください。
2. カスタムデータ属性のフォントの太さを指定できます。
3. カスタムデータ属性が斜め表示に切り替わります。
4. スマホ・タブレットでサブテキストのフォントサイズ個別に指定できます。

スタイル設定・色設定

見出し・サブテキスト・カスタムデータ属性のスタイルを指定するだけで見出しの装飾ができます。

各要素の配色は不透明度の指定が可能です。不透明度は、数字が小さくなるにしがって色が薄く（透過）なります。

スタイル例

スタイル設定を組み合わせることで下記のようなデザインが可能です。