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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下、解説に進みます

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

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

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

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

参照例

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

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

この下......

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

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

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

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

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

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

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

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

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

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

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

では説明に進みますね

作業詳細

class指定を行います（指定名称は任意）

ＨＴＭＬ確認　記述は記事項目を囲みます

<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;