モバイルヘッダー背景画像を設定すると、スマホ表示した際に同じ画像が2枚上下に表示される

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも モバイルヘッダー背景画像を設定すると、スマホ表示した際に同じ画像が2枚上下に表示される

このトピックには8件の返信が含まれ、2人の参加者がいます。3 年、 1 ヶ月前わいひら わいひら さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #37050 返信

    raopi

    お世話になります。

    モバイルヘッダー背景画像を設定すると、スマホ表示した際に同じ画像が2枚上下に表示されます。

    これを1枚だけにしたいのですが、何か方法はありますでしょうか

    ちなみにヘッダーにはディスクリプションは表示していないので、ブログタイトルだけ表示している状態です。

  • #37052 返信

    Hidekichi

    background-repeat: no-reeatでどうでしょう?

  • #37053 返信

    Hidekichi

    p抜けた。
    background-repeat: no-repeat

  • #37067 返信
    わいひら
    わいひら
    キーマスター

    モバイルヘッダーの要素にbackground-repeat: no-repeat;スタイルが割り当てられていなかったみたいですね。
    次のアップまでに修正しておこうと思います。

  • #37084 返信

    raopi

    ありがとうございました。参考までにどのあたりに記述すればよろしいでしょうか

  • #37089 返信

    Hidekichi

    > モバイルヘッダー背景画像

    ということなので、子テーマmobile.cssでもよいですし、style.cssに書いても良いのですが、どういった適用の仕方をしているかによって書き方も若干異なります。

    ブラウザ幅いっぱいに出るものは#headerに画像があって、#mainにそろうものは#h-topに画像があります。モバイルヘッダー背景画像がどちらに適用されるかはわかりませんが、このどちらか、あるいはどちらにも入れておけば良いかと思います。

    #header {
      background-repeat: no-repeat;
    }
    
    #h-top {
      background-repeat: no-repeat;
    }

    両方入れておくなら、

    #header,
    #h-top {
      background-repeat: no-repeat;
    }

    でもよいです。

    これをどういった画面サイズで適用させるかはmediaクエリを使います。mobile.cssが読み込まれる時だけでよいなら上記をmobile.cssに書けばよいですが、完全レスポンシブにしたいとかの場合はメディアクエリが良いかと思います。完全レスポンシブでなくてもメディアクエリは有効です。

    @media screen and (max-width: 440px){
      #header,
      #h-top {
        background-repeat: no-repeat;
      }
    }

    など。440pxは480pxでもよいですし、767pxあたりでも良いのでは?と思いますが、ここらは環境やデザイン次第です。意味的には、440pxなら、画面幅が440pxまでの時ということになります。

  • #37120 返信

    raopi

    ありがとうございました。助かりました。

  • #37121 返信

    raopi

    と思ったのですが、そうするとブログタイトルとパン屑リスト?の間に大きなスペースが出来てしまいました。

    寝ログ様はここにアドセンスを貼っていますが、貼らない場合はどのようにすれば、スペースが消せるでしょうか

  • #37137 返信
    わいひら
    わいひら
    キーマスター

    書き込み内容だけでは不明な点もあり、ソースを見たほうが楽なので、サイトのURLを掲載していただいて良いですか?

返信先: モバイルヘッダー背景画像を設定すると、スマホ表示した際に同じ画像が2枚上下に表示される
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)