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

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

8件の返信スレッドを表示中
  • 投稿者
    投稿
    • #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を掲載していただいて良いですか?

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




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