TOP

iPhone ipadで未反映のサイト背景の固定化を有効にする

シリウスサイトで背景に画像を置いて さらにスクロールしない
背景の固定化を設定しておられる環境もあるでしょう

 

しかし iPhone ipadのios端末では 背景が固定されていない
未反映の状態となっています

 

 

通常CSSで サイトで背景の固定化を設定するには 
スタイルシート内CSS

 

body内に 背景固定を指示する記述コード

 

background-attachment:fixed; をbody内に設置すれば 
パソコン画面では正常反映が確認できます

 

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
background-image: url(./img/1a7771.png);

 

~省略~

 

background-attachment:fixed;

 

}
ここまで

 

 

未反映の障害は IOS Safariが 背景固定化を有効にするコード

 

background-attachment:fixed;

 

を サポートしていないために指定が無視されることが原因
読み取れないということですね

 

では iPhone ipadで正常に反映させるための指定を追加しましょう

 

となるのですが 追加指定は容易にできるものの

 

一つの追加をしたなら 新たな障害が現れる?

 

全て円滑にとするなら 範囲を拡張した指定となるのです

 

 

一つの調整で収まると初期的に理解していたのですが
実行後 あらぬ障害に再度巡り合うことになりました

 

 

背景固定化をiosで有効にするとは簡単にできたのですが

 

メディアクエリのレスポンシブ発動指定値以上のipadでは 反映されずと
なるのです

 

 

そこで 円滑に反映させるための対処法詳細を記載するのですが

 

最初は 単なる固定化するための記載で 次に適合する説明へと
進みますので2段階でのご確認としてください

 

スポンサーリンク

 

 

 

シリウスサイト背景固定化とは?解説
非レスポンシブ デフォルト用はこちらでご確認ください
シリウスサイトのサイト背景画像をを固定化するカスタマイズ

 

 

ios用サイト背景固定化の追加手順

 

通常プラウザ対応を切り替えではなく ios端末でも反映する
追加事情の解説です

 

htmlテンプレート内追加記載

 

背景に置く画像を シリウスデフォルト機能ではなく 別路読み込みで
表示するための手順

 

 

html内
<body>の下に class指定を追加します

 

<div class="background"></div>

 

background は任意です
siriusでも構いません

 

トップページからリンク集HTMLまですべて記載します

 

ここで終了です

 

スタイルシート指定

 

次にスタイルシートを開いてください

 

以下記述は (media) メディアクエリ内に追加します

 

メディアクエリで は池尾画像を別途読み込み表示するためです

 

現在使用の背景用の画像コードに書き換えてください

 

背景はpngでもOK

 

記述は 通常のシリウス記載と異なります
通常
background-image: url(./img/1a7771.png);

 

 

-imageの記載は省きます

 

ここでの記述例
background: url(./img/1a7771.png);

 

となります

 

 

追加行

 

.background {
z-index: -1;
background: url(ここに背景.jpg)
no-repeat;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}

 

 

 

スタイルシート内 bodyに記載の

 

background-attachment:fixed;は
外さないで下さい  ...そのままでよい

 

 

以上で 終了です

 

アップロードしてiPhone ipadで作動を確認しましょう

 

 

ここまでは ネット上で公開されているコンテンツで進めるかと
理解します

 

 

 

しかし 次なる障害がみられるのですね

 


 

障害とは?

 

メディアクエリのレスポンシブ化指定値をipadの縦画面サイズに
指定している場合

 

@media(max-width:768px){

 

横画面は以上のサイズですね

 

そのよこ画面 およびipadのワイドサイズで確認すると
指定サイズ以上の画面では 

 

背景画像が固定されていない

 

また 背景画像のレイアウトが画面サイズに収まりきれないで
中途半端な背景となるのでした

 

この時点でiPhone スマートフォン パソコン画面では
なんら異常なし

 

 

原因は 

 

メディアクエリ指定の地点以上では スタイルシートの
.background記載が不作動で 背景画像も指定がないことで
ずれ表示となるのです

 

 

対処法

 

対処法は スタイルシート内 メディアクエリ記述を新たにもう一つ
追加すれば良いのですが それだけで事は収まらないのです

 

 

iPhone ipadで背景の固定を指定した場合 

 

背景のレスポンシブ化指定まで その他最終段階まで調整しないと
正常反映というレイアウト構成に到達できないのですね

 

 

もう一つのメディアクエリですが

 

max-widt:768px以上のサイズでレスポンシブ化指定を反映させるため

 

min-width:769pxとしました

 

 

min-width指定

 

max-widthは ここまでの限界指定

 

min-widthは この地点から上のサイズ全てで表示

 

ですので 768pxに1pxを足して769px

 

 

bodyで外すもの

 

原本スタイルシートで外しませんが メディアクエリ内で
背景を backgroundで読み込みますので

 

 

<% backgroundImage %>
を 削除します

 

 

 

 

 

@media(max-width:769px){

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 11px;
line-height: 140%;
background-color: #F5F5F5;
<%backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
background-attachment:fixed;

 

}

 

調整後

 

@media(min-width:769px){

 

body {

 

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

 

<% backgroundDisplay %>
<% backgroundColor %>

 

background-attachment:fixed;

 

}

 

 

コピーの際は以下フォントを削除
.background記述に書き換え追加があります

 

.background {

 

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

 


 

背景はレスポンシブ指定することでレイアウトに収まります

 

しかし スクロール時にわずかな画像のずれがある場合は
画像コードの横サイズを狭めて編集し シリウス管理画面に再配置して
再度の読み込みをしてください

 


 

背景画像のレスポンシブ指定
background-position: center center;

 

背景固定化指定
background-repeat: no-repeat;
position: fixed;
background-size:cover;

 


 

 

順序が逆になりますが 原本スタイルシートのbody内にレスポン化
指示の%記載を追加してください

 

width:100%;
height: 100%;

 

 

 

/* 基本スタイル */

 

body{
margin: 0px;
padding: 0px;
text-align: center;
color: #333333;
font-size: 0.9em;
line-height: 140%;
background-color: #F5F5F5;
<% backgroundImage %>
<% backgroundDisplay %>
<% backgroundColor %>
<% bodyFontSize %>
background-attachment:fixed;
width:100%;
height: 100%;
}

 


 

以上ですが 何とも説明が下手で申し訳ありません

 

簡単に講釈しますと メディアクエリで指定したmaxwidth:数値以上では
反映がされないため 再度その地点から上のサイズで反映させるための
メディアクエリminwidth:指定をする

 

...desu

 

 

最後に当サイトのメディアクエリを記載しておきます

 

2015 0615現在のものです

 

ただし 当サイトはiPhoneサイトで フォントを11pxに指定しているため

 

ipad縦画面ではフォントが小さくなる影響を回避するため

 

フォントを671pxから768pxまでの間は 18pxに範囲を指定した記載も
あリます

 

ここですね
@media screen and (min-width: 671px) and (max-width: 768px) {

 


参考のための記載です

 

スタイルは スマートフォンサイズ縦横

 

ipad中サイズ?
では縦画面がレスポンシブ

 

横画面で見ますと パソコンサイト
となります

 

 

 

当サイトオンリーのメチャ指定ですので 他サイトのCSSでは
エラーでまくりとなります

 

危険なので絶対コピーして使わないでください

 

メディアクエリの構造のみをご確認ください

 

尚 記載の詳細は明日追記いたします

 

@media(max-width:670px){

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 11px;
line-height: 140%;
background-color: #F5F5F5;

 

 

<% backgroundDisplay %>
<% backgroundColor %>
background-attachment:fixed; 通常背景固定化コード

 

}

 

.background {
width:100% ;
height: 100%;
z-index: -1;
background: url(./img/1a7771.png); 背景コード
background-repeat: no-repeat;
background-position: center center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}

 

 

#container{
width: 100%;
}

 

#main {
width:100%;
padding:1% 1%;
}

 

#sidebar{
width:30%;
}

 

img{
max-width: 100%;
height: auto;
width:100%;
  display:block;
}

 

h3{
height: 100%;
width: auto;
}

 

 

 

#threebox {
float: left;
width: 100%;
}

 

 

rgbabox {
height: 100%;
width: auto;
}

 

 

#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;
}

 

 

 

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

 

 

 

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<% pageTitleColor %>
width:100%;
}

 

 

 

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width:100%;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>
}

 

 

 

#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;
}

 

#categorylist h4 a{
 color: #00C5C5;
 font-size:15px;
margin: 0 .5em;
padding: 0;

 

text-decoration: underline;

 

}

 

 

#categorylist .desc {
font-size: 12px;
line-height: 130%;
color: #ffffff;
padding: 10px;
}

 

 

 

#entrylist dt {

 

font-size: 13px;
background-image: url(./img/entlist.jpg);
background-repeat: no-repeat;
background-position: left 5px;
line-height: 30px;
padding-left: 15px;
}

 

#entrylist dd {
margin-left: 15px;
margin-bottom: 30px;
font-size: 12px;
color: #FFFFFF;
line-height: 140%;
}

 

 

 

#menu {
float: left;
width: auto;
padding-top: 10px;
padding-bottom: 10px;
}

 

 

 

#rmenu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

 

 

