メディアクエリを組み込むレスポンシブサイトでは　パソコンでは表示する
コンテンツをスマートフォンやタブレットサイズの端末では　非表示とする

 

または　パソコンサイトとコンテンツは同類でも　スマートフォンサイズの
端末では別な記事を表示させるということもできます

 

大手サイトでもそんなサイトありますね

 

パソコンと　スマートフォンではサイトコンテンツはは同じながらも
記事列が極端に少ないとか

 

パソコンサイトとは異なる記事とかですね

 

スタイルシートのメディアクエリで指定すれば

 

一つのページを複数のスタイルで公開できますが今回は

 

スマートフォン　パソコンでの切り替えで解説します

 

スポンサーリンク

 

 

2015　0712更新
手順の工程に訂正がございます

---

 

ネット上では別なファイルを置いて　パソコン　スマートフォンタブレットとも
異なるページを読み込ませている
...なんてことも見聞きいたしましたが　面倒そうでやりたくもありません

 

しかし　シリウスでそんな構造のサイトを公開したい方は
全然面倒なく？

 

できますのでお試しください

 

関連情報として　画像を端末により切り替え表示
画像の表示非表示方法もサイト内にございますが　基本的には同じです

 

画像もという方は　記載が若干異なりますのでご確認ください
スマートフォン　パソコンサイトで画像を切り替え表示指定する

 

---

 

では進めましょう

 

反映スタイルをご確認ください

 

以下例　

 

パソコン画面サイズ表示されるテキストが表示されていますが
サイト幅をスマホサイズに狭めるとテキストが切り替わります

 

---

 

スマートフォンでは見えません　

シリウスパソコンコンテンツテキストッです

 

 

パソコンでは見えませんがスマートフォンサイズに狭めると表示されるテキスト
スマートフォンサイトコンテンツテキストです

 

---

 

例は　短文ですが　ページ全体を囲み　さらにもう一つのコンテンツを
下に置き　サイト全体を別な構成で作成し切り替えることも可能
大手サイトではよく見かける構成かと思います！

 

 

記事を切り換える　また非表示とするは　切り替え指定をするのではなく　

 

フォントをデバイスにより　非表示か　表示という　どちらかを
スタイルシートで指定しますが　　非表示の箇所に　別コンテンツを
表示させれば結果として切り替わるとなるのです

 

そのコンテンツのもととなる　フォント　文字を指定の対象物として
全体的にターゲットします

 

ターゲット　目標物を　

 

パソコン用として<pc>要素で囲みます

 

 

スマートフォン用として<spc>要素で囲みます

 

<pc>シリウスパソコンコンテンツ</pc>

 

<spc>スマートフォンサイトコンテンツ</spc>

 

 

 

pc spc要素は画像の切り替え　非　表示と同じものを使いますが
名称文字は任意ですので当サイトでは例として使うものです
固定ではりません

 

 

pc spc要素の指標範囲は？

 

パソコン　スマートフォン端末共通表示をする場合はコンテンは要素で
囲まなくともＯＫかと

 

 

囲む範囲は

 

pc要素は　
スマートフォンでは非表示とする範囲
スマートフォンでは表示されないということです

 

spc要素は　
スマートフォンでは表示するがパソコンでは非表示とする範囲

 

 

記事内に限らずフリースペースでも障害なく反映しますので
バナー広告等　パソコンサイトでは大きめの物でも　スマートフォンでは
小さいものに変えるとか？

 

表示させないとか？

 

いろんなことに適用できます

 

この作業は　通常の記事書く操作画面で行います

 

---

操作画面での改行設定

 

操作画面では　もう一つの指定作業があります

 

操作画面では　一番下に改行設定メニュ―が備えありますね

 

通常はＰタグ指定かと思われますが　ＢＲタグにチェックしてください
ここが大事なとこで　Ｐタグ指定の場合は小範囲の反映しかできないのです

 

事情はこちらでご確認ください
スマートフォン　ＰＣコンテンツ切り替え時のシリウス機能操作

 

ご注意

 

シリウス機能アイフォンサイト設定では
以下のコンテンツ　表示　非表示の要素指定をする
<pcc>
<ipc>　要素がございますが　メディアクエリレスポンシブコード内では
正常反映されません

 

<pcc>はスマートフォンでは表示されたまま

 

<ipc>はPCスマホでも表示されない

 

メディアクエリでこの記述は　障害となりますので使わないでください

 

---

 

 

では次

 

スタイルシートで指定しましょう

 

 

意外かもしれませんがＣＳＳ指定では
記事コンテンツテキストを要素指定するのではなく
フォントを　記事文字を非表示　表示とするよう記述します

 

 

 

最初はデフォルトスタイルシートの位置に進んでください
メディアクエリ内ではなく原本に記載します

 

 

パソコンから見たときスマートフォン記事は非表示とする指定記載ですが
非　表示の選択指定するにはfont;ですよ
ご確認ください

 

 

原本内に配置してください
spc {
font;
display: none;
}

 

で　ここは終了

 

---

次にメディアクエリ内に移動

 

 

メディアクエリ内に置く記載は二つ

 

パソコンで表示されるフォントは　非表示とする指定記載

 

pc {
font;
display: none;
}

 

 

スマートフォンでは表示する指定記載

 

spc {
font;
display: block;
}

 

 

 

スタイルシートへ3つ記載コードを配置すれば　完了です

 

後は　記事コンテンツを追加し　または見直し

 

pc ｓｐｃ要素で囲めば反映は確認できます

 

---

 

画像　記事コンテンツＣＳＳ指定コード記載例

 

念のため

 

間違いを防ぐため　効率よくするため

 

 

<pc>

 

<spc>は　画像　記事コンテンツとも同じものにすると
分離しないで済むので効率が良いです

 

<spc>を同じ指標にしておけば　要素囲みでどりらかのCss指定が
作動し反映されます

 

 

後あとの不便を回避するため
スタイルシート記載はどちらも同じ位置に配置しましょう

 

 

 

 

画像切り替えコードと記事コンテンツ切り換えコードの
配置を合わせた例

 

スタイルシート原本とは　もともとのスタイルシートをいってます

 

配置はどこでもよいのですが解り易いところがいいかな

 

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

 

2列入り
上がパソコンで非表示画像指定
下がパソコンでフォント非表示の指定

 

 

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

 

spc {
font;
display: none;
}

 

 

メディア」クエリ内
どこにおいても作動しますが並べておきましょう

 

ＰＣで画像非表示

 

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

 

スマホで画像表示
spc img {
background: url(../img/.jpg) no-repeat center;
display: block;
}

 

 

ＰＣでフォント非表示
pc {
font;
display: none;
}

 

スマホでフォント表示
spc {
font;
display: block;
}

 

全部で6つ配置で終了

 

 

何が何やらですか？

 

意味
display: none;非表示指定

 

display: block;表示する指定

 

覚えてください

 

 

---

 

複数のメディアクエリで異なるコンテンツを表示する

 

ここまでは　スマートフォン　パソコンの2例ですが

 

もう一つメディアクエリを追加する場合　ipadやタブレット

 

その際は<pc>　<spc>要素を別名で

 

スタイルシート指定も含めて追加してください

 

 

メディアクエリにも限界はあるかと思いますが
後一つか　二つは追加可能です

 

 

端末により記事コンテンツを切り替え表示する
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