CG
(@du-bist-der-lenz)
@media and screen はタイポでしょうけど、@-規則は、条件が揃った時だけにセットが実行されるのですよね。
また、スマホの時のナビゲーションメニューはトグルボタンになるのが基本ではないでしょうか。
サイドバーが右下にずれるのはなぜでしょうか？
直したいです。
CG
(@du-bist-der-lenz)
floatしているので、サイドバーが右下に押し出されているのですね。
また、スマホの時のサイドバーはコンテンツ下に移動するのが基本ではないでしょうか。
パソコン画面での表示と、タブレット・スマホの表示を同じにするときはレスポンシブを解除するのが良いでしょう。
float:left;にしています。
レスポンシブを解除するには何をすればいいですか？
また、縦画面のスマホだと基本的にサイドバーが記事の隣に来ます。ただスマホを横画面(幅は480pxだと思います)にした時だけ、サイドバーが右下にずれます。
横画面にした時、サイドバーを記事の右隣に配置したいです。
レスポンシブを解除すると、SEO的に不利になるのではないでしょうか？
CG
(@du-bist-der-lenz)
１）レスポンシブを解除すると、SEO的に不利になるのは何故でしょう。
２）そして、スマホを横画面にして観られていることを、サイトはどう認識するのですか。
３）幅は480pxとはiPhone3〜4をターゲットにしているのですね。
1 調べたら、そう出て来ました。
2 レスポンシブを解除する方法を教えて下さい。
3 サイトで調べたら出て来ました。横画面にすると、サイドバーを右上に表示する方法を教えて下さい。
CG
(@du-bist-der-lenz)
３）あら、わたしがグーグル検索して得た情報では、「iPhone 6S Plus で 1,080px × 1,920px 〜 414px × 736px ということですよ。
１＆２）レスポンシブを解除するには、メディアクエリを無効にしましょう。でも、それって、レスポンシブを解除すると、SEO的に不利になるのではないでしょうか？
例えば、CSSにデバイス幅が480px以下の指定が記述されていた場合、480px以上あるデバイス（iPhoneの他アンドロイ系を考えないというのであれば違いますが）のブラウザをいくら縮小しても、そのCSSは適用されないということです。orientationを使ったら、スマホが縦、横で異なるスタイルシートを適応できますね。
まず、最初に横画面にすると、サイドバーを右上に表示する方法を教えて下さい。お願いします。
damian5129 さんに質問ですが。
テーマは何をお使いですか？ そのテーマではもともとサイドバーが下にずれていましたか？
Du bist der Lenz さんがおっしゃるのは、スマホのような画面の小さな端末では、横画面であろうとサイドバーは記事の横ではなく下に移動させるのが一般的、ということだと思うのですが。
まあ、そこは好みの問題かもしれないのでいいですが、メディアクエリ @media の部分をすべて除去すれば、PCとスマホで完全に同じスタイルを適用できるので、サイドバーは右上に表示されるのではないでしょうか。
もっともSEO的にはNGでしょうが……
480pxとは昔のiPhoneの画面の高さ（横画面にした時の幅）と同じですね。
@media screen and (max-width: 480px;) {} で指定をすれば、今時の大半の端末では縦画面のときのみ適用されるメディアクエリになりますが、昔のiPhoneでは横画面にしても適用されたままになってしまいますね。
こんにちわ、そして明けましておめでとうございます。
私が使っているテーマはtwenty twelveです。そしてサイドバーが下にずれるというのは、サイドバーが右下にずれます。
それもスマホを横画面にした時、個別投稿ページのサイドバーだけです。他の固定ページはそんなことはありません。
>スマホのような画面の小さな端末では、横画面であろうとサイドバーは記事の横ではなく下に移動させるのが一般的、
とありますが、確かにおっしょる通りです。ただ、スマホを横画面にした時に個別投稿ページのサイドバーだけが記事の右となりではなく、ましてや記事の直ぐ下でもなく、右下にずれるのがおかしく思えるのです。
下の図が今回の問題です。
※個別投稿ページをスマホの横画面で見た時
記事・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・・・・
ウィジェット
CG
(@du-bist-der-lenz)
@damian5129 さん
Twenty Twelve テーマは長いことメンテナンスを重ねて完成してきたテーマですから、「スマホを横画面にした時、個別投稿ページのサイドバーだけ、右下にずれる」のはおかしいですね。
しかし、そういう疑問の声は上がっていないと思います。
CG
(@du-bist-der-lenz)
@latobeam さん
整理していただきありがとうございます。Twenty Twelve テーマは、コンテンツエリアは、width: 65.104166667%;ウィジェットエリアは、width: 26.041666667%;で合わせて全幅の90％少々なので、ラッパーを狭くすることで @damian5129 さんの希望「スマホを横画面にした時、サイドバーも並べる」通りできないかしら。
もっともSEO的にはNGでしょうが。
実はパソコンで見る時も個別投稿ページのサイドバーは右下にずれる事がありました。
今は試行錯誤で右隣にくるようにしました。
サイドバーが右下にずれる原因がわからないんです。
@damian5129 さんはこのフォーラムでいろいろ質問されているようですが、そこで得られた回答通りにこれまでTwenty Twelveをカスタマイズし続けたなら、おそらくそれらの変更が様々な部分で干渉しあい、その結果このような問題が発生するようになった……
このように推理しましたが、いかがでしょうか。
Twenty Twelveのような完成されたテーマは、1ヶ所でも弄ると帳尻を合わせるのが大変でしょうから。
サイドバーが真下ではなく右下にずれる理由は、 @du-bist-der-lenz さんも触れられていますが、おそらく右寄せに float: right を使っているせいでしょう。
そして本文の部分とサイドバーの部分の幅の合計が100％を超えていると思われます。
