TOP

リキッドレイアウト例 シリウスのカスタマイズ

 

シリウスでのレスポンシブウェブデザイン構造追加によるカスタマイズを
実行する際リキッドレイアウトが発動する指定値はどの地点か?

 

デバイスにより指定値でどのように表示されるか?

 

また レスポンシブウェブデザイン構造を2重配置で複数のデバイスに
対応表示する手順

 

 

以上を説明します

 

 

 

各端末により レスポンシブ化はメディアクエリで数値指定しますが

 

その位置決めを理解すれば すべてのデバイスに対応可能となります 

 

けれど全てに対応させるとなると原本ページがすべてに対応すると
いう訳でもなくデバイス用に調整も必要ですし作業労力も膨大な時間も
費やすことになります

 

更新だけでも大変ですね

 

それ以前に 全てのデバイスを所持していないもので 確認が
未確認どまりで説明しきれないという事情もあります???

 

パソコン iPhone ipad 所有

 

そんなことで 大まかな範囲での説明としますが 複数のデバイスを
指定したい方は 複合化の説明を含めておりますので
自己努力でお進みください

 

スポンサーリンク

 

 

 


 

以下の解説は私の環境での解説です

 

スマートフォンはiPhone6
ipadは ?です サイズは理解できませんがやや普通かな?

 

 

ネット上ではスマートフォン対応としてのメディアクエリ指定値は640pxと
説明がされてはおりますが

 

