モバイル表示にするとインデックスリストのページでサイドバーの区切りがおかしい

Simplicityの特徴 › フォーラム › Simplicityについての質問 › モバイル表示にするとインデックスリストのページでサイドバーの区切りがおかしい

  • このトピックには3件の返信、2人の参加者があり、最後にインパラにより10年、 2ヶ月前に更新されました。
3件の返信スレッドを表示中
  • 投稿者
    投稿
    • #44085
      インパラ
      ゲスト

      お世話になっております。

      質問の内容は人のサイト(Simplicity2使用)なんですが説明が上手くできなかったらすいません。
      (サイトのURLを書いてみてもらったほうが早いと説明したのですが恥ずかしいらしいので‥)

      モバイル表示にするとインデックスリストのページでサイドバーの区切りがおかしいという質問なんですが

      .
      .
      .
      . 背景(白) 背景(白) 背景(白)
      .    
      .//////////バナー//////バナー///////バナー/////バナー////バナー//←背景が黒  
      ./////////////////////////////////////////////////////////////←背景が黒
      .//////////なんちゃらなんちゃらなんちゃらなんちゃら//////////////←背景が黒
      .//////////なんちゃらなんちゃらなんちゃらなんちゃら//////////////←背景が黒 
      .//////////なんちゃらなんちゃらなんちゃらなんちゃら//////////////←背景が黒 
      ._____________________________________________________________ 本当はここまで白のつもりが
      .
      .背景(黒) 背景(黒) 背景(黒) 背景(黒) 背景(黒) 背景(黒)
      .        ___________________     
      . | |      背景(黒)
      . |   検索入力 |
      . |__________________|
      .
      .         新着記事
      . _____________________________________________
      .
      .   *********************************
      .   *********************************
      . *********************************
      . *********************************** 
      .
      . 人気記事
      . ________________________________________________

      わかりづらいかもしれませんが
      #mainでpaddingを調整したのですがこのページは上手くできましたが他のページがおかしくなります。
      よかったら意見を聞かせください。

       

    • #44088
      Hidekichi
      ゲスト

      説明はよくわかりませんでしたが、意味は何となしにわかります。

      floatさせてあるので高さがないのです。なので質問のそんな感じになるのではなかろうかと想像します。

      float: noneになっていれば高さが出るはずですが、#mainにしろ#sidebarにしろあるいは、#body-inかもしれませんが中身にfloatしている要素がある場合は、その中身が浮いている状態にあるのでfloatの親要素はfloatの要素の分の高さを持ちません。

      が、clear:bothや、中身の要素に何かしらの見た目での高さをもたせた場合、高さがあるように見えたりもします。

      質問の内容から推測すると、おそらく#mainが高さがないのか、バナーがfloatさせてあってそこまで回りこみの状態になっているとかおそらくはそんな感じではなかろうかと思います。

      サンプル: floatになるとどうなるかを視覚的に表示 | jsFiddle

      サンプルのアルファベットの横並びになっているものは、「中身がfloatしてあるもの」と「中身がfloatしてあるが高さをもたせているもの」それぞれに同じスタイルが適用されています。つまり、floatさせて横並びにしているわけです。

      それぞれの構造としてはulの中にliがあって、このliがfloatしています。
      ulには赤いボーダーが入っています。

      「中身がfloatしてあるもの」のulのボーダーは本来であればliを囲むように入っていなければなりませんが、liがfloatしているために、高さがないということから一本の線のようになっています。一方「中身がfloatしてあるが高さをもたせているもの」は本来の想定通りliのまわりを囲むようにしてボーダーが入っています。

      質問のサイトのfloatの要素が入っている親要素に「中身がfloatしてあるが高さをもたせているもの」と同じようなclearfixをすれば、おそらくは想定通りの色分けができるだろうと予想しますが、そのサイトのhtmlなりcssがどうなっているかがわからないとコレだとは断言できません。

      clearfix自体は、

      親要素::before,
      親要素::after {
        content: "";
        display: table;
      }
      親要素::after {
        clear: both;
      }

      これを入れるだけです。さて、質問の内容ですが、今回はモバイルでということなので問題ないだろうと思いますがPCでスクロール追従が機能している場合は、これら要素(#mainなり#sidebarなり、#body-inなり)に高さを持たせてはいけません。致命的なエラーになるわけではありませんが高さを持たせるとSimplicityのjavascript.jsのスクロール追従部分のスクリプトが正しく動作しません。footerに追従部分が突っ込んだり色々とおかしな動作をするかと思います。

      なので、上記のclearfixを入れる場合は、例えばソレが#mainであるなら、

      @media screen and (max-width: 64em) {
        #main::before,
        #main::after {
          //...略
        }
      }

      と言うような幅がxxまでの端末と言うような書き方をする必要があります。
      上記のように解決策として要素に高さをもたせるのが正解なら、flexを利用しても良いです。例えば、

      #body-in {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
      }

      ベンダープレフィックスは書いてませんが、上記のような書き方をすると、#body-inの中にある#mainと#sidebar(あるいはmainと#sidebar)はflexで表示されます。この時、それぞれのfloatはnoneで解除をできますし必要ありません。
      #main(main)と#sidebarにもそれぞれにいくつかプロパティを書く必要があるかもしれませんが、flexはfloatの弊害を無くしてより簡単に要素を並べるためのスタイルです。今の所まだベンダープレフィックスが必要ですが、これで書けば、問題点が「floatの高さがない」と言う点なら即時解決できます。

      サイトの情報が質問の説明だけなのでこうすれば直るというようなサンプルは提示できませんが、おそらくはこんな感じの理屈でcssを修正すれば解決できるだろうと思います。

    • #44100
      アバター画像わいひら
      キーマスター

      すいません。僕にはちょっと書かれていることがわからないです。
      できれば、URLを掲載していただくのが一番なのですが、無理なようなら、キャプチャと注釈などで説明していただけると助かります。
      画像のアップローダーは、以下に案内があります。
      https://wp-simplicity.com/suport/topic/first-time/

    • #44118
      インパラ
      ゲスト

      返事が遅くなりすみません。

      しかも、慌てて書き込んで確認していませんでしたが説明がぐちゃぐちゃで申し訳ありませんでした‥。

      問題はズバリおっしゃる通りで解決しました!他のページも問題なく表示でき大変助かりました!

      本人も大変感謝しております。

      更に

      >>PCでスクロール追従が機能して‥

      これもアドバイスありがとうございます。事前に教えていただき助かります。

      丁寧にありがとうございました。

      そして、わいひらさん

      お騒がせして申し訳ありません。次回からこのような件の時はアップローダーを利用するように気を付けます。(こんなのがあるのを知りませんでした)

      申し訳ありませんでした。

3件の返信スレッドを表示中
  • トピック「モバイル表示にするとインデックスリストのページでサイドバーの区切りがおかしい」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)