一カラムでナイスな記事流れで表せたとしても、スマートフォンで
確認すると記事列が意図しない地点で折り返されてしまいます..

一カラムはサイドメニューが、無いので記事列が長々となリますが
スマートフォン画面の横幅に入りきれないが事情です

無理くり、記事列そのままで折り返しを防ぐならフォントを小さくするしか
ありません　

自動編集機能でもあればよいのですが、そこまでは対応されておりません

３カラムですとフォントサイズ１１ＰＸ程度で折り返させずスマホに
表示されます

２カラムの場合で　もし記事列が横長で意図しない地点でのおり返しが
確認できるようでしたら、今回の方法をお試しください


さて、今回のご案内の意味合いは、パソコンサイトで綺麗に配列した
記事列をスマートフォンではどのように表すか？

解説の意味合いは、スマートフォン用の記事流れで、もうひとつの
記事をページ内に置いて、デバイス別に切り替わり合わせ表示させる...です

ただし、この作業は余計な記事構築を2度することになるので、余り
お勧めする手法でもございません

ただ、大手サイトなどは切り替え表示としては活用している例が多くみられる..
ま、販売サイトなどを作る際は、どちらでも適合表示させる必要もございますね
そんな事情の場合は、お考え下さい

---

画像は、レスポンシブ可されますのでここでは含めません

では、進めましょう

記事列をスマートフォンで確認すればどの地点で折り返されるかが
確認できますね

その地点を確認します

次に通常シリウスで記事を書く画面で、PC用の記事を書いたら　

巻末の記事の終了部分から、多少スぺースあけて　
もう一つの同じ記事を張り付けます

そして、巻末の記事列をスマートフォンで確認された折り返し地点に
合わせて再編集するのです


つまり、一つのページにパソコン用の記事

スマートフォン用の記事を二つ置くことになるのです

そして、パソコンではパソコン用ぺージを表示

スマートフォン端末ではスマートフォンの画面に合わせた
記事列でを表示させるのです



記事構成は同記事でなくてもよいのです

多少スマートフォン用に書き換える

又は記事の追加が合ってもOK

しかし、グーグルさんの評価もありますので余りのコンテンツ違いは
NGです


ＰＣとスマートフォンを閲覧画面サイズで振り分けるには

記事を判別要素で囲み

メディアクエリ内で　切り替え要素で指定する事になり
スタイルシートでの作業となります

当サイトでは

pc要素　spc要素で上下とも分別しており
構成はソースでご確認いただけます


どんな手順か？

ページ内指定は以下のように指定します

<pc>
パソコン用記事全体をpc要素で囲む　
</pc>


<spc>
スマートフォン用記事全体を囲む
</spc>


ここで大変申し訳ありませんが、記事列の囲み手順おおよびスタイルシートでの
指定手順は　同コンテンツが記載されておりますので
以下ページでご確認ください
端末により記事コンテンツを切り替え表示する


ご注意ごと
記事の要素囲みについて
パソコンサイトとスマートフォンサイトの2段階表示の場合は正常ですが
もう一つ　タブレット端末へのメディアクエリ指定を3段階にする場合は
メディアクエリ内に指定を追加してください


スポンサーリンク



ページトップ
一カラムのレスポンシブレイアウトはスマホ用のダブルページを追加

関連メニュー
トップページのみ異なる背景でブログスタイルへカスタマイズ
トップページのみ背景画像を切り替える　1カラム背景画像設定済み例
トップページのみ背景画像を切り替える　1カラムデフォルト背景例
エントリーページ一カラムをブログスタイルへカスタマイズ
シリウスカスタマイズ