プラグイン「Emanon Blocks」を有効化すると、「バナーブロック」が利用できます。バナーブロックは、画像の上にタイトルを表示することができます。
設定方法
バナーブロックはWeb上の特定のページ・サービス・商品などに閲覧者を誘導したい時に使用するブロックになります。
「Emanon Blocks」のバナーブロックは画像にリンクURLだけでなく、タイトルテキスト表示・アイコン表示・マウスオーバー時のアニメーションなどを設定することができます。それではバナーブロックの設定方法について紹介します。
ブロックエディタからバナーブロックを配置します。バナーブロックを選択すると下記画像のように編集画面上に配置されます。次に編集画面上の画像選択のアイコンをクリックします、メディアライブラリーが表示されますので画像の選択か新規アップロードで設置したい画像を選択しましょう。
画像設定
バナーブロックに関する詳細な設定は編集画面右側のサイドバーからを行います。この記事では主要な設定について解説します。
バナーブロックに設置した画像には様々な設定が可能です、設定項目は上記画像の通り９つあります。
- 画像選択
選択したバナー画像を削除するボタンです。まだ画像を設置してない場合は画像選択のボタンになります。 - loading属性：画像遅延読み込みの設定
バナー画像の読み込み遅延を設定できます、lazy・eager・autoから選択します。 - Alt
バナー画像の内容を示す代替テキスト（alt属性）を入力します。 - リンクURL
バナー画像をクリックした時に遷移したいページのURLを入力します。 - 新しいタブで開く
バナー画像をクリックした時に別タブで開くか、そのままにするかを設定できます。 - 画像角
バナー画像角の角度を変更できます、0.3.10.25.30.40.50.60度から選択できます。 - 傾斜
バナー画像を斜めに変更します、選択することで画像が傾斜表示されます。 - ホバーエフェクト
バナー画像のマウスオーバー時のアニメーションを指定できます。スケール・ボーダー・シャドウ・なしから選択できます。 - オーバーレイ
バナー画像全体を暗めに設定する機能です。
タイトル設定
バナーブロックの画像にタイトルを記入できます、見出しタグやタイトルの位置・マウスホバー時のアニメーションなどを設定します。
- 見出タグ
h1からh6,divのいずれかに指定できます。 - フォントサイズ［px］
タイトルテキストの文字サイズを指定します。 - 文字間隔［em］
タイトルテキストの文字間隔を指定します。 - 行の高さ
タイトルテキストの文字の高さを指定します。 - フォントの太さ
タイトルテキストの文字の太さを指定します、Normal・Boldから選択します。 - フォント［モバイル］
有効にする事で、スマホやタブレット表示時の文字サイズを指定できます。 - 垂直配置
タイトルテキストの垂直での配置位置を指定できます、上・中央・下から選択します。 - 水平配置
タイトルテキストの水平での配置位置を指定できます、左・中央・右から選択します。 - テキスト配置［改行時に反映］
タイトルテキストが改行するほど長い時に反映されます、左・中央・右から選択します。 - ホバーエフェクト
バナー画像のマウスオーバー時に発生するアニメーション指定です、右移動を選択するとマウスオーバー時にタイトルが右側に移動します。なしはアニメーションが発生しません。
サブタイトル設定
サブタイトルにも詳細な設定が可能です。
- フォントサイズ［px］
タイトルテキストの文字サイズを指定します。 - 文字間隔［em］
タイトルテキストの文字間隔を指定します。 - 行の高さ
タイトルテキストの文字の高さを指定します。 - フォントの太さ
タイトルテキストの文字の太さを指定します、Normal・Boldから選択します。 - フォント［モバイル］
有効にする事で、スマホやタブレット表示時の文字サイズを指定できます。 - テキスト配置［改行時に反映］
タイトルテキストが改行するほど長い時に反映されます、左・中央・右から選択します。 - 余白：上［px］
見出しタイトルとサブタイトルの間の余白を指定します、指定するとサブタイトルの上側に余白ができます。
アイコン設定
バナーブロックの画像内にアイコンを配置できます、アイコン位置やアイコンの種類などを選択します。
- アイコン配置
アイコンの表示する位置を指定できます、アイコンはタイトルの左側か右側に表示されます。 - アイコンリスト
表示したいアイコンを選択します、アイコンの種類は216あります。
ID属性設定
Googleタグマネージャーを使ってバナー画像のクリックを測定する場合、クリックイベント用のIDをClicK IDに入力します。ClicK IDは他と重複しないユニークなIDにします。
表示例
下記ブロックは、ホバーエフェクトを適用した表示例です。リンクURLは、target=”_blank”を指定しています。
下記ブロックは、タイトルの配置位置を指定した表示例です。
下記ブロックは、タイトルにアイコンを配置した表示例です。
下記ブロックは、斜傾を有効化した表示例です。
