iPhoneのSafariでWordPress（STINGER）背景画像が固定されない。。。

2016年11月3日

iPhoneのSafariで背景画像固定が効かない

safari以外ではバッチリ！

そうなんです、、、

いろいろいじったからかなぁ。。。

これ、無視したいなぁ。。。笑

なのだが、クライアントがなんとiphoneなんだよね。

当然無視はできないので対策をお勉強！

最初はバグ！？

って思ってCSSを一生懸命調べたのですが

きちんと背景画像の位置を指定しているしな。。。

と思っていたのですが

やはり、iphoneで見たら固定されない。。。

これはやばーい！

ということで今、奮闘しています。

頭から煙が出てきています（笑）

背景画像の設定記述

どこにあるんだ。。。

解析ではここにあることはわかっているんだけどな

解決できたらこちらの記事に追加しますね。

iPhoneのSafariで背景画像の　position: fixed;　が効かないという事らしい。

調べていくうちにわかった！

STINGERPLUS: テーマのための関数 (functions.php)

このファイルに注目！

// カスタム背景
$custom_bgcolor_defaults = array(
'default-color' => '#f2f2f2',
);
add_theme_support( 'custom-background', $custom_bgcolor_defaults );

この部分がカスタム背景を有効化する箇所

<?php // カスタム背景を有効化
add_theme_support( 'custom-background' );
?>

STINGERPLUS: テーマヘッダー (header.php)

つぎにこのファイル

<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>
<?php get_template_part( 'st-ogp' ); //OGP設定 ?>

</head>
<body <?php body_class(); ?> >

わかりやすいように前後も掲載したが

カスタム背景で指定された値は　custom-background　というクラスに出力されるようです。
このクラスはbodyに以下のテンプレートタグを使うことで自動的に付与されます。

ということで、そのタグがこれ

<body <?php body_class(); ?> >

と、ここまでわかった！

根本的な解決にはなっていないけど

STINGERPLUS: スタイルシート (style.css)

body.custom-background {
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: -1;
}



これをスタイルシートに追加するとなんだかスクロールはするんだけど
途中で途切れることは解決した（笑