Simplicityの特徴 › フォーラム › 不具合報告 › ワードプレス使用。サイドバーの不具合
- このトピックには4件の返信、2人の参加者があり、最後に
松田により10年、 4ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年6月29日 3:44 PM #43060
松田
ゲスト -
2016年6月29日 4:44 PM #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使ってんだよって話なので、実際に速度に影響する部分ですけれども、多用しなければ問題ありません。
速度をあげるのが目的だとすれば、広告や、シェアボタンを外すのが一番なんですから(笑)
そんなものに比べたらユニバーサルセレクタなんて、硬さで表現するなら豆腐と発泡スチロールぐらいの違いがあります。わかりにくいですけどね(笑) -
2016年6月29日 4:50 PM #43069
わいひらキーマスター使われているテーマは、Simplicityではなくないですか?

http://rika01.com/wp-content/themes/chocolat/style.css?ver=4.5.3
スタイルシートのURLを見るにchocolatというテーマではないでしょうか。
他のテーマの事に関しては、テーマ開発者にお問い合わせください。もし、Simplicityでも同様の表示になる場合は、Simplicityテーマを適用した状態にしておいていただけると助かります
-
2016年6月30日 6:25 AM #43112
松田
ゲストhidekitiさま。
cssにて、入れ替えたら改善されました。
自分では、直せずにいて、何日もサイドバーの不具合と戦っていたので、今回改善されてホッとしてます。本当にありがとうございます!*
それと、clearfixについてなんですが
それってなんですか??
入れたのも無自覚です。汗私、PCはそれほど詳しくないので教えて頂きたいです(うд´。)
-
2016年6月30日 6:42 AM #43113
松田
ゲストわいひらさま。
忙しい中、お時間さいてくださり、回答して頂きありがとうございます。
改善できました。
ありがとうございます。
-
-
投稿者投稿
- トピック「ワードプレス使用。サイドバーの不具合」には新しい返信をつけることはできません。