#whatsnew li {
line-height: 25px;
list-style-image:url(img/whats_li.jpg);
margin-right: 2px;
margin-left: 2px;
font-size:12px;
background: rgba(0, 0, 0, 0.7);

 

}

 

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 2px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:12px;
padding-top: 4px;
}
}

 

メディカクエリ二つ目
@media screen and (min-width: 671px) and (max-width: 768px) {

 

body {
margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
font-size: 18px;
line-height: 140%;
background-color: #F5F5F5;

 

 

<% backgroundDisplay %>
<% backgroundColor %>

 

background-attachment:fixed;

 

}

 

 

.background {

 

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

 

 

 

#container{
width: 100%;
}

 

#main {
width:100%;
padding:1% 1%;
}

 

#sidebar{
width:30%;
}

 

img{
max-width: 100%;
height: auto;
width:100%;
  display:block;
}

 

h3{
height: 100%;
width: auto;
}

 

#threebox {
float: left;
width: 100%;
}

 

 

rgbabox {
height: 100%;
width: auto;
}

 

 

#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;
}

 

 

 

#header h2 ,#header .title {
width: 95%;
font-size: 26px;
line-height: 36px;
position: relative;
left: 2%;
top: 60px;
}

 

 

 

#header h2 a, #header h2 a:visited,#header .title a,#header .title a:visited {
color: #DE7E14;
text-decoration: none;
<% pageTitleColor %>
width:100%;
}

 

 

 

#headertext {
text-align: left;
font-size: 11px;
line-height: 130%;
width:100%;
position: relative;
left: 30px;
top: 60px;
<% pageDescFontSize %>
<% pageDescPlace %>
<% pageDescColor %>
}

 

 

 

#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;
}

 

#categorylist h4 a{
 color: #00C5C5;
 font-size:15px;
margin: 0 .5em;
padding: 0;

 

text-decoration: underline;

 

}

 

 

#categorylist .desc {
font-size: 12px;
line-height: 130%;
color: #ffffff;
padding: 10px;
}

 

 

#entrylist dt {

 

font-size: 16px;
background-image: url(./img/entlist.jpg);
background-repeat: no-repeat;
background-position: left 5px;
line-height: 30px;
padding-left: 15px;
}

 

#entrylist dd {
margin-left: 15px;
margin-bottom: 30px;
font-size: 16px;
color: #FFFFFF;
line-height: 140%;
}

 

 

 

#menu {
float: left;
width: auto;
padding-top: 10px;
padding-bottom: 10px;
}

 

 

#rmenu {
float: left;
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
}

 

 

#whatsnew li {
line-height: 25px;
list-style-image:url(img/whats_li.jpg);
margin-right: 2px;
margin-left: 2px;
font-size:16px;
background: rgba(0, 0, 0, 0.7);

 

}

 

 

 

#searchbox {
position: absolute;
top: 33px;
width: 100%;
padding-right: 5px;
padding-left: 2px;
text-align: right;
line-height: 20px;
height: 20px;
font-size:16px;
padding-top: 4px;
}
}

 

 

 

メディアクエリ3つ目
@media(min-width:769px){

 

body {

 

margin: 0px;
padding: 0px;
text-align: center;
color: #FFFFFF;
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/1sir769.png);
background-repeat: no-repeat;
background-position: center center;
position: fixed;
overflow:hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size:cover;
}
}

 

3つ目のメディアクエリは小記載ですが 指定しない項目は
オリジナル 原本指定CSSが優先されます

 

3つのメディアクエリをCSSに置いてますが 指定値に合わせて

 

各要素が個別に発動するのですね

 

 

 

 

iPhone ipadでサイト背景を固定化する仕様設定
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ

