ワードプレスのブロックエディタでは、文章や画像、見出しなどのブロックを追加していくことによって簡単にホームページを組み立てていくことができます。
その中で、簡単にホームページの見た目を変えられる「カバーブロック」をご紹介いたします。
Contents
パララックスとは？
パララックスとは、視差効果と言って、スクロール動作の際に一部分のスクロールスピードを変えるなどによって、立体感や奥行きを演出したり、視覚的に変化を付ける演出のことを指します。
具体的には、ホームページの一部のところのスクロールスピードを遅くして、その部分だけ奥にあるように見せたりします。そのようなホームページを目にしたこともあると思います。平面的なホームページより、動きがあり、目を引きおしゃれな印象にするとこができます。
サンプルサイトはこちら
カバーブロックを使ったパララックスの作り方
カバーブロックでは、背景を固定することによって視差効果を付けることができます。
固定ページまたは、投稿ページの編集画面で、画面左上［＋］をクリックし、ブロック挿入ツールを表示し、「カバー」ブロックを追加してください。
カバーブロックを追加すると、以下のように表示されるので、背景を画像にしたい場合は、「アップロード」（もしくは、メディアライブラリ）をクリックします。
「タイトルを入力…」のところに文字を入力していきます。
このままだとフォントサイズが36pとかなり大きいので、お好みで調整してください。
次に画面幅を全幅にします。
カバーブロックを選択した状態でブロックのメニューバーから、全幅を選びます。
次に背景画像を固定表示にします。
カバーブロックを選択した状態で、画面右側の「メディア設定」の「固定背景」をONの状態に切り替えてください。
さらにオーバーレイで、背景画像の上に被せる色を設定できます。これによって、文字を見やすくすることができます。
また、上に乗せた文字が見やすいように文字色を変更します。
カバーブロックを選択した状態で、画面右側「色」から「テキスト」をクリックし、文字色の設定をしてください。
また、カバーブロックの高さの設定もできます。
これで固定背景の出来上がりです。
が、ここでひとつ問題が生じます。
カバーブロックを全幅にすることによって、その上に載せているテキストなども全幅になってしまい、文章の始まりなどが左端に寄ってしまいます。短いテキストなら中央揃えで対応できますが、長い文章だとコンテンツ幅を設定した方がいいです。
ワードプレス管理画面左側「外観」＞「カスタマイズ」から、「追加CSS」をクリックし、CSSを追加します。
以下のコードを追加することで、カバーブロックの上のコンテンツの最大幅が1000pxに限定されます（お好みに応じてmax-widthの数値を調整してください）。
.wp-block-cover__inner-container{
max-width:1000px;
margin:0 auto;
}完成したものが以下になります。
ちなみに、カバーブロックを使って背景を固定できるのは、パソコンでの表示のときだけで、スマートフォンで見た場合は、固定されず普通にスクロールしますので、ご注意ください。
カバーブロックの使い方
あ
まとめ
このようにカバーブロックを使って、簡単にパララックス風のホームページを作ることができますので、良かったら使ってみていただければと思います。
