カバーブロックを極めてみる

WordPressのブロックエディターでカバーブロック

SSID/PW の入力不要

QRコードを読むだけでWi-Fi接続

百聞は一見にryなので、上のレイアウトがカバーブロックでの成果物。こゆデザインでは文字も含めた1枚の画像を貼れば簡単ですが、文字列が重要な意味を持つ場合にはテキスト要素として分離したいこともありますね。WordPressでもLP(ランディングページ)を作ったりする場合は必要になりがちです。

上のサンプルは992px以上、991px~576px、575px~320pxの3種類のレイアウトを設定しています。それぞれにオレンジの装飾画像の有無とテキスト要素の設定値を変更しています。PCでの閲覧なら今ご覧のブラウザの横幅を変えていくと幅に追従するので確認できます。

画面幅1920pxでの見え方(SS画像)

※閲覧者がフルHDの画面を使っている場合の見え方ですね。幅に余裕があるので2カラムにして右側にオレンジ色の装飾画像を見せています。

画面幅992pxでの見え方(SS画像)

※2カラム表示を出す最小幅を992pxとしています。前述の1920pxのレイアウトはこの992pxとの兼ね合いを考えながら文字サイズや配置を考えると良いでしょう。実際に992pxのデバイスは無いとは思いますが、PCブラウザなどは可変幅なので状況によってこの幅はあるかもしれません。全ての横幅対応は大変ですがiPad Proの横幅1024pxは意識した方が良いかも。

画面幅768pxでの見え方(SS画像)

※標準的なiPadの幅768pxの状態ですね。設定としては幅が991px以下になると1カラム仕様にしこれまで表示していた右側のカラム(オレンジ色の装飾画像)を非表示としています。その分横の領域が広がるので文字サイズや文字領域の上下の空きを考慮しますが、この先は横幅が577pxまで小さくなっても耐えられる文字要素配置を考慮すべきでしょう。

画面幅320pxでの見え方(SS画像)

※想定する最小幅(古い機種であるiPhone5の320px)の設定ですね。現在ではiPhone SEの375pxまでの対応でもいいかな?とは思います。

カバーブロックまとめ

前述でサンプルとして試作したカバーブロックは残念ながら完璧ではありません。最終アウトプットの不安定要素としては、閲覧者の独自環境であるブラウザ種別、画面横幅、フォント種、文字の縮尺率設定などで変化するので完全対応するのは厳しいものがあるからです。まぁでも、だからこそ面白いといえるのかもですね。