シリウスレスポンシブウェブサイトで　大きな縦サイズのヘッダー画像

 

通常は２４０ｐｘ程度かと記憶しておりますが　
４００ｐｘとか５００ｐｘで配置している場合　スマートフォンでサイト確認
致しますと　

 

ヘッダーが表示されない

 

いったんスクロールして戻ると表示されている

 

という状況がみられます

 

 

スポンサーリンク

 

 

 

---

 

 

パソコンサイトではすぐに表示されるのですが　スマートフォンでは

 

表示スピードが遅いとなるのですね

 

 

対処法は　スマートフォンで閲覧されるサイトでは　別なサイズ

 

横は通常ですが　縦のみシリウスで用意されているヘッダーサイズほどで

 

もう一つのヘッダー画像を置いて　スマートフォン閲覧の際は

 

メディアクエリで読み込ませる

 

 

簡単に言えば　スマートフォンサイトでは　調整した別画像を
表示すればよいわけです

 

 

パソコンなら大きな縦サイズでも画像が綺麗ならそれでも
良いかもしれません

 

しかし
スマートフォンサイトでは　大きな縦サイズのヘッダー画像は

 

何とも　お邪魔ですので　コンテンツにすぐ到達できるよう小さくしましょう　

 

小さくとは
スマートフォンサイト用のヘッダー画像を追加すればよいのです

 

 

 

 

 

どのようにするかですが

 

編集したヘッダー画像を読み込むためにシリウス管理画面に入れてください

 

 

次にメディアクエリ内のheader画像読み込みコードを編集します

 

 

記述コード

 

#header {
height: <% headerHeight %>;
background-image: url(img/header.jpg);
overflow:hidden;
background-repeat: no-repeat;
background-position: left top;
width: 100%;
border-bottom:solid 1px #EBEBEB;
}

 

 

以下の箇所
background-image: url(img/header.jpg);

 

ここですね
img/header.jpg

 

画像コードを　管理画面の用意した画像コードに変えます

 

書き換え例
background-image:url(./img/1a7771.png);

 

すると　以降スマートフォンサイトでは指定の画像が表示されます

 

 

大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
SIRIUS　シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