TOP

背景画像のデバイス適合化

今回のシリウスのレスポンシブカスタマイズは サイト背景を画像として
設定している場合です

 

 

背景をシリウス機能で単色カラーで指定している場合

 

または 
スーパーワイド ウルトラPCサイズに匹敵する大きな画像をファイルに
置いている場合は なんら問題ありません

 

 

問題があるのは 背景画像をペイイン等で編集したもの

 

もしくはどこからか取り寄せたもの

 

又は 当サイトみたく 組み合わせ編集の場合

 

それらがスーパーワイド ウルトラPCサイズ以下のサイズ

 

 

パソコンの通常サイズ ノートパソコンサイズでしょうか?

 

そのサイズのパソコンでサイトを構築

 

サイト背景も画面にぴたりと収まり なんら問題なしとみられるものの

 

スーパーワイド ウルトラPCでそのサイトを閲覧しますと

 

背景画像が 横に移動して サイト本体と位置が大きくずれている
という障害が見られます

 

スーパーワイド ウルトラPC画面でも サイト自体は通常サイズと
同サイズで表示されますが 背景画像のサイズも同様で指定なしでは
拡張もしないので 大きな画面の中で致し方なく左寄せに
追いやられてしまうのです

 

サイトオプションでの指定をリピートにしておけば それなりに
リピート表示されますが 何とも複雑なレイアウトになってしまいます

 

当サイトは 通常のPCサイズでも スーパーワイドのウルトラPC画面でも
サイト本体サイズは変わらぬものの 背景は自動でスペースを空けることなく
ぴたりと画面内に収まるよう調整しております

 

 

と....講釈を唱えておりますけれど 当サイトは最初から障害は無くですが

 

当サイトのレスポンシブコードを導入された方から障害報告がありまして

 

別な画像を背景に配置のサイトで確認してみますと

 

障害を発見し...アレレと

 

 

ウルトラPC画面で見ないとエラーがあるかどうか理解できないのですね

 

ウルトラPCにはシリウスいれていないもので.... 
当サイトはよく確認するものの
他のサイトは全然未確認というあり様で...

 

今まで気が付きませんでしたが 私の解説が至らない事で皆様に
ご迷惑をお掛けしてしまい大変申し訳ありませんでした

 

 

では 当サイトみたいな背景表示法の調整手順を説明します

 

ただし...です

 

設定後の表示確認は 通常サイズのPC15でしょうか?
すみません パソコンサイズに関して知識が足りず説明できません

 

設定後の表示確認は ウルトラ画面PCであれば問題有りませんが

 

通常サイズのPCの場合 シリウスのプレビュー画面で画面を小さくしても
背景画像が左移動している 画像が拡張されていない..となり
確認がいただけません

 

サイト確認であれば 画面を小さくしてみると サイト本体のみが縮小し
背景はそのままPCサイズに調度収まり表示されます

 

 


 

以下手順は 当サイトのレスポンシブ導入解説
iPhone ipadでサイト背景を固定化する仕様設定を設定済みの場合は
すでに対応済みとなっており設定を加える必要ありません


 

 

ウルトラpc画面でサイト本体は指定サイズそのままで 背景に指定される
画像は pcサイズに合わせて自動調整される...設定手順

 

レスポンシブ構造をシリウスに組み込みますとサイト本体は可変作動しますが

 

背景に置く画像は 自動拡張を指定せずの場合ワイド画面のPCでは
導入サイズのまま表示されてしまいます

 

ですので...背景画像を自動拡張するよう指定します

 

 

 

class指定

 

御面倒でも トップページからリンク集ページまでHTML内

 

直下にスタイルシートからの支持を読み込むための 
class指定を付け加えます

 

可変を加えるので記載は background とします

 

class指定コード
<div class="background"></div>

 

HTMl記載はここで終了

 

 

スタイルシート記載

 

 

当サイト関連のレスポンシブ解説で発動地点を

 

@media(max-width:670px){にしている場合でも以上の数値の場合でも

 

良いのですが スタイルシートの最後に以下記述を付け加えます

 

以下に記述の画像コードを シリウスのサイトオプション背景画像で
読み込んでいるコードに書き換えてください

 

img/sirius769.pngを書き換える

 

background: url(/img/sirius769.png);

 

 

@media screen and (min-width: 1000px) and (max-width: 2499px) {

 

 

body {

 

margin: 0px;
padding: 0px;
text-align: center;
color: #333;
font-size: 16px;
line-height: 140%;
background-color: #F5F5F5;

 

<% backgroundDisplay %>
<% backgroundColor %>

 

background-attachment:fixed;

 

}

 

.background {

 

width:auto;
height: 100%;
z-index: -19;
background: url(/img/sirius769.png);
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
}

 

 

 

 

max-width: は2499pxに指定しておりますが 環境により
書き換えても構いません

 

 

上記構造には 背景のスクロールを不作動とする固定化を指定
しております
background-attachment:fixed; の記載でございますが

 

iphone safariではサポート対象外で発動されないため
対応する記述も加えております

 

以下ですね

 

background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;

 

 

今回のカスタマイズ手順は 解説のコンテンツ違いではありますが
以下ページの解説に従い進めますと 記述は同じであり
結果として 背景画像はデバイスサイズに合わせて自動拡張されます

 

 

 

説明を終わります

 

スポンサーリンク

 

 

 

 

 

レスポンシブウェブ構造での背景画像設定方法
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

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