ワードプレス使用。サイドバーの不具合

Simplicityの特徴 › フォーラム › 不具合報告 › ワードプレス使用。サイドバーの不具合

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

      URL貼ります。
      http://rika01.com

      サイドバーが、記事下に表示されて
      とても見にくいです。

      改善策を教えて下さい。
      よろしくお願いします。

    • #43066
      Hidekichi
      ゲスト

      問題点は、#contentのmax-width:1000pxです。simplicityのデフォルトは1070pxだったかと思います。

      1000pxの#contentの中に665pxの#mainがあって340pxのサイドバーがあれば、自ずとフロートしている内容が折り返されるのは当たり前ですよね。

      ちなみにサイドバー自体は320pxで設定されていますが、paddingが設定されていますので、これが原因で外に広がってしまってます。paddingは内側のスペースですが、間違いなくこれが外に広がる原因です。

      これを解消するためには、cssにまず、

      *, *::before, *::after {
        box-sizing: border-box;
      }

      で、全部を要素の内側に向けて指定する必要があります。

      通常のbox-sizing: content-boxと言う指定は、外向きに広がります。つまり中の要素のサイズが起点になってそれ以上になった時に、中身のサイズを維持するために外に広がるわけです。なので、内向きに広がるようにborder-boxにします。

      cssの先頭付近に書くのが良いです。content-boxで表示したい場合は、その後で指定するセレクタで上書きができるので。

      たったこれだけで直りますが、できるだけどんなサイズの端末の画面幅にも合うように、

      #main {
        width: 100%;
        max-width: calc(100% - サイドバーの幅px - メインとサイドバーの間のスペースpx);
      }

      このように指定することで、#mainの幅はその時の100%の親の幅に対して可変になります。
      この場合、#contentの幅をmax-width: 1000pxにされているのは、それ以上大きくならないためなので、大きい場合はどうでも良いですが、中途半端なサイズのブラウザの開き方をしている人や、960px程度の画面幅の端末の場合は、#contentがその幅に追従さえできれば#mainは可変幅で表示できます。
      逆に小さすぎる場合は、どんどん#mainが小さくなっていくので、ここらはメディアクエリで別途設定してやる必要があります。

      ただしほとんどのブラウザでcalcは利用できるはずですが、safariとか、モバイルsafariあたりはややこしいので、calcではなく、jQuery等で計算させるのが良いです。safariも新しいバージョンが出るとか出たとかでここらが直っていればよいですが、まぁその他諸々も含め多分直ってないと思います。
      appleですからそんなもんです。

      それから利用されていないのかも知れませんが、サイドバー追従を動作させる際、現在のsimplicityのスクリプトでは#main、#sidebarに対してclearfixを入れたり、あるいはデフォルトの#body-in等に高さがある場合正しく動作しないかも知れないので、clearfixの入れる場所は気をつけて下さい。
      フッターに追従部分が突っ込んだりする可能性があります。

      ユニバーサルセレクタは遅いから利用するのをやめようとかと言う人もいますが、ユニバーサルセレクタが遅いとかどんなPC使ってんだよって話なので、実際に速度に影響する部分ですけれども、多用しなければ問題ありません。

      速度をあげるのが目的だとすれば、広告や、シェアボタンを外すのが一番なんですから(笑)
      そんなものに比べたらユニバーサルセレクタなんて、硬さで表現するなら豆腐と発泡スチロールぐらいの違いがあります。わかりにくいですけどね(笑)

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

      使われているテーマは、Simplicityではなくないですか?

      http://rika01.com/wp-content/themes/chocolat/style.css?ver=4.5.3
      スタイルシートのURLを見るにchocolatというテーマではないでしょうか。
      他のテーマの事に関しては、テーマ開発者にお問い合わせください。

      もし、Simplicityでも同様の表示になる場合は、Simplicityテーマを適用した状態にしておいていただけると助かります

    • #43112
      松田
      ゲスト

      hidekitiさま。
      cssにて、入れ替えたら改善されました。
      自分では、直せずにいて、何日もサイドバーの不具合と戦っていたので、今回改善されてホッとしてます。

      本当にありがとうございます!*

      それと、clearfixについてなんですが
      それってなんですか??
      入れたのも無自覚です。汗

      私、PCはそれほど詳しくないので教えて頂きたいです(うд´。)

    • #43113
      松田
      ゲスト

      わいひらさま。

      忙しい中、お時間さいてくださり、回答して頂きありがとうございます。

      改善できました。

      ありがとうございます。

4件の返信スレッドを表示中
  • トピック「ワードプレス使用。サイドバーの不具合」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)