カバーブロック

ブロック一覧へ戻る

投稿や固定ページにカバーブロックを追加すると、スマートでプロフェッショナルな外観にできます。最初に「ブロックを追加」をクリックしましょう。

または、新しいブロックに /cover (または /カバー)と入力して Enter キーを押せば、素早く追加できます。

ブロック追加の詳しい方法はこちらをご覧ください。

カバーブロックを追加した後、新しい画像や動画をデバイスからアップロードしたり、サイトのメディアライブラリにアップロード済みの画像や動画を選んだりできます。

画像や動画を使いたくなければ、カバーにする色を選べます(エディターのサイドバーにあるブロック設定で、後からカバーの色を変えられます)。

ブロックツールバー

各ブロックにはそれ固有のツールバーアイコンとコントロールがあり、エディター内でブロックを操作できます。

カバーブロックには標準で8個のボタンがあります:

• 変換(またはスタイル変更)
• 移動用ハンドル
• 配置を変更
• コンテンツ位置を変更
• フルハイトを切り替え
• デュオトーンフィルターを適用
• 置換(メディアを追加)
• 他のオプション

変換(またはスタイル変更)

カバーブロックは画像ブロック、カラム、グループへ変換できます。グループにするとカバーの周囲の背景色を変更できます。

また、カバーブロックのスタイルを変更できます。「デフォルト」は枠線なしで、「枠線」を選ぶと画像や動画に枠線がつきます。

移動用ハンドル

上下の矢印を使って、ドキュメント内でブロックを上下に移動できます。

エディター内でブロックを移動する詳しい方法はこちらをご覧ください。

配置を変更

• 左寄せ – ブロックを左に配置します。
• 中央寄せ – ブロックを中央に配置します。
• 右寄せ – ブロックを右に配置します。
• 幅広 – ブロックの幅をコンテンツ幅に合わせます。
• 全幅 – 画面の幅いっぱいまでブロックの幅を広げます。

コンテンツ位置を変更

コンテンツ位置を変更オプションを使って、カバー内のコンテンツの位置を変更できます。

フルハイトを切り替え

このオプションを使うと、カバーブロックが画面の高さいっぱいに広がって没入体験を作り出せます。

デュオトーンフィルターを適用

デュオトーンフィルターを使うと、カバーブロックの画像や動画に色付けできます。デュオトーン効果は白黒のフィルターのようなものですが、シャドーが黒、ハイライトが白になっている代わりに、シャドウとハイライトの色を自分で選ぶことができます。

デュオトーンフィルターの紹介記事が公式ブログにあります。

置換

このオプションを使うと、カバーブロックに入れる新しい画像や動画ファイルを選べます。カバーブロックの画像や動画を入れ替えたい時にご利用ください。

他のオプション:

追加設定を表示(非表示)

追加設定を表示(非表示)オプションを使うと、エディターのサイドバーにある「ブロック設定」パネルを表示する(または隠す)ことができます。

コピー

コピーを使うと、選択したブロックをコピーしてエディター内の好きな位置へ貼り付けできます。

複製

複製を使うと、選択したブロックを複製できます。

前に挿入

新しいブロックを選択したブロックの前へ挿入します。

後に挿入

新しいブロックを選択したブロックの後へ挿入します。

移動

移動を選ぶと、コンテンツ内に青い線が現れます。その後、矢印を使って線を上下に移動し、選択したブロックの移動先を指定できます。最後にキーボードの Enter を押すとブロックがそこへ移動します。

再利用ブロックに追加

再利用ブロックに追加オプションを使うと、選択したブロックを再利用ブロックのリストへ追加できます。すると他の投稿や固定ページでそのブロックを利用できます。

グループ化

ブロックをまとめて一つの単位として扱いたい場合、グループ化オプションを選択します。例えば共通の背景色や他のブロックをグループへ追加できます。

ブロックを削除

ブロックを削除オプションを使うと、選択したブロックをコンテンツから削除できます。

ブロック設定

どのブロックも、ブロックツールバーにあるオプションに加えて、固有のオプションがエディターのサイドバーにあります。もしサイドバーが見当たらなければ、公開(更新)ボタンの隣にある「歯車」ボタンをクリックしてください。

メディア設定

固定背景

サイドバーのブロック設定に、いくつか他のオプションがあります。まず固定背景のオン/オフです。これはカバー画像をページと一緒にスクロールするかどうかを示します。オンにすると画像は決まった位置に埋め込まれ、スクロールしません。

繰り返し背景

繰り返し背景オプションを使うと、カバーブロックをパターンで埋めるように同じ画像を繰り返し使います。例えば、小さな画像をカバーブロックに繰り返し並べるには、このオプションを有効にします。

繰り返し背景は固定背景と組み合わせて使えますが、固定背景をオンにしなくても構いません。ご希望に合うようにこれらのオプションを触ってみてください。

焦点ピッカー

固定背景をオフにすると焦点ピッカーが表示されます。このツールで写真の注目させたい位置を指定してハイライトできます。ピッカーをクリックしてドラッグするか、左端と上端からの位置をパーセントで指定します。

サイズ

サイズを使って、要件に合うようにカバーの高さを変更できます。

オーバーレイ

色

オーバーレイの色オプションを使うと、カバー画像に色のオーバーレイを追加できます。デフォルトは灰色の透明のオーバーレイですが、オーバーレイの色オプションで好みの色に変えられます。

不透明度

不透明度スライダーを使うと、カバー画像のオーバーレイの不透明度を設定できます。スライダーを右の100へ向けて動かすとオーバーレイはより暗く不透明になります。左の0へ向けて動かすとより明るく透明になります。100にするとオーバーレイは完全に不透明になり、カバー画像は見えません。0にするとオーバーレイは見えず、画像だけが残ります。

カバー画像にタイトルを追加する場合は、オーバーレイを僅かでも不透明にしてタイトルを読みやすくすることをお勧めします。

高度な設定

高度な設定パネルを使うと HTML アンカーと CSS クラスをブロックへ追加できます。

HTML アンカーは特定のカバーブロックにユニークな Web アドレスを作ることができます。その後、ページ内のカバーブロックへ直接リンクできます。

追加 CSS クラスはブロックへ CSS クラスを追加できます。その後、カスタム CSS を書いてブロックに好みのスタイルを付けることができます。

原文