ブログのトップページを開いたとき、いちばん上にどーんと出てくる大きな見せ場。あれを「ヒーロー」と呼びます。今回は、このヒーローを画面いっぱいに、しかも文字をきれいに重ねて作る方法を紹介します。実はこれ、私は最初にCSSで作ろうとして、見事に消耗しました。その失敗と、あっけない正解の話です。
そもそもヒーローって何?
ヒーローとは、トップページの先頭にある、大きな画像とキャッチコピーのエリアのことです。お店でいえば、入り口の看板や、ショーウィンドウのようなもの。ここで「どんなサイトか」「どんな雰囲気か」が、一瞬で伝わります。サイトの第一印象を決める、いちばん大事な場所です。
だからこそ、画面いっぱいに気持ちよく広げて、写真の上にキャッチコピーをのせたい。そう思って、私はまずCSSで作ろうとしました。これが、つまずきの始まりでした。
最初、私はCSSで作ろうとして消耗した
やりたかったことは3つでした。背景の画像を画面の端まで広げる。その上に文字を重ねる。そして、高さをいい感じに保つ。どれも、CSSで一つずつ書けばできそうに思えました。
ところが、ここから沼が始まります。画面いっぱいに広げようと width:100vw と書くと、今度はテーマが「中身は中央に寄せる」と強く命令していて、押し返される。仕方なく !important という”最終手段”の呪文まで持ち出して、ようやく広がる。文字を画像に重ねようとすれば、画像と文字の高さがバラバラで、画面の幅を変えるたびにズレる…。
気づけば、たった1つのヒーローのために、CSSと格闘して時間が溶けていました。「これ、何かおかしいぞ」と感じたら、たいてい、もっと簡単な道があるサインです。
カバーブロックが、ぜんぶ解決してくれた
そこで、ためしにWordPressの「カバーブロック」を使ってみました。すると、あれだけ苦労したことが、一瞬で片づいたんです。
画面いっぱいに広げるのは、「全幅」ボタンを押すだけ。写真の上に文字をのせるのも、最初からそういう作りなので、重ねる苦労がそもそもありません。写真を少し暗くして文字を読みやすくする「霞(オーバーレイ)」も、スライダーひとつ。高さも、中身に合わせて自動でいい感じに収まります。
つまりカバーブロックは、「全幅・文字の重ね・霞・高さ調整」を、ぜんぶ最初から代わりにやってくれる箱なんです。私がCSSで一生懸命やろうとしていたことは、全部この箱の中に、最初から用意されていました。
CSSは一行も書いていません。あの !important との戦いは、いったい何だったのか…と、ちょっと笑ってしまいました。
カバーブロックでヒーローを作る手順
作り方は、たったこれだけです。
- ブロックを追加するところで「カバー」を選ぶ
- 背景にしたい画像を選ぶ
- 上のツールバーで配置を「全幅」にする
- 設定パネルの「オーバーレイ」で、霞の濃さを好みに調整する
- カバーの中に、見出しやボタンを入れる
これで、画面いっぱいの背景に、文字がのったヒーローの完成です。霞の濃さは、文字が読みにくければ濃く、写真をもっと見せたければ薄く、その場で調整できます。
スマホ対策は「焦点」だけ覚えればいい
ひとつだけ、スマホで気をつけたいことがあります。横長の写真をスマホ(縦長の画面)で表示すると、左右が切り取られて、見せたい部分が見切れることがあるんです。
これも、CSSはいりません。設定パネルにある「焦点(フォーカルポイント)」の丸い点を、見せたい場所にドラッグするだけ。たとえば右にコーヒーカップがある写真なら、点をそこに合わせると、スマホで切り取られても、ちゃんとカップが残ります。
写真を額縁に入れるとき、「ここだけは絶対に見せたい」という一点にピンを刺すイメージです。そのピンを中心に、はみ出る分が切り取られていきます。スマホで見え方が気になったら、まずこの点を動かしてみてください。
まとめ:凝る前に、まずブロックに任せる
画面いっぱいのヒーローは、CSSで一から作ろうとすると、全幅・重ね・高さで、あっという間に沼にはまります。でも、カバーブロックを使えば、その全部をWordPressが代わりにやってくれます。
私の教訓はこれです。凝ったCSSを書く前に、まず「これをやってくれるブロックはないかな?」と探してみる。たいていの「よくやりたいこと」は、ブロックの中にもう用意されています。CSSは、ブロックでどうしてもできないときの、最後の手段でいいんです。肩の力を抜いて、まずはブロックに頼ってみてくださいね。