iPhone ipadでサイト背景を固定化する仕様設定関連解説
サイトをレスポンシブウェブ化カスタマイズする今事情
SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
レスポンシブウェブデザイン設定事情を理解しよう
シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にCSSを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
レスポンシブウェブデザイン変更前の説明
SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
レスポンシブウェブデザインカスタマイズのレイアウト変更値
シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をcss指定値カスタマイズを含めて複数解説します
ヘッダー画像をレスポンシブウェブ構造で作動させる方法
シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
デフォルト一カラムレスポンシブウェブデザイン設定
シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
2カラムテンプレート レスポンシブデザイン設定方法
SIRIUS シリウス2テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
3カラムテンプレート レスポンシブウェブデザイン追加方法
SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
トップページのみをレイアウト替えした際のカスタマイズ色々
シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
レスポンシブサイトの見出しメニューを調整するカスタマイズ
シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
レスポンシブウェブデザイン公開ではiPhoneサイト設定も必要
シリウスをレスポンシブウェブデザインとして公開するに至り iPhoneサイト設定も必要ということが判明しましたのでお知らせいたします
レスポンシブウェブサイトにPC SP画面切り替えスイッチは不要
SIRIUS シリウスレスポンシブウェブサイトにPC SP画面切り替えスイッチは必要か?ですが 今時代のスマートフォンではフィンガータッチで適正サイズに調整できるため不要と思われます
レスポンシブウェブサイトへアドセンスを表示する際の注意ごと
シリウスサイトをレスポンシブウェブデザインへと機能カスタマイズを追加した際 googleアドセンスをサイドのメニュー位置に置いたままではアドセンスのポリシーガイドラインに違反してしまうのです
レスポンシブ構造ではサイドバーのアドセンス配置は処理が必要
シリウスへのレスポンシブ構造追加ではサイドバーのアドセンス配置は スマホサイズでは広告が巻末に押しやられポリシー違反となります 対処法は指定処理が必要...詳細はサイトで
レスポンシブウェブデザイン構造では画像の数値指定を必ずしましょう
シリウスへレスポンシブウェブデザイン構造を設定したなら掲載する画像の事情により正常に表示されない場合があります 事情解説対処はこちらで.....
パソコン スマートフォン画面でどちらも記事列を適合表示する指定
シリウスレスポンシブ構造の記事列はパソコンと横サイズが異なるためスマートサイズだと自動で折り返されてしまいますが どちらも同様の記事列で表示することもできますが?  詳細はこちらで...
サイドメニューを押しやらない固定するレスポンシブウェブレイアウト
シリウスへのデフォルトレスポンシブウェブレイアウトでは サイドメニューが後方へ押しやられますが 位置を動かさない または メニューのサイズを固定可変がCSS指定により可能となります
レスポンシブウェブデザイン構造でのフォントサイズ指定
シリウスレスポンシブウェブデザイン構造でのフォントサイズは シリウス機能で16pxを指定していた場合 iPhoneサイトでは自動で縮小されてしまいます 見やすくする対応は?
レスポンシブウェブデザインに適合する画像サイズ
シリウスレスポンシブウェブデザインではスマートフォン パソコンの各画面では 掲載画像がどのように変化するのか?各端末に適合するサイズは?いろんな解釈がありますね
大きな縦サイズヘッダー画像はレスポンシブサイトでは読み込みが遅い
シリウスレスポンシブサイトでは大きな縦画像サイズのヘッダー画像を設置している場合 スマートフォンでは出現スピードの読み込みが遅くなります
端末により記事コンテンツを切り替え表示する
シリウスサイトをスマートフォンサイトでは記事列を横幅内に収めて または多少のコンテンツを替えて パソコンサイトと異なるコンテンツに切り替えて表示するカスタマイズ方法の詳細
スマートフォン PCコンテンツ切り替え時のシリウス機能操作
SIRIUS シリウススマホ PCデバイスでの切り替えコンテンツについて 初期指定の反映スタイル 付け加えたカスタマイズ説明による反映確認の詳細です
スマートフォン パソコンサイトで画像を切り替え表示指定する
当サイトのシリウスレスポンシブウェブデザイン構造ではスマートフォン パソコンサイト画面で画像の表示非表示の切り替え または異なる画像を表示することが指定出来ます
スマートフォンサイトではスライダー画像は必要か?
SIRIUS シリウスパソコンサイトでは綺麗に表示されるスライダー画像ですがスマートフォン閲覧サイトでは表示が必要ののでしょうか?
トップページ全体をワイドヘッダー画像で表示したい?の勘違い
SIRIUS シリウステンプレートへトップページ全体をワイドヘッダー画像で表示したい?といわれる方がおりますが ウェブ初期時の勘違い?ではないでしょうか とりあえずの講釈はこちらで....
レスポンシブウェブ構造でのワイドPC画面対応背景画像設定方法
シリウスのレスポンシブサイトに編集された背景画像を配置する際は ワイドサイズのウルトラPC画面でも 自動拡張されるようclass指定で設定を追加します
スマートフォンでは、固定のグローバルは出現させない
SIRIUS シリウスサイトでグローバルナビゲーションのスクロール固定化を指定している場合、スマホ閲覧の際、邪魔になるので出現しないよう指示しましょう
iphone設定からレスポンシブデザインへ移行する際の注意事
SIRIUS シリウスのiphone設定からレスポンシブデザインへ移行する際は、指定の解除およびサーバーファイルのiphone削除が必要です
ヘッダー画像のレスポンシブウェブデザイン構造、追加記載方法
SIRIUS シリウスレスポンシブ導入テンプレートでは、ヘッダー画像を縮小させる、またはスマートフォンサイトでは小さな画像に切り替えるとかの考え方も合わせ含めた対処方法