SIRIUS(シリウス)で表示機器の横幅に応じて画像を自動で切り替える【レスポンシブテンプレート限定】

Tips_機能の拡張 Tips_プチ裏ワザ Tips_iPhone Tips_その他 購入者特典 購入者専用ページ

表示機器の横幅に応じて画像を自動で切り替える方法【レスポンシブテンプレート限定】

サンプル画像

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

この記事はレスポンシブテンプレート限定の内容です。

レスポンシブ(デザイン)テンプレートは、
表示機器(PCやスマホなど)の画面サイズに合わせて
自動的に最適なレイアウトにしてくれるという特徴があります。

 

たとえば画面幅の大きいPCで見た場合は、
サイドメニューを含めたすべてのコンテンツが見れるようになっている一方、
画面幅の狭いiPhone(スマホ)で見た場合は
サイドメニューは非表示になるかもしくは最下段に移動するなどして
重要なコンテンツを最優先に表示させるといった仕組みですね。

 

画像に関しても、iPhone(スマホ)で見た場合は
自動的に画面幅にぴったり収まるように
自動リサイズ(縮小)してくれたりもします。

 

ホント、便利ですよね。

 

ところが、この画像の自動縮小機能が
時にはアダになる場合もあるってことです。

 

どういうことかというと、
PC画面で見ていた時はいろんな情報が一度に見られてわかりやすかった画像も
iPhone(スマホ)で見たら画像が縮小されたおかげで
何が書いてあるのかさっぱりわからなかったというケースです。

 

たとえば下の画像ですが。
PCで見てる方は何が書いてあるか簡単に判別できるでしょう。

 

キャプチャ画像

 

でもこれをiPhone(スマホ)で見ると…画像が縮小されちゃって
わかりずらくなってるかと思います。

 

(※iPhone・スマホで見た時のキャプチャ画像↓です)

キャプチャ画像

 

よく見ればわからないこともないですけど、全体的にちっちゃくなってしまったため
目を凝らしてよくよく見ないとわかりずらいという印象がありますでしょ。

 

上のはホンの一例でしたが、文字が多い画像だったなら
画像が縮小されるスマホではホントに読めなくなっちゃいますよ。

 

そういったページはサイト訪問者にストレスを与えちゃいます。

 

気楽に見てもらえないサイトは無意識に敬遠されがちです。

 

こんな時はPC用とiPhone(スマホ)用で表示する画像を変えてあげると
サイト訪問者に視覚的に訴えやすいですね。

 

(わかりにくいからと言って)すぐに離脱させずに
サイト滞在時間を伸ばす効果も期待できそうです。

 

ちなみにこちら↓は画像の自動振り分け設定を済ませたサイトでのキャプチャ画像です。

 

iPhone(スマホ)表示時には、
テキストも大きめでペットボトルの画像も大きめの代替画像
自動で表示されるようになっています。

 

何が書いてあるかすぐにわかりますでしょ。

 

キャプチャ画像

 

これが通常のSIRIUS(シリウス)サイトなら
<pcc>~</pcc>(PCのみで表示)<ipc>~</ipc>(スマホのみで表示)といった
独自分岐タグを使って簡単に表示画像を振り分けることができます。

 

しかしレスポンシブテンプレートの場合は上の独自タグが使えないため、
そのままでは画像の自動振り分けができません。

 

区切り画像

 

スマホでの閲覧割合が増えてる昨今、
少しでもアフィリリンクを踏んでもらおうと思ったら
画像1枚だって疎かにはできません。

 

せっかくのチャンスを失わないためにも
画像の自動振り分け機能は覚えておいて損はないです。

 

もちろんすべての画像に必要なわけではなく、
画像切り替えが必要な箇所だけの設定で済みます。

 

申し訳ございません。
この記事の全文は当サイトからのシリウス購入者のみ閲覧可能となっております。

購入ページへ


てっぺん