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

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

新サイトのご紹介

SIRIUSの大型バージョンアップ(ver1.5)によって、システム内部に様々な改良が加えられました。

それによって当サイトでご紹介している独自の機能拡張の一部が【新】テンプレートに標準で搭載されるようにもなってます。

反対に大型バージョンアップによって、これまでご紹介してきたTipsの中にはうまく作動しないものもあったりします。

よって今後このサイトの更新はストップすることにしました。
(サイトはしばらくは残しておきます)

これに伴い、新テンプレートに対応した新しい『SIRIUSの賢い使い方』サイトを公開しました。

さらに【新】SIRIUSテンプレートをベースにしたカスタムテンプレート【Volar】も公開中です。(※SIRIUS購入の特典になります)

【Volar】はこれまで私がご紹介してきたTipsが最初から組み込まれたカスタムテンプレートであり、当サイトではまだご紹介してない新機能も追加搭載してます。

新サイトの方もよろしくお願いします→SIRIUSでウェブサイト作成~ホームページ使いこなしのワザ~

※当サイトで紹介しているSIRIUS小技は順次新サイトに移植の予定です。

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

サンプル画像

 

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

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

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

 

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

 

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

 

ホント、便利ですよね。

 

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

 

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

 

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

 

キャプチャ画像

 

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

 

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

キャプチャ画像

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

キャプチャ画像

 

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

 

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

 

区切り画像

 

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

 

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

 

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

 

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

購入ページへ


てっぺん