過去の記事で、ヘッダー画像を作成してトップページに表示させるという内容を書きました！
しかし、この画像には一つ問題が・・・。スマホ版で表示すると、
ヘッダー画像の文字が小さい！！！みえない！！！
ということで、タブレット、スマホでもヘッダー画像が見やすいような工夫をしていきます！
目次
- CSSでブレイクポイントを確認する
- 画像を3枚用意する
- 固定ページを編集する
- 画像の表示タイミングを調整する
- 画像に、「追加CSSクラス」をつける
- style.cssに制御を記述
- まとめ
CSSでブレイクポイントを確認する
まず、スタイルシートを確認し、自分の使用しているテーマのブレイクポイントを確認します。
ブレイクポイントというのは、簡単に言えばデザインが変わる境目のことです。
大体のWebサイトはレスポンシブ対応されており、Webサイトを閲覧しているときのデバイスの表示幅を読み取り、その幅に応じてスタイルを変えるということをしています。
- 幅が480px以下・・・画像Aを表示する
- 幅が480pxより大きく、780px以下・・・画像Bを表示する
- 幅が780pxより大きい・・・画像Cを表示する
といった具合に画像の表示や文字の大きさを、Webサイトの表示幅によって変えているのです。この場合、ブレイクポイントは480pxと780pxということになります。
Twenty Twenty-Oneの場合はどうでしょう？
スタイルシートをざっくり見た感じ、481pxと821pxといった感じでした。おそらく、こんな感じでしょう。
- 幅が481px以下・・・スマホ用
- 幅が481pxより大きく、821px以下・・・タブレット用
- 幅が821pxより大きい・・・PC用
画像を3枚用意する
ブレイクポイントを確認したことによって、大きく3つのデザインが必要なことがわかりました。3つそれぞれ用にヘッダー画像を作ってみました。（PC用は現在表示されているもの）
PCに比べて表示範囲が狭いので、文字も少なくしてみました。
固定ページを編集する
これらの画像を、ホームに使用している固定ページに追加します。
ブロック：画像
スタイル：デフォルト
配置：全幅
え・・・全幅はでかくない？と思った方、大丈夫です。あとで確認します。
画像の表示タイミングを調整する
画像を３つ配置し終わりましたね。しかしこのままでは、どのデバイスで表示しても３つすべての画像が表示されてしまいます。本来ならば、
- 幅が481px以下・・・スマホ用を表示
- 幅が481pxより大きく、821px以下・・・タブレット用を表示
- 幅が821pxより大きい・・・PC用を表示
としたいですね。そこで、ちょっとした細工をします。
１．画像に、「追加CSSクラス」をつける
追加CSSクラスを、3つの画像すべてに入れます。今回は下のようにします。
- スマホ用 ⇒ img-header-smartphone
- タブレット用 ⇒ img-header-tablet
- PC用 ⇒ img-header-pc
２．style.cssに制御を記述
下の記述をコピペしてください。（カスタマイズの追加CSSでも、子テーマのCSSでも可）
/* スマホ */
.img-header-smartphone {
display: block;
}
.img-header-tablet {
display: none;
}
.img-header-pc {
display: none;
}
/* タブレット */
@media only screen and (min-width: 482px) {
.img-header-smartphone {
display: none;
}
.img-header-tablet {
display: block;
}
.img-header-pc {
display: none;
}
}
/* PC */
@media only screen and (min-width: 822px) {
.img-header-smartphone {
display: none;
}
.img-header-tablet {
display: none;
}
.img-header-pc {
display: block;
}
}
上のコードを簡単に解説すると、（大きいほうから見て）822pxまではPC用を表示する、482pxまではタブレット用を表示する、それ以外はスマホ用を表示するという内容です！
このソースを書くと、以下のようになります！
固定ページ編集画面でこれらの画像を全幅設定にしましたが、タブレットやスマホ表示にするとちょうどよく見えますね！
まとめ
正直、有料で優良な（くだらないw）WordPressテーマだと、これぐらいのレスポンシブ対応は勝手にやってくていて、画像を選ぶだけでよいものもあります。Twenty Twenty-Oneはその機能はなさそうだったので、自分でヘッダー画像セットする場合はレスポンシブ対応を心がけてみてください！
また、スマホでデモサイトを表示したことある方はわかったと思いますが、ピックアップ記事のところも悲惨なことになっているので（笑）次回の記事で直していきたいと思います！
デモサイト↓↓
Twenty Twenty-One デモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
