webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

【WordPress】でPC・スマホ用画像を切り替える方法

PC・スマホで画像を変えたい場合のカスタマイズ♩

PCの画面幅が大きいことに対し、スマホ画面は縦長です。

PC用、スマホ用で表示させたい画像が違うことはよくあります。

PCとスマホで画像を切り替えるCSSカスタマイズ

 

今回は、そんな時に使うCSSとカスタマイズをお伝えします。

 

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

画像の切り替えを行うCSS

画像の切り替えと考えると、難しく聞こえるかもしれません。

ですが書くコードはシンプルです。

①PC用画像
②SP用画像

の2枚を用意します。

①PC用画像の場合

PCの時には表示
SPの時には非表示

②は逆です。

②SP用画像の場合

SPの時には表示
PCの時には非表示

“非表示”は、display: none;という記述を使います。

display(表示)がnone(なし)という意味でそのままです。

“表示”には、display: none;以外のものを使用します。

none以外という書き方をしたのは、displayには指定の仕方が多数あるからです。

block、inline、inline-block、table、flexなど、その他にも指定方法が多数あります。

画像(img)はデフォルトではdisplay: inlineインライン要素)です。

imgタグに対し、display:noneを使用した場合は、”表示”はdisplay:inlineで良いでしょう。

divタグはデフォルトがdisplay: block(ブロック要素)です。

divに対しての”表示”は、display: blockが正確です。

ただ、注意点もあります。

同divに対し、display: flexを指定している場合があります。

その際、display:noneの打ち消しは、display:flexにしないと横並びになりません。

このように、displayにはいろいろな指定がありますので、display: noneの打ち消しは、display: none以外という風になってしまいます。

ただ、displayについて書くと複雑になってしまう為、今回WordPressの画像を切り替えるという前提でコードをお伝えします。

画像の切り替えに使うclassを追加

まず、2枚の画像を用意します。

これに対してdisplayを使って切り替えていきましょう。

まず、両方の画像を順番に配置させます。

そして、この画像にclassを追加します。

PCの時のみ表示させる画像
画像ブロックを選択する

↑このように、画像のブロック(ブルーのラインが出る)を選択してください。

その状態で、「ブロック」メニューの「高度な設定」でPC用画像のclassを追加します。

画像にclassを追加する

ここに追加したclassが、どこに入るか見てみましょう。

プレビューを検証ツールで確認してみてください。

<figure>タグに、classが追加されています。

今回は、pc-imgというclass名にしましたが、何でもOKです。

そして、スマホ用画像にも、同様の流れで、sp-imgというclassを追加します。

CSSコード

では、CSSのコードを書いてみます。

.pc-img { display: inline-block; }
.sp-img { display: none; }
 
@media only screen and (max-width: 768px) {
    .pc-img { display: none; }
    .sp-img { display: inline-block; }
}

デフォルト状態で、pc-imgを表示、sp-imgは非表示にしておき、ウインドウサイズが768px以下になった場合に、pc-imgは非表示、sp-imgを表示させるような書き方です。

テーマの「追加CSS」を書く箇所に追加してください。

今回、<figure>タグなので、表示にはdisplay: inline-blockを使ってみました。

ここでは説明を省略しますが、<figure>は<blockquote>要素や<body>要素と同じ“セクショニング・ルート”というカテゴリに属しています。

シンプルに書くと、divやp、imgとは違い、固有のアウトラインを持っています。

そもそもブロック要素、インライン要素等のデフォルト設定がないのです。

ですので、必要に応じて、inline、block等、その他の選択肢も考えられます。

inline-blockは、inlineとblockの要素を併せ持つ性質で便利です。

ここで出てくる、768という数字は、PC←→タブレット・スマホで切り替えを行う場合によく使われる数字です。

スマホのみに適用させたい場合は、この数字を小さくしてください。

ウインドウの横幅です。

注意:テーマによっては、上記のCSSが効かない可能性も考えられます。

その場合は、最後に「!important」を追加してください。

.pc-img { display: inline-block!important; }
.sp-img { display: none!important; }
 
@media only screen and (max-width: 768px) {
    .pc-img { display: none!important; }
    .sp-img { display: inline-block!important; }
}

「!important」は最優先にする記述ですが、使いすぎると打ち消しが大変になってくるので、極力使わない方が無難だと考えています。

使わなくても効くようでしたら使わなくてOKです。

実例を貼っておきますので、切り替えてみてください↓Webデザイナー

「PCのみ表示」の画像
「SPのみ表示」の画像

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン コーディング コピペ用コード 【WordPress】でPC・スマホ用画像を切り替える方法

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。