こんにちわ
シンプルなデザインが気に入ってこの夏頃から使わせてもらっています
1つ質問がありますので、教えていただけるでしょうか
(WordPress 3.6.1、さくらレンタルサーバの環境です)
・サイドバーの挙動
レスポンシブですので、ブラウザの幅を狭めるとサードバーが左サイドバー>右サイドバーの順にメインコンテンツの下に落ちていきます。
この下に落ちる順を逆に、つまり右サイドバー>左サイドバーの順にしようとしていますが、苦戦しています。なにかヒントはありますでしょうか。
お時間ありましたら、よろしくお願い致します。
ご利用ありがとうございます!
作者のsysbirdです、返信おくれました。
左サイドバーと右サイドバーが下に落ちる順序を変更したい場合は、style.cssのメディアクエリーの箇所でフロートと幅を逆に指定すればよいです。
具体的には下記のようなかんじで、微修正は必要ですがお試しくださいますか。
@media screen and (max-width: 1000px) {
/* --- General --- */
#main {
/* width: 76.59%; 削除 */
width: 100%; /* 追加 */}
#content {
/* width: 98%; 削除 */
/* float: left; 削除 */}
#leftcolumn {
/* margin: 0; 削除 */
/* float: none; 削除 */ }
#rightcolumn {
/* width: 23.275%; 削除 */
/* float: right; 削除 */
width: 100%; /* 追加 */
float: none; /* 追加 */}
/* --- Sidebars --- */
#leftcolumn {
/* width: 92.2%; 削除 */
/* margin-left: 0; 削除 */
/* padding: 30px 0 0; 削除 */
/* float: left; 削除 */ }
}
こんばんわ！お忙しいところご回答ありがとうございます。
メディアクエリーのところで設定でしたか・・・
この辺り知識が浅く、まったく見当がつきませんでした。
で、早速にご指摘のコードを適用したのですがすが、うまく動作しません。
具体的には、左サイドバーと右サイドバーが同時に、同じタイミングでカラム落ちしてしまいます。
つまりは、両サイドバーが一つのサイドバーのように振舞っているようで、
左サイドバー→右サイドバーと順次に落ちてはくれません。
CSSを読む限りでは(というか読み解き切れていないのですが・・・)#leftcolumnの指定がこれでいいのか気になっていますが、まだよい結果が出ていません。
なお、環境としては子テーマを使ってカスタマイズしており、元々のbirdtipsのファイルには手を加えていません。
これから更にテストをしようと思いますが、どの辺りがテストでの確認点になるでしょうか。
アドバイスありましたらお願い致します。
こんにちわ！
子テーマでやる場合はcssを上書きすればよいので、
↓このような感じでいかがでしょうか？
@media screen and (max-width: 1000px) {
#main {
width: 100%; }
#content {
width: 72.669%;
float: left; }
#leftcolumn {
width: 24.275%;
margin-left: 2.054%;
float: left; }
#rightcolumn {
width: 100%;
float: none; }
}
こんばんわ！さっそくありがとうございました。
頂いたコードを子テーマ末尾に付け足した所、
左サイドバーが落ちなくなりました。右サイドバーだけが落ちます。
iPhoneから見ても、PCブラウザの幅を狭めて見ても同じ挙動です。
iPhoneでサイドバーが出てたらちょっと見づらいですね w
これはなぜでしょう。
メディアクエリーをいろいろ弄りましたが、解決しませんでした・・・。
メディアクエリーのブレークポイントが800と600pxにもありますので、このへんも同じようにスタイルを左右逆になるように上書きすればよいです。iPhoneだと600px以下のスタイルが適用されます。
ありがとうございます。
800pxと650px(maxとmin)のブレークポイントに同様にコードを付け足してみました。
結果としては1000pxにのみコードを付け足した時と同じ挙動です。
例えばPCのブラウザで表示幅を狭めていくと、
まず右サイドバーが落ちますが(ここまではOK)、どこまで狭めても左サイドバーは落ちない(メインカラムと左サイドバーが並んで表示されている)、という状態です。
iPhone-safariでも同様で、メインカラムと左サイドバーが表示されている状態です。
各ブレークポイントでの設定を変えてもみましたがうまくいきませんでした。
メディアクエリー、難しいですね・・・
最終的(スマホの表示)には、すべてのカラムが100%でフロートなしになるようにします。
どのタイミング(ブレークポイント)で各カラムをどのように表示したいか？幅や位置などイメージしながら修正するとよいですよ。
ようやくできました！
頂いたコードをmin-width/650pxにまで適用していたのが主なミスでした・・・。
それはカラムが落ちなくなりますね・・・。
今回、いろいろと勉強が出来ました。
詳しく説明をいただき、どうもありがとうございました。
