TOP

一カラムの場合はレスポンシブレイアウトでスマートフォン用のページを追加

ここで見える記事は、パソコン専用,,スマホでは専用のレイアウトで記事が
出現します。

でも、パソコン画面を狭めればスマホ扱いになるので切り替わりします...?

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

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

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

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

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


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


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

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

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

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



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

では、進めましょう

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

その地点を確認します

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

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

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


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

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

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

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



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

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

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

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


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

記事を判別要素で囲み

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

当サイトでは

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


どんな手順か?

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

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


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


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


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


スポンサーリンク



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

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


背景画像の色合いにより..フォントカラーと背景の一部カラーが
混同して認識しずらい場合は 半透明枠を配置すると良いです

コピーしてお使いください
背景画像の色合いにより..フォントカラーと背景の一部カラーが
混同して認識しずらい場合は、半透明枠を配置すると良いです

コピーしてお使いください
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">
記事です

</div>




ここの欄は、パソコンでは非表示、スマホでは確認できるエリア

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

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

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

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


スポンサーリンク


さて、今回のご案内の意味合いは パソコンサイトで
綺麗に構築した記事列 画像はレスポンシブされますので
含めません
記事列をスマートフォンで確認すればどの地点で
折り返されるかが確認できますね

その地点を確認します
次に 通常シリウスで記事書く画面で 
PC用の記事を書いたら巻末の記事の終了部分から 
多少スぺースあけて、もう一つの同じ記事を張り付けるかします


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



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

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

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

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


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

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

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

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

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

記事を判別要素で囲みます

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

当サイトでは

pc要素 spc要素で上下とも分別しております

ソースでご確認いただけます

ページ内指定

<pc>
パソコン用記事記事
</pc>



<spc>
スマートフォン用記事
</spc>


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


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

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

シリウスカスタマイズサイトトップ


背景画像の色合いにより フォントカラーと背景の一部カラーが
混同して認識しずらい場合は 半透明枠を配置すると良いです

コピーしてお使いください
<div style="border:solid 1px #0ACCFF;background: rgba(0, 0, 0, 0.4);;colo; padding:10px; border:1px solid #0ACCFF; border-radius:6px;">
記事です

</div>


一カラムのレスポンシブレイアウトはスマホ用のダブルページを追加関連解説
エントリーページ一カラムをブログスタイルへカスタマイズ
SIRIUS シリウスのエントリーページを一カラムとして背景を他ページと異なるよう切り替えて見るとブログみたいなスタイルにカスタマイズできますね
トップページのみ異なる背景でブログスタイルへカスタマイズ
SIRIUS シリウスのデフォルトでは 背景画像はすべて同じ画像が表示されますが CSS指定により切り替えすることで異なる表示が可能です カスタマイズ詳細はサイトで....
トップページのみ背景画像を切り替える 1カラム背景画像設定済み例
SIRIUS シリウスサイトでサイトすべての背景を画像で設定済みとしている場合でトップページのみ背景画像を異なる指定で表示するカスタマイズ方法のご案内です。
トップページのみ背景画像を切り替える 1カラムデフォルト背景例
SIRIUS シリウスのデフォルト背景は白台紙ですが トップページのみ背景を画像として表示することが出来ます カテゴリー以下はお堅いサイト トップページは海外サイト見たくカスタマイズできるかな?