「カバー」ブロックの挿入と設定画面

「画像」ブロックは、写真やイラストをWebページ上に挿入したい場合に使用します。
この写真やイラスト上に文字や文章を載せることができるのが「カバー」ブロックです。
下の画像のように、写真の上に文章が入力しています。

設定内容はシンプルに
①テキスト:白
②オーバーレイの不透明度:50に設定
の2つだけで、その他は初期設定から変更していません。

写真の上に、文章(キャッチコピー)や文字(キーワード)を挿入すると、ちょっとキレイな画像兼文章になります。
画像も好きなものを設定でき、表示したい文章(文字)も設定できるので、色々な使い方ができます。

画像:「カバー」ブロックのサンプル

画像:「カバー」ブロックのサンプルと設定

「カバー」ブロックの設定について解説します。
ブロックの挿入方法については、別の記事にて詳しく解説しておりますので、参考にしてみてください。

画像:「カバー」ブロックを挿入する

編集画面に「カバー」ブロックを挿入すると、下のような状態になります。
カバー ブロックの設定画面は右側に表示されます。
「カバー」ブロックは、画像の上に色付きのレイヤーを入れるようなイメージです。
文字を入れる場合も、同様にレイヤーとして入れるようなイメージです。
そのため、画像そのものは変更されていません。

まずは、挿入したい画像を「カバー」ブロックの上にドラッグしてドロップして、背景にしたい画像を挿入します 。
「メディアライブラリ」に画像が保存されている場合は、「メディアを選択」のボタンをクリックして、画像を選択挿入します。

画像:「カバー」ブロックの設定画面

「カバー」ブロックの文字と色の設定

画像を挿入すると、「カバー」ブロック全体に画像が表示され、
その中に「タイトルを入力…」と表示された部分に文字を入力します。
文字をした後は、画像や文字の色や濃淡について右側の設定画面で詳細に設定をします。

この「カバー」ブロック上にある文字の部分は、「段落」ブロックです。
画像の上に「段落」ブロックが挿入されているので、「段落」ブロックと同様の設定方法になります。
そのため、色については「テキスト」(文字)や「背景」を変更できます。
もちろん、作成途中の場合は、ブロックの非表示の設定も可能です。

「段落」ブロックやブロックの非表示については、こちらを参考にしてみて下さい。
このように、基本的なブロックは、さまざまなブロックの基本操作として併用して使われます。
まずは、基本のブロックの操作方法や、
複数のWebページを作成したら覚えておきたい便利な操作方法の記事をおさえて頂ければと思います。

画像:画像を挿入した状態の「カバー」ブロック

「色」の設定では、「テキスト」(文字)や「オーバーレイ」を変更します。
「テキスト」は「段落」ブロックと同様に設定できるのですが、
「カバー」ブロックの「テキスト」でも色の変更が可能です。

「オーバーレイ」は「カバー」ブロック全体に配置された画像のレイヤー色を変更する設定画面です。
例えば、このWebページの最初にサンプルを表示したのですが、
画像全体を黒っぽくして、文字を白色に設定しています。
このように、色の配色で見やすくすると読み手が理解しやすいです。

画像:「カバー」ブロックの設定画面

ちなみに、
下の画像の内、上部の画像は、
「カバー」ブロックの設定画面で「オーバーレイ」を白色で、
「テキスト」を黒色の太字に設定した画面です。

下の画像の内、下部の画像は、
「カバー」ブロックの設定画面で「オーバーレイ」を黒色で、
「テキスト」を白色(標準で太字ではない)に設定した画面です。

画像:「オーバーレイ」と「テキスト」を対照的に比較表示

「カバー」ブロックの配置

「カバー」ブロックの配置を一工夫することで、画面表示が違ってきます。
配置のボタンは、編集画面の上部にあるボタンで変更します。

画像:「カバー」ブロックの配置ボタンの場所

この配置ボタンには、下の画像のように、設定が「なし」から「全幅」まで用意されています。
特に使うのが、「中央揃え」と「幅広」と「全幅」です。

パソコンの画面いっぱいに画像を使う場合は、「全幅」を使うとキレイに表示できます。
一度この「全幅」の配置を試してみて下さい。

また、画像の中心位置を変更したい場合は「フォーカルポイント」の下にある画像の中に丸いマーカーがあり、
このマーカーを画像内で移動して中心を設定します。
この操作により、パソコン画面で表示させるとき、どの部分を真ん中で表示させたいかを変更できます。

画像:「カバー」ブロックの配置ボタンの種類

「カバー」ブロックには、その他に「固定背景」「繰り返し背景」などの機能もあります。
「画像」ブロックだけでは表現できなかった方法を「カバー」ブロックで画像を加工すると、
さまざまな表現方法が可能なので、色々と試してみてオリジナルの画像や表現方法を見つけてみて下さい。

最後まで、ご覧いただき、ありがとうございました