プラグイン「Emanon Premium Blocks」を有効化すると、「バナーブロック」が利用できます。バナーブロックは、画像の上にタイトルを表示することができます。

設定方法

ブロックエディタからバナーブロックを配置します。画像選択から設定を開始します。画像選択をクリックするとメディアライブラリーから画像の選択または新規アップロードができます。

ブロック配置時の表示

画像設定

サイドバーからバナーブロックの設定をおこないます。

  1. 画像選択
    選択したバナー画像を削除するボタンです。まだ画像を設置してない場合は画像選択のボタンになります。
  2. loading属性:画像遅延読み込みの設定
    バナー画像の読み込み遅延を設定できます、lazy・eager・autoから選択します。
  3. Alt
    バナー画像の内容を示す代替テキスト(alt属性)を入力します。
  4. リンクURL
    バナー画像をクリックした時に遷移したいページのURLを入力します。
  5. 新しいタブで開く
    バナー画像をクリックした時に別タブで開くか、そのままにするかを設定できます。
  6. 画像角
    バナー画像角の角度を変更できます、0.3.10.25.30.40.50.60度から選択できます。
  7. 傾斜
    バナー画像を斜めに変更します、選択することで画像が傾斜表示されます。
  8. ホバーエフェクト
    バナー画像のマウスオーバー時のアニメーションを指定できます。スケール・ボーダー・シャドウ・表示・表示[スケール]・なしから選択できます。
  9. オーバーレイ
    バナー画像全体を暗めに設定する機能です。

タイトル設定

  1. 見出タグ
    h1からh6,divのいずれかに指定できます。
  2. フォントサイズ[px]
    タイトルテキストの文字サイズを指定します。
  3. 文字間隔[em]
    タイトルテキストの文字間隔を指定します。
  4. 行の高さ
    タイトルテキストの文字の高さを指定します。
  5. フォントの太さ
    タイトルテキストの文字の太さを指定します、Normal・Boldから選択します。
  6. フォント[モバイル]
    有効にする事で、スマホやタブレット表示時の文字サイズを指定できます。
  7. 垂直配置
    タイトルテキストの垂直での配置位置を指定できます、上・中央・下から選択します。
  8. 水平配置
    タイトルテキストの水平での配置位置を指定できます、左・中央・右から選択します。
  9. テキスト配置[改行時に反映]
    タイトルテキストが改行するほど長い時に反映されます、左・中央・右から選択します。
  10. ホバーエフェクト
    バナー画像のマウスオーバー時に発生するアニメーション指定です、右移動を選択するとマウスオーバー時にタイトルが右側に移動します。表示の初期値は透明、マウスオーバーで表示に変わります。なしはアニメーションが発生しません。

サブタイトル設定

サブタイトルにも詳細な設定が可能です。

  1. フォントサイズ[px]
    タイトルテキストの文字サイズを指定します。
  2. 文字間隔[em]
    タイトルテキストの文字間隔を指定します。
  3. 行の高さ
    タイトルテキストの文字の高さを指定します。
  4. フォントの太さ
    タイトルテキストの文字の太さを指定します、Normal・Boldから選択します。
  5. フォント[モバイル]
    有効にする事で、スマホやタブレット表示時の文字サイズを指定できます。
  6. テキスト配置[改行時に反映]
    タイトルテキストが改行するほど長い時に反映されます、左・中央・右から選択します。
  7. 余白:上[px]
    見出しタイトルとサブタイトルの間の余白を指定します、指定するとサブタイトルの上側に余白ができます。

アイコン設定

  1. アイコン配置
    アイコンの表示する位置を指定できます、アイコンはタイトルの左側か右側に表示されます。
  2. アイコンタグ
    アイコンリストで選択したアイコンのclass名が表示されます。アイコンタグを削除すると選択したアイコンが消えます。
  3. アイコンリスト
    表示したいアイコンを選択します。

ID属性設定

Googleタグマネージャーを使ってバナー画像のクリックを測定する場合、クリックイベント用のIDをClicK IDに入力します。ClicK IDは他と重複しないユニークなIDにします。

表示例

下記ブロックは、ホバーエフェクトを適用した表示例です。リンクURLは、target="_blank"を指定しています。

下記ブロックは、タイトルの配置位置を指定した表示例です。

下記ブロックは、タイトルにアイコンを配置した表示例です。

下記ブロックは、斜傾を有効化した表示例です。