@media(max-width:640px){

 

で指定した場合

 

iPhone 縦画面では正常反映

 

iPhone6 横画面では反映されません
パソコンサイトで表示される状況です

 

 

iPhone6の場合
横画面では数値指定値が小さ過ぎるのです

 

ただし 横画面の小さなiPhoneでしたら反映されるかもしれません?

 

 


 

数値を670pxに変更

 

@media(max-width:670px){

 

iPhone6 この数値で縦横画面とも正常に反映されました

 

 

ipadでは 縦横とも未反映です

 

 


 

メディアクエリ指定値を698pxにしてみました

 

@media(max-width:698px){

 

iPhone6 縦横とも正常に表示

 

ipadでは 縦は正常反映されましたが 横では反映されません

 

 

 

縦はレスポンシブ化されたリキッドレイアウトです

 

横画面では リキッドレイアウト以前のパソコンサイトですが
認識状況は如何でしょうか?

 

横はパソコンサイトが画面サイズにちょうど収まり
サイトの認識もなんら問題なし

 

私はこの環境で閲覧状況は充分かと判断しますが?

 

 

基本的にレスポンシブ化されたリキッドレイアウトは 
スマートフォンの画面サイズでの閲覧状況にあてはめたも

 

パソコンサイトを画面の小さなスマートフォンでも充分に認識出来る
画面として対応されたもの

 

とすれば
スマートフォンの画面サイズより大きなデバイスならipad縦画面以上なら
パソコンサイトでも充分認識できるはず

 

とすれば これでよいのでは?

 

 

しかしながら問題点もあるのです

 

 

スマートフォンサイトで パソコンサイトの記事配列同様に
記事折り返しを含ませないための対策としてフォントサイズの
縮小を指定した場合

 

ipad縦画面では レスポンシブ化の影響でフォントが
スマートフォンサイズと同じサイズで表示され

 

小さすぎて 見ずらいとなるのです

 

スマートフォンでは十分認識できるフォントサイズでも枠が
大きくなると小さすぎてストレスが?

 

上記の影響を回避するには ipad縦画面でのフォントサイズを
スタイルシートで大きく指定すればよいのですが

 

メディアクエリをあと一つ追加することになるのです

 

 

 


 

もう一つのレイアウトを指示する

 

あと一つはどこまでのサイズで指定するか

 

 

範囲を絞ってのレイアウトを指定するには

 

スタイルシート内に記載済みのメディアクエリの下に再度

 

範囲指定のレスポンシブ化コードを追加します

 

 

指定値はmin-width: 671pxからmax-width: 768pxとします

 

上部解説の max-width: 698pxでは 
ずれが生じてレスポンシブ化が反映されなくなりましたので

 

max-width: 768pxサイズに変更します

 

 

記述コード
@media screen and (min-width: 671px) and (max-width: 768px) {

 

671から768までの範囲を指定します

 

作業を簡素化するために

 

メディアクエリ内記載コードは 現時点のレスポンシブ化コードで
良いので そのままコピーして@mediaを入れ替え

 

 

次に範囲内で表示されるスタイルを書き換えます

 

フォントサイズをパソコン同様に指定すれば 

 

ipad縦画面では 指定サイズで表示されます

 

その他 カテゴリー記事とかエントリー関連記事とかもフォントサイズを
指定します

 

 

複合レイアウトはここで終了

 


 

元に戻ります

 

 

width: 798以上で指定した場合は

 

@media(max-width:798px){

 

798pxのデバイスまで リキッドレイアウトが反映され それ以上では
パソコンサイト表示と同様になります

 

900pxとか1000pxのサイズ指定サイトもございますが 
ウェブ上に決まりきったサイズ指定というものが無い状況で
運営者様により指定値はまちまちですね

 

 


 

重要

 

閲覧デバイスは複数御座います

 

当サイトは 当初パソコンサイズデフォルト原本が優先され それ以外の

 

タブレットサイズ スマートフォンサイズを指定しておりました

 

タブレットサイズの指定です
@media screen and (min-width: 671px) and (max-width: 768px) {

 

このサイズ以上はパソコンサイズが適用されました

 

通常は この位置まで指定しておけば 以上のサイズはパソコン画面
としてデバイス表示され ほとんど問題ないかと思われます

 

しかし
当サイトの場合 背景画像の固定指定をIOSでも反映されるよう
個別指定する必要に迫れました

 

なぜかというと 以上のサイズでは背景画像の固定化がIOSでは
反映されないとう事情で 768px以上でもレスポンシブ化することに
なったのです

 

もう一つのメディアクエリの追

 

@media screen and (min-width: 769px) and (max-width: 1900px) { 

 

769以上から
min-width: 769px
max-width: 1900pxサイズまで

 

最初はこれでOKと判断していたのですが

 

気が付かずのミスがありました

 

ワイド画面で確認すると複数設定している背景画像が
混同してしまうというズレです

 

ややサイト画面を狭めると解消するのですが
ワイド画面オンリーという方もあられるでしょうからそれらにも対応
しなければならないわけですね

 

 

 

スマートフォンサイズ タブレットサイズ以降のもう一つのサイズを 
指定した場合

 

最大値を間違えると 背景画像の固定とか何かしらの可変を加えていると
反映されないデバイスがございます

 

メディアクエリの作動位置の限界を1900PXで指定しておきましたところ
ワイドのパソコン画面で 背景画像が固定されておりませんでした

 

1900PX以上での画面サイズは固定されていない
以下サイズはでは正常に固定されている状況

 

ほとんど2月くらい...boketorimasune

 

いつもやや小さめにしているので気が付かなかったのです

 

以下のサイズに書き換えましたら障害は消えました

 

@media screen and (min-width: 769px) and (max-width: 3000px) {

 

max-width: 3000px 何てサイズあるんかいなと?

 

768以上から
min-width: 769px

 

このサイズまでをレスポンシブとする指定です
max-width: 3000px

 

あなたのサイト もし画面が標準サイズでしたら

 

確認でき無い事もあります

 

標準的サイズなら なんら異常なしのサイトレイアウトでも

 

ワイド画面で確認するとあちこちにあらが見えるとか?

 

何れかの方法でワイド画面pcで表示確認をされてみてください

 

 

 

説明不足でした

 

申し訳ありません

 

 

 

レスポンシブウェブデザインのレイアウト表示例
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

レスポンシブウェブデザインカスタマイズのレイアウト変更値関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザイン変更前の説明
SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
ヘッダー画像をレスポンシブウェブ構造で作動させる方法
シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
デフォルト一カラムレスポンシブウェブデザイン設定
シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
2カラムテンプレート レスポンシブデザイン設定方法
SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
3カラムテンプレート レスポンシブウェブデザイン追加方法
SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
トップページのみをレイアウト替えした際のカスタマイズ色々
シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
レスポンシブサイトの見出しメニューを調整するカスタマイズ
シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします