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

 

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

 

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

 

ただし...です

 

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

 

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

 

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

 

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

 

 

---

 

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

---

 

 

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

 

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

 

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

 

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

 

 

 

class指定

 

御面倒でも　トップページからリンク集ページまでＨＴＭＬ内

 

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

 

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

 

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

 

ＨＴＭｌ記載はここで終了

 

 

スタイルシート記載

 

 

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

 

@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 ｓａｆａｒｉではサポート対象外で発動されないため
対応する記述も加えております

 

以下ですね

 

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

 

 

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

 

 

 

説明を終わります

 

スポンサーリンク

 

 

 

 

 

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