画像ボックスについて解説

目次

画像ボックスはアイコンボックスウィジェットの代わりにFeaturesセクションでよく使用される、画像に見出しとテキストを組み合わせたウィジェットです。

コンテンツ設定

画像の選択:メディアライブラリーから画像を選択するか、新規に画像をアップロードします。

画像サイズ:画像のサイズを選択します。カスタムサイズで好きなサイズにもできます。

タイトル・説明:画像ボックスウィジェット内に表示されるタイトルと説明を入力します。

リンク:アイテムのリンク先のURLを入れます。歯車マークのリンク設定から、リンクを新しいウィンドウで開くか、リンクにNofollowを追加するかを選択できます。

画像の位置:タイトルと説明文を基準として、画像の位置を左、上、右に設定します。モバイル表示では中央に固定されます。

タイトルHTMLタグ:H1…H6、div、spanなどのタイトルのHTMLタグを設定します。

スタイル設定

画像

間隔:画像とタイトルの間のスペースを設定します。

幅:画像の幅を0~100%に拡大できます。

枠線の丸み:画像の角の丸みを設定します。

ホバー時のアニメーション:画像にホバーアニメーションを追加します。

CSSフィルタ:通常とマウスオーバーの状態での、ぼかし、明るさ、コントラスト、彩度、色相の設定を変更して、画像のスタイルを調整します。

不透明度:通常とマウスオーバー時の画像の透明度を調整します。

トランジション所要時間:画像効果が切り替わるまでの時間を設定します。この時間は0.1秒単位で設定できます。

コンテンツ

配置:コンテンツを左、右、中央、均等割付に配置できます。

縦方向の位置揃え:コンテンツをボックスの上、中央、下に配置できます。

タイトル

間隔:タイトルと説明の間のスペースを設定します。

色:タイトルの色を設定します。

書体:タイトルの書体を設定します。

説明

色:説明文の色を設定します。

書体:説明文の書体を設定します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です