TOP

スマートフォン画面での認識障害を削除する

シリウスに組み込んだレスポンシブ構造でスマートフォンからの閲覧の際、
視覚認識の邪魔になるのが、グローバルナビゲーションのスクロール固定化を
設定している場合です

 

グローバルナビゲーションのスクロール固定化は、レスポンシブ構造で
閲覧の際、横サイズは縮小されるのすが、位置が固定しているので

 

認識障害
小さな画面でのお邪魔虫、さらに見ずらくなります

 

そんな場合は、サイト幅がスマートフォンサイズならば出現させない...

 

という指定にしましょう

 

指定方法は、@mediaコード内に置くグローバルナビゲーションを
読み込む指定項目に

 

CSS非表示指定コード

 

display: none;

 

を追加するだけ

 

 

 

@media(max-width:698px){、はスマートフォンサイズを示しています

 

閲覧画面が
:698pxのサイズ以下では、非表示とする..と解釈してください

 

 

追加位置は以下項目でご確認ください

 

@media(max-width:698px){

 

 

#topmenu {
background-repeat: repeat-x;
height: 48px;
line-height: 42px;
width: 100%;
position: absolute;
margin: 0px;
padding: 0px;
background-image: url(img/topmenu.jpg);
background-position: left top;
font-size: 13px;
display: none;   //ここに追記
}

 

 

グローバルに限らずですが、スマートフォン閲覧では障害となるものは

 

display: none;

 

で、出現を止めることができます

 

 

スポンサーリンク

 

 

 

 

スマートフォンでは、固定のグローバルは出現させない
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

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