WordPress - カバーブロック

カバー

カバーブロックは、カバー画像を追加する場合に用いられます。カバー画像は普通の画像の挿入とは異なり、画像にタイトル文字を追加したり、固定背景に設定したりなどできます。

カバーブロックを追加するには、「ブロックの追加」ボタンをクリックして「カバー」を選択します。

カバーブロックの追加
カバーブロックの追加

その他にも「/カバー」と入力して Enter キーを押すことでもブロックを追加できます。

スラッシュコマンドを使ったカバーブロックの追加
スラッシュコマンドを使ったカバーブロックの追加

カバーブロックに画像を追加するには、画像をアップロードするか、メディアライブラリから選択します。

カバーの追加
カバーの追加

メディアライブラリからカバーを追加する場合、メディアライブラリボタンをクリックしてカバーを選択します。

カバーの選択
カバーの選択

カバーブロックは、エディタから各ブロック単位に以下の直接編集が可能です。

タイトル
カバー画像を選択したら、その画像にタイトルを付けることができます。例えば、ページの新しいセクションのタイトルを付けるなどです。タイトルの配置を、左寄せ、右寄せ、中央揃えから選択することもできます。また、タイトルにリンクを挿入することもできます。
配置
カバーブロックを左寄せ、右寄せ、中央揃えに配置できます。左寄せ、または右寄せを選択すると、カバーブロックの横に別のブロックを配置できます。
カバーブロックの追加
カバーブロックの追加

サイドバーにあるメディアの設定からは、固定背景の設定、および焦点ピッカーの位置を設定できます。固定背景を有効にすると、カバー画像はページとともにスクロールします。固定背景を無効にすると、画像は定位置に埋め込まれるためスクロールしません。

メディアの設定
メディアの設定

サイズの設定では、ピクセル単位での最小の高さを設定できます。

サイズの設定
サイズの設定

オーバーレイの設定では、オーバーレイの色オプションを使用して、カバー画像にカラーオーバーレイを追加できます。デフォルトではグレーの透明なオーバーレイですが、オーバーレイの色オプションを使用すると、任意の色に変更できます。

また、背景の透過率の設定では、スライダーを使用してカバー画像のオーバーレイの透過率を設定できます。スライダーを 100 の方向に動かすとオーバーレイは暗く不透明になり、0 の方向に動かすとオーバーレイは明るく透明になります。

オーバーレイの設定
オーバーレイの設定

高度な設定では、追加 CSS クラスを設定できます。

高度な設定
高度な設定

関連記事