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

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

safari以外ではバッチリ!

 

 

そうなんです、、、

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

 

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

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

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

 

最初はバグ!?

 

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

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

 

と思っていたのですが

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

 

 

これはやばーい!

 

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

 

 

頭から煙が出てきています(笑)

 

背景画像の設定記述

どこにあるんだ。。。

 

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

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

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

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(); ?> >

<div id=”wrapper” class=”<?php st_wrap_class(); ?>”>
<header id=”<?php st_head_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;
}



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

 

safari限定で記事と一緒にスクロールする。

あとはカスタマイズで背景画像固定に設定しているから

しっかりと固定されている。

 

当然safari以外ではしっかりと固定

safariのみスクロールでカバー

 

 

これまでで6時間かかった。。。

プログラマーじゃないからなぁ。。。

  • このエントリーをはてなブックマークに追加

関連記事

コメント

  1. 私にはなかなか難しい内容かなーと思いましたがとてもわかりやすく解説されていてすんなり読めました!

    しかし6時間…ほんとにお疲れ様です!

      • una
      • 2016年 11月 03日

      タナカナさん、こんにちわ。

      いや、6時間正直キツイですわ(笑)
      そういってもらえたら苦労が報われます。

      ありがとうございます!

  2. こんにちは。ともちんと言います。
    6時間は・・・凄い。でもちゃんと成果も出されていてこれも凄い。
    私もスティンガー使いたいと思ってるのですが、こんなの全くわかりません。
    いつか使える日が来るのでしょうかね?
    はぁ!

      • una
      • 2016年 11月 10日

      ともちんさん、こんにちわ。

      スティンガーは使う人間をあまり選びませんし
      カスタマイズもしやすいので

      初心者から上級者まで使えるテンプレートだと思いますよ。
      今回は依頼されてのカスタマイズなので
      基本自分のサイトではそこまでしません(笑)

  1. この記事へのトラックバックはありません。

CAPTCHA


ニュースレターを購読します

起死回生の道標!メルマガ。


ためになるノウハウよりも
今すぐ使えるノウハウを中心にお伝えしています。

裏カリキュラムも読者限定でご案内しています。
裏カリキュラムでは裏王道のノウハウを伝授します!

現在665人の受講生がいます。

成約1件あたりの報酬1万円越え、アフィリエイトASPのインフォカート

ページ上部へ戻る