カバーブロック

こちらのページでは、カバーブロックについて解説致します。

このページでわかること

カバーブロックを使うケース

カバーブロックは、背景画像を設定しビジュアル的にアピールしたり、背景カラーを変えることでそのセクションを目立つようにしたり、セクション同士を区切ったりなど様々な要素として使用することができます。

カバーブロックの使い方

カバーブロックの使い方は多種多様です。今回は写真を背景に挿入してバナー風なものを作成してみます。

1,ブロック右上の「+マーク」を選択します。

2,すべてを表示をクリックします。

3,カバーブロックをドラッグ&ドロップで配置します。

4,挿入したい写真を選択します。

※写真のアップロード方法に関しては、下記リンクをご確認ください。

【画像・イラストを挿入する】
https://manual.hp-onepages.com/post-113/

5,タイトルを打ち込みます。

6,リンク先や補足文書を打ち込み、更新します。

※タイトルの箇所でエンターを押すとブロックが表示されます。
※クラシックブロックの使い方は、下記リンクをご確認ください。
https://manual.hp-onepages.com/post-1692/
※リンクの挿入方法は、下記リンクの「8、9」をご確認ください。
https://manual.hp-onepages.com/post-875/#8

7,ホームページ上での見え方を確認して、スペーサーを使って調整します。

今回は配置・文字カラーがいまいちなので調整していきます。

フッターメニューに被ってます。

8、表示の調整を行い、更新を押したら完了です。

ホームページ上での見え方

カバーブロックの付加機能

横幅を画面いっぱいに表示させたい。

カバーブロックの追加表示設定からスタイル横幅100%をクリックします。

背景を固定させたい。(文字だけ浮遊する)

固定背景をONにします。

背景写真が繰り返し表示されるようにしたい。

繰り返し背景をONにします。

指定の範囲内で繰り返されるようになります。

背景写真の焦点を変更したい。

焦点ピッカーの丸を任意の一に移動させます。

背景写真の色味を変えたい

オーバーレイカラーを設定します。

白に設定しました。

背景写真の透明度を変えたい。

不透明度を任意の値に設定します。
透明度を下げると写真が鮮明になります。

まとめ

以上がカバーブロックの解説となります。カバーブロックは様々なカスタムが可能です。触ってみて、先生の好みを見つけ出してみてください!