WordPress個別サポート

多くのテーマではサイトのトップページにヘッダー画像が表示されますが、PCとスマホでは画面の縦横比が違うのでヘッダー画像を切り替えたいこともあります。次のようなイメージです。

PCとスマホでヘッダー画像を変えたい

PCとスマホでヘッダー画像を変えたい

一般的にWordPressサイトのヘッダー画像は横長ですが、スマホ画面は縦長なので、正方形に近いくらいの画像の方が無難です。何種類かの画像を準備して、端末に応じて自動で切り替われば便利です。

その方法はいくつかありますが、典型的なのはスマホ表示のときはPC用のヘッダー画像を消して、スマホ用のヘッダー画像を表示するCSSを書く方法です。以下に例を紹介します。

スポンサーリンク

画像を切り替える仕組み

使用中のテーマを問わず、ヘッダー画像はdivタグなど何らかのブロックで囲まれているのが一般的です。BizVektorの例では、ヘッダー画像はtopMainBnrというブロックで囲まれています。

ヘッダー画像のブロック(BizVektorの例)

ヘッダー画像のブロック(BizVektorの例)

ここからはアイデア次第ですが、PCとスマホで切り替える場合は、端末幅が狭くなったらtopMainBnrのPC用ヘッダー画像を消して、代わりにスマホ用のヘッダー画像を追加すればよいかもと思い付きます。イメージは次のようになります。

PC画像を消してスマホ用画像を表示するイメージ

PC画像を消してスマホ用画像を表示するイメージ

このように動作させるために擬似要素「:after」を使っています。:after擬似要素にスマホ用のヘッダー画像を定義しておいて、端末の幅で表示/非表示を切り替える仕組みです。

主なテーマのCSS例

主なテーマについてPCとスマホでヘッダー画像を切り替える具体的なCSSを紹介します。ポイントは、スマホ表示のときにPC用のヘッダー画像を消して、:after擬似要素でスマホ用のヘッダー画像を表示することです。

BizVektorの例

BizVektorのCSSの例を紹介します。「★画像★」はメディアライブラリにアップロードした画像のURLを指定してください。

/* スマホのときのヘッダー画像 */
@media (max-width: 480px) {
    /* PC用のヘッダー画像を消す */
    #topMainBnr #topMainBnrFrame {
        display: none;
    }

    /* スマホ用のヘッダー画像を表示 */
    #topMainBnr:after {
        background: url(http://★画像★);
        background-size: 100% auto;
        content: '';
        display: block;
        height: 320px;
    }
}

表示結果は次のようになります。

PCとスマホのヘッダー画像

PCとスマホのヘッダー画像

BizVektorのヘッダー画像にはbiz_vektor_header_image_frontというフィルターフックが設定されているので、CSSを使わずにPHPでヘッダー画像を切り替えることもできます。

賢威の例

賢威のCSSの例は次のようになります。

/* スマホのときのヘッダー画像 */
@media (max-width: 480px) {
    /* PC用のヘッダー画像を消す */
    .main-image .main-image-in {
        display: none;
    }

    /* スマホ用のヘッダー画像を表示 */
    .main-image:after {
        background: url(http://★画像★);
        background-size: 100% auto;
        content: '';
        display: block;
        height: 320px;
    }
}

表示結果は次のようになります。

PCとスマホのヘッダー画像(賢威)

PCとスマホのヘッダー画像(賢威)

STINGER PLUS+の例

STINGER PLUS+のCSSの例は次のようになります。

/* スマホのときのヘッダー画像 */
@media (max-width: 480px) {
    /* PC用のヘッダー画像を消す */
    #gazou-wide img {
        display: none;
    }

    /* スマホ用のヘッダー画像を表示 */
    #gazou-wide:after {
        background: url(http://★画像★);
        background-size: 100% auto;
        content: '';
        display: block;
        height: 320px;
    }
}

表示結果は次のようになります。

PCとスマホのヘッダー画像(STINGER PLUS+)

PCとスマホのヘッダー画像(STINGER PLUS+)

まとめ

このように:after擬似要素を使うと、PC/スマホのヘッダー画像を切り替えることができます。もちろん、こうした擬似要素を使わなくても実現できますが、1つの参考としてご活用ください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート