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

一カラムでナイスなトップページを構築したとしてもスマートフォンで
サイトを確認すると　記事列が意図しない地点で折り返されてしまいます

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

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

自動編集機能でもあればよいのですが　そこまでは期待できないですね


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

２カラムの場合は　もし記事列が横長で意図しない地点でのおり返しが
確認できるようでしたら

今回の方法をお試しください


さて　今回のご案内の意味合いは　パソコンサイトで綺麗に配列した
記事列の対応法ですが

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



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


その地点を確認します

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

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

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


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

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

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

スマートフォン端末ではスマートフォンの下面に合わせた
記事レイアウトを表示させるのです



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

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

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

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


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

記事を判別要素で囲み

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

当サイトでは

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

手順は？

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

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


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


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


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


スポンサーリンク



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

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