TOP

デバイスサイズでサイト構成を切り替える

ネット閲覧のデバイス割合がPCをスマートフォンが上回るという世の情勢.....

 

更にいえば、グーグル検索エンジンのスマートフォン対応サイトを優遇するという
おまけまで付随して...致しかたなく...
レスポンシブレイアウトを取り入れた、もしくはTPを切り替えた事情は多くの方が
面倒な作業を伴いながら実行されたことでしょう....

 

しかし、スマートフォン、パソコンデバイスに最適といわれるレスポンシブレイアウトも
何かと多くの疑問が湧き出てきたのです

 

まず、PCでは整列する、うまくきれいに整列する記事行もスマートフォンでは、画面が
狭められるので意図しない地点で折り返される

 

記事列が途中で折り返されることは、まれに言葉の意味合いを変えてしまうこともある
読み手からみればレスポンシブ構造などと理解しないわけですので、記事編集が
なっとらんと評価されているかもしれない.....?

 

画像の縮小については不満もないのですが、記事行の折り返しは、当初からの不快な
印象....文字を小さくすれば対処できるのではとの意見もあるかと思いますが、
認識しずらくなりますね(老眼にはきつい?)

 

レスポンシブレイアウトは、ワールドプレス、WIX、その他多くのブログでも当然ながら
取り入れていることから,、それはそれでいたしかたない事なのだろう..が当初の理解

 

さて、そんなレスポンシブ全盛のサイト群ですが、大手サイト、ヤフーなどは手法が
なぜか異なるのですね

 

レスポンシブレイアウトを取り入れて,....いない...のですね

 

大手の手法は、PC、スマートフォン、で別構成のサイトを閲覧デバイスにより
振り分けて表示させる仕組み...

 

 

確かに閲覧する側に回れば、ブログならレスポンシブレイアウトでも記事読みですので
それはそれでよいでしょう

 

しかし、アフィリエイトや物販、ホームページなら...記事行の折り返しは、なんか
いまいち...?

 

 

スマートフォン閲覧ならそれに合わせた記事行、レイアウトで表示できないかな~が、
私の願い...

 

ま、手動が基本のHTML構築サイトなら、PCとスマートフォン用のファイルを二つ
作成して分離読み込みさせれば対応はできますね
2重ファイルが基本...しかし2度手間で時間浪費、いや過労度合いを考えればあまり
やりたくない作業

 

 

さて,...
シリウス機能、iphone設定では、PCとスマートフォンで項目切り替えができる仕様が
備えございます (詳細はシリウス解説でご確認ください)

 

2重ファイルを用いなくても、記事内の置物をスマートフォン画面では非表示にすることが
可能というもの...記事列をデバイスに合わせて二つ用意すれば分別表示も可能)

 

ですが、この機能はiphone設定で使えるもので、レスポンシブTPでは使えないのですね

 

でも、カスタマズすることで対応ができるようになったのです

 

以下、解説に進みます

 


 

レスポンシブTPに切り替え表示、非表示の仕組みを導入する

 

レスポンシブ構造にPCとスマートフォン切り替え機能?とまで大げさではございませんが
CSS指示記述を追加すれば、切り替え表示が可能となります

 

やりようでは、ヤフーサイトなどと同じような大幅な切り替えが可能です
しかし、最初からサイト全体をいきなり大幅に変えようとは思わず、必要性のある
ページだけで対応されてください
(手違い致しますと面倒....導入は自己判断でお願いします)

 

 

作業に多少のクラス指定とCSS追加は含まれます

 


 

参照例

 

以下にパソコンで表示される項目とスマートフォンの画面サイズ、シリウス基本TPの
レスポンシブ作動数値 640pxに合わせて配置してます

 

PC画面を狭めて切り替わりをご確認ください

 

この下......

 

パソコン非表示、スマホで表示

ここは、 640px以下の画面サイズで確認できる範囲です

 

 

パソコンで表示 スマホで非表示

パソコン画面では表示されますが、画面サイズ640px以下では、
消え去る範囲です

 

 

切り替わりが確認できましたでしょうか?

 

この仕組みを使えば、パソコンで表示の記事で、スマートフォンでは省くとか
スマートフォンでは、新たな記事を別挿入とかができるのですね

 

また、レスポンシブの大きな欠点.....記事の折り返し
パソコンできれいに治めても、レスポンシブでt自動折り返しが行われると
なんか...なんか...?

 

で、参考なのですが、記事はパソコン用に一度は整列しといて、コピーして
下部にスマートフォンの記事列で構成しなおして再配列という方法もございます

 

パソコン画面用の記事列はスマートフォンでは非表示となり、スマートフォン用に
整列した記事列を表示させるということですね

 

スマートフォン画面でパソコン記事列の折り返しを確認し、その地点で記事止めして
再構成(内容変更もできますね)

 

記事をすべて分別としなくとも、記事段ごとに複数ランダムで分類することも可能
画像も切り替えできます

 

では説明に進みますね

 


 

作業詳細

 

class指定を行います(指定名称は任意)

 

HTML確認 記述は記事項目を囲みます

 

<div class="pcoff">パソコン非表示、スマホで表示
ここは、 640px以下の画面サイズで確認できる範囲です
例画像コード<img src="<% pageDepth %>img/a1380_001165.jpg" style="width:320px;" alt="" />

 

</div>

 

<div class="pcon"> パソコンで表示 スマホで非表示
パソコン画面では表示されますが、画面サイズ640px以下では、
消え去る範囲です
例画像コード<img src="<% pageDepth %>img/1agggggggg.png" style="width:320px;" alt="" />

 

</div>

 

 

スタイルシートでメディアコードを追加します

 

widthの数値は、シリウス基本レスポンシブ発動数値640で記載しておりますが、
600指定値にしている例も見られますので任意で書き換えても使えます

 

 

@media screen and (min-width: 641px) and (max-width: 2000px) {

 

.pcoff{

 

display: none;

 

}
}

 

 

@media screen and (min-width: 641px) and (max-width: 2000px) {

 

.pcon{
display: block;

 

}
}

 

 

 

@media screen and (min-width: 100px) and (max-width: 640px) {

 

.pcon{
display: none;

 

}
}

 

 

ここまでCSSを追加すれば、いずれのページでも作動は確認いただけるはずです

 

全てのページでとは言いませんが、特にスマートフォン閲覧の読者向けに特化したい
事情の際、ご採用を検討してみてはいかがでしょう....

 

ここまでは、記事内での考え方ですが、以外のカスタマイズについては巻末記事で
ご覧ください

 

 

 

パソコンとスマートフォンでコンテンツ構成を切り替えるCSS指定
トップページ

 

更新履歴

2017/07/11 02:51:11 | パソコンとスマートフォンでコンテンツ構成を切り替えるCSS指定
シリウスサイトへ二つの画像を横並び配置をしている、または広告を横連に並べている...例で、デフォルト機能にあるレイアウト枠を使用している場合のこと....レスポンシブ作動で気にかかることがございます...レスポンシブ反応というなら...確か...
2017/03/09 01:34:09 | パソコンとスマートフォンでコンテンツ構成を切り替えるCSS指定
親ページでは、記事行や画像をPC、スマートフォンで切り替える説明でしたが、ここでは以外の箇所、シリウスのHTMLテンプレートを操作してスマートフォンレイアウトを構築するにはについての(例)お話しで進めてまいります当解説は、親サイトの延長解説...