サイトマップ
iPhone ipadで未反映のサイト背景の固定化を有効にする
シリウスサイトで背景に画像を置いて さらにスクロールしない
背景の固定化を設定しておられる環境もあるでしょう
しかし iPhone ipadのios端末では 背景が固定されていない
未反映の状態となっています
通常ＣＳＳで サイトで背景の固定化を設定するには
スタイルシート内ＣＳＳ
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でも構いません
トップページからリンク集ＨＴＭＬまですべて記載します
ここで終了です
スタイルシート指定
次にスタイルシートを開いてください
以下記述は （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:768ｐｘ以上のサイズでレスポンシブ化指定を反映させるため
min-width:769pxとしました
min-width指定
max-widthは ここまでの限界指定
min-widthは この地点から上のサイズ全てで表示
ですので 768ｐｘに1pxを足して769px
bodyで外すもの
原本スタイルシートで外しませんが メディアクエリ内で
背景を backgroundで読み込みますので
<% backgroundImage %>
を 削除します
@media(max-width:769px){
body {
margin: 0px;
padding: 0px;
text-align: center;
color: #ＦＦＦＦＦＦ;
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: #ＦＦＦＦＦＦ;
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:指定をする
...ｄｅｓｕ
最後に当サイトのメディアクエリを記載しておきます
2015 0615現在のものです
ただし 当サイトはiPhoneサイトで フォントを11pxに指定しているため
ipad縦画面ではフォントが小さくなる影響を回避するため
フォントを671pxから768pxまでの間は 18pxに範囲を指定した記載も
あリます
ここですね
@media screen and (min-width: 671px) and (max-width: 768px) {
参考のための記載です
スタイルは スマートフォンサイズ縦横
ipad中サイズ？
では縦画面がレスポンシブ
横画面で見ますと パソコンサイト
となります
当サイトオンリーのメチャ指定ですので 他サイトのＣＳＳでは
エラーでまくりとなります
危険なので絶対コピーして使わないでください
メディアクエリの構造のみをご確認ください
尚 記載の詳細は明日追記いたします
@media(max-width:670px){
body {
margin: 0px;
padding: 0px;
text-align: center;
color: #ＦＦＦＦＦＦ;
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: #ＦＦＦＦＦＦ;
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: #ＦＦＦＦＦＦ;
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つ目のメディアクエリは小記載ですが 指定しない項目は
オリジナル 原本指定ＣＳＳが優先されます
3つのメディアクエリをＣＳＳに置いてますが 指定値に合わせて
各要素が個別に発動するのですね
iPhone ipadでサイト背景を固定化する仕様設定
SIRIUS シリウスレスポンシブデザインテンプレート公開
シリウスカスタマイズ
- サイトをレスポンシブウェブ化カスタマイズする今事情
- SIRIUS シリウスサイトをレスポンシブウェブ化としてカスタマイズする事は今や避けることは出来ない今事情があります..その訳は
- レスポンシブウェブデザイン設定事情を理解しよう
- シリウスへレスポンシブウェブデザインを設定するカスタマイズは 特有の構造でもあり 充分にＣＳＳを理解する必要がございます 当サイトのレスポンシブウェブ事情をご確認下さい
- レスポンシブウェブデザイン変更前の説明
- SIRIUS シリウスサイトをレスポンシブデザインへ変更前のご注意ごとです デフォルトテンプレートカスタマイズをそのまま変更すると画面縮小の際 障害になるものがありますのでご説明します
- レスポンシブウェブデザインカスタマイズのレイアウト変更値
- シリウスへレスポンシブウェブデザインを導入後 リキッドレイアウト変更値は どの位置でどのように変化するか また レイアウトを複合化する2重構造をｃｓｓ指定値カスタマイズを含めて複数解説します
- ヘッダー画像をレスポンシブウェブ構造で作動させる方法
- シリウスへレスポンシブウェブデザインを追加構築してもヘッダー画像だけがレスポンシブ化作動不能という場合は こちらのサイト解説を参考にしてください 取り合えずは伸縮致します
- ヘッダー画像をレスポンシブウェブでは切り替え表示する方法
- シリウスのヘッダー画像をレスポンシブウェブサイト構造追加後 スマートフォンで閲覧の際 別画像を表示する手順を」ご案内いたしております
- デフォルト一カラムレスポンシブウェブデザイン設定
- シリウスデフォルト一カラムテンプレートへレスポンシブウェブデザイン構築を追加する事は 2カラム同様簡単に設定ができます
- 2カラムテンプレート レスポンシブデザイン設定方法
- SIRIUS シリウス２テンプレートへサイト内構成が 伸縮化変する全てのデバイスに対応可能なレスポンシブウェブデザインを設定追加するカスタマイズ方法のご案内です 作業は2分で終了
- 3カラムテンプレート レスポンシブウェブデザイン追加方法
- SIRIUS シリウス3カラムテンプレートへレスポンシブウェブデザイン設定を追加するカスタマイズ手順をご案内しております... 検証済み 面倒はありませんよ
- 2カラムのトップとカテゴリー以下のレイアウトを変えたレスポンシブ
- SIRIUS シリウスサイト2カラムをトップページとカテゴリー以下でレイアウトサイズを異なるスタイルで表現する2段階表示のレスポンシブデザインのカスタマイズの解説です
- トップページのみをレイアウト替えした際のカスタマイズ色々
- シリウスのトップページのみをレイアウト替えした際のサイドメニューは 構成次第でブログや大手サイトみたく色々なカスタマイズが表現出来ます
- レスポンシブサイトの見出しメニューを調整するカスタマイズ
- シリウスのレスポンシブウェブデザインサイトでは 機能を確認すると稼働後 見出しメニューにつなぎ目が見られますが 画像フォルダを編集すれば解消することが出来ます
