記事の作り方

スマホとPCで別のアフィリエイト画像を表示したい場合、picture要素が便利。

スマホとPCで別のアフィリエイト画像を表示

スマホとPCで、別々のアフィリエイトリンクの画像を表示させる方法です。

スマホ用に最適化されたサイズのアフィリエイトリンク画像を、PCで表示させると、レイアウト的にちょっとかっこ悪い…なんてことがありませんか?

例えばこんな感じの画像リンク。

・幅: 375px

・高さ: 312px

スマホ(モバイル)での表示を念頭においた画像サイズになっています。

スマホで見れば幅いっぱいに表示されるので良いのですが、PCからみると幅が余ってしまい、かっこ悪いですし、クリック率も下がります。

トノ君
パソコンで見ると右側が余って表示されるな。
タコ博士
ちょっとかっこ悪いよね。

picture要素を使ってレスポンシブ表示しよう!

そこで、PCとスマホで表示する画像を切り替えたいと思います。

いろんなやり方がありますが、html5.1の機能である、picture要素が非常に簡単でおすすめ。

CSSやJavaScriptを使用せずに、レスポンシブ(PCでもスマホでも柔軟に対応させる)な画像表示を実現します。

ソースコード

<picture>
  <source media="(min-width: 768px)" srcset="https://www29.a8.net/svt/bgt?aid=170117443492&wid=001&eno=01&mid=s00000016291001005000&mc=1">
  <img border="0" alt="" src="https://www20.a8.net/svt/bgt?aid=170117443492&wid=001&eno=01&mid=s00000016291001009000&mc=1">
</picture>

source media要素のsrcsetにPCで表示させたい画像を記述します。

img要素にスマホで表示させたい画像を記述してください。

 

<picture要素>の細かい解説です。面倒であれば読み飛ばしていただいて大丈夫です(汗

source要素は、各media属性の条件下で使用される画像のファイルを指定します。

今回の例では、条件はmedia="(min-width: 768px)"と記載。画面の最小幅を768pxに指定する、という意味です。

この条件に当てはまる場合、つまり画面の幅が768pxを上回るときがPCである、という条件になります。

srcsetにはPCで表示させたいアフィリエイト画像を指定します。

 

一方で、img要素には、デフォルトの画像ファイルを指定します。つまり、imgタグに指定した画像が、スマホで表示される画像となります。

ここで注意が必要なのが記述順です。img要素は必ず最後に記載する必要があります。

img要素の後に書かれたsource要素はすべて無視されるからです。またブラウザがpicture要素をサポートしていない場合は、img要素に指定された画像が表示されます。

トノ君
解説は読まなかったけど、ソースをコピペしたら出来たぞ!
タコ博士
まあそれでもOKだよ(笑)

実際にやってみる

実際に表示してみました。画面の幅が768px以下になった時、画像が切り替わります。

2つ画像を読み込む訳ではないので、モバイルの読み込み時に負担になることもありません。

まとめ

以上、html5の<picture>要素を使用したアフィリエイトリンク画像のレスポンシブ表示についてでした。

takotonoを最後までお読みいただきありがとうございました。

最新情報をチェックしよう!

LATEST新着記事