シリウスに取り入れたレスポンシブ化構造では　パソコンでは表示する
画像でも　スマートフォンでは非表示とする

 

また　非表示とした配置箇所へ異なる画像を表示することも
ＣＳＳ指定により可能です

 

パソコンでは大きな画像でもスマートフォンではコンテンツは
同じながらもデザインを替えた異なる画像の表示

 

同一画像が綺麗に縦配置とか

 

ネット上にもそんなスタイルのサイトは多く存在しているので
お見かけしたことはあると理解します

 

お隣ページではパソコンサイトに同一サイズの画像を配置すれば
スマートフォンでも縮小された画像が縦配置で綺麗に並ぶので

 

それで良いのではと

 

解説しておりますがここではさらに一歩進んで

 

パソコン用画像

 

スマートフォン用画像として独自に切り換え表示

 

または　どちらかでは表示する　しないの選択指定

 

という解説になります

 

 

シリウスのデフォルトiPhoneサイト設定でのサイトでしたら

 

パソコン　スマートフォンサイトの画像の表示非表示は

 

pcc ｉｐｃ要素で画像を囲めば簡単に実行はできますが

 

シリウスアイフォンサイト非採用のテンプレーとで進める場合は　
初期作業をスタイルシートで設定を追加することになります

 

 

初期作業が完了すればシリウスアイフォンサイト機能同様の
表示切り換え手段が以降容易に行えますが当該ページでは
画像のみの指定方法です

 

記事コンテンツも同様に指定する際は

 

こちらに含めてございます　
ご確認ください
端末により記事コンテンツを切り替え表示する

 

 

---

 

 

 

切り替え表示　表示　非表示指定作業手順

 

今回は　classはしません...ｄｅｓｕ

 

 

記事内ＨＴＭＬ　通常のコンテンツ箇所に画像は位置

 

スタイルシートは3か所の読み込み判別欄を置きます
それだけ

 

 

パソコンで表示する画像　スマートフォンサイト　
ｉｐａｄ　タブレットでも反映されますのでスマートフォンの範囲には
収まりません　

 

反映はメディアクエリ指定する範囲で確認いただけます

 

取り付け例　
パソコンで確認できる画像で　スマートフォン用画像はパソコンの
画面サイズからは確認できませんが

 

ｐｃ画面を狭めると確認いただけます

 

 

例　１

 

 

 

 

 

例　２

 

 

 

 

上記　例　１　２　とパソコンから閲覧すると　二つの画像が確認できますが
どちらも　二つの画像を配置しており　パソコンの画面サイズと
スマートフォン用サイズでは異なる画像を切り替えて表示させています

 

 

 

また　表示する画像のみが表示され　非表示のコード配置スペースは
サイト上では無いものとして消滅しますので　隙間なくの表示となります

 

例　１　２とも　表示切替は同じですが　指定方法に違いがります

 

 

例　１は最新情報
スタイルシートで指定しておけば　後あと画像の切り替えは
記事カラムで指定できる方法です

 

 

 

例　２は　本掲載日より　一日前で少し面倒な手順
記事ＨＴＭＬと　スタイルシート指定欄に　切り替え画像追加を　
一度ごとに手動追加する

 

いつか飽きてしまう方法ですね

 

ですが　一度　記事にしたもので削除するのも　もったいないんで
スタイルシートの記載コードのみ巻末に残しております

 

追記
この手順はフリースペースでも有効です

 

---

 

では進めます

 

 

例１のスタイル

 

 

記事カラムの作業から進めます

 

記事内ＨＴＭＬに　パソコンで表示する画像コード
スマートフォンで表示する画像コードを二つ並べます

 

次にＣＳＳで読み込み分別指定するために要素で囲みます

 

要素内名称pc spcは任意の文字です

 

他名称でも構いません

 

 

<pc>画像コード</pc>

 

<spc>画像コード</ipc>

 

 

ｐｃで表示する　スマートフォンでは非表示
<pc><img src="<% pageDepth %>img/画像コード.a" style="width:295px;" alt="" /></pc>

 

ｐｃでは非表示　　スマートフォンでは表示する
<spc><img src="<% pageDepth %>img/画像コード.b" style="width:295px;" alt="" /></spc>
との指定分別として進めます

 

 

ページに複数の画像を置く際は　表示コード　非表示コードを
交互に並べても上下で分けてもどちらでもよいです

 

---

 

 

次は　スタイルシートを開きます

 

スタイルシート原本のどこかに？

 

 

スペースがあるとこに　パソコンでは非表示とする指定コードを配置します

 

当サイトは　基本レイアウトの上に置いてます

 

 

例
spc img {
background: url(../img/.jpg) no-repeat center;
display: none;
}

 

/* 基本レイアウト */

 

省略

 

 

パソコンでは非表示とする指定コードとは
スマートフォンでは表示させるコードを指します

 

 

spc img {
　background: url(../img/.jpg) no-repeat center;
　display: none;
}

 

 

パソコンでは非表示とする　display: none;で指定してます

 

 

パソコンで表示するための画像指定はしませんが表示されます
ので不要

 

 

 

画像は読み込み指定のためjpgで統一してください　

 

でもｐｎｇ画像で進めたい場合はjpgを書換えてください　
url(../img/.png)

 

 

---

 

次にメディクエリ内

 

ここでパソコンで表示される画像は非表示にします
display: none;で指定

 

訳わからんと言わないでよく　意味理解してください

 

この記述置かないと　スマートフォンでも表示されてしまうのです

 

どこか　スペース見つけておいてください

 

@media(max-width:670px){

 

どこか？
適当な箇所に配置

 

 

pc img {
background: url(../img/.jpg) no-repeat center;
display: none;
}

 

 

 

次です
スマートフォンで表示させたい画像を上記コードの下に置きます
display: block;で　表示するです

 

 

spc img {
　background: url(../img/.jpg) no-repeat center;
　display: block;
}

 

 

手順としては以上です

 

記述してコードは　原本に一つ

 

メディアクエリに　表示　非表示の指定が二つ

 

画像は他の要素がレスポンシブ化を実行してますので
記述コード内に％指定は不要です

 

 

スタイルシートで表示　非表示を指定しておけば　

 

サイト内どこでも　いくつでも　ランダムに

 

画像コードを配置して

 

pc　ｓｐｃ要素で囲えば

 

<pc>画像コード</pc>
<spc>画像コード</ipc>

 

切り換え表示は可能となります

 

 

---

 

過去検証

 

一日前の

 

例２　の表示例は　記事内ＨＴＭＬは同様ですが

 

読み込む指定に画像コードを直接入れ込んだのです

 

background: url(../img/画像コードb.) no-repeat center;

 

この方法でも切り換え　表示　非表示は正常に反映されますが

 

記事内に画像を追加後　さらにスタイルシートで同画像コードを
一度ごとに追加しなければならなかったのです

 

 

pc img {
background: url(../img/img/1a7771.jpg) no-repeat center;
background: url(../img/img/1a777１2.jpg.) no-repeat center;
background: url(../img/img/1a77713.jp.) no-repeat center;
display: none;
}

 

 

はっきりいって面倒でした

 

ま　頭が回らんかったのですね

 

 

では
画像サイズは　見た目もきれいに！　統一しましょうね

 

---

 

スポンサーリンク

 

 

 

スマートフォン　パソコンサイトで画像を切り替え表示指定する
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