サポート » テーマ » Twenty Twelveでモバイルからアクセス時の余白設定

  • 解決済 inos-mini

    (@inos-mini)


    初心者的質問で恐縮ですが、

    Twenty Twelveを使用しており、パソコンからアクセス時は本文の余白設定が丁度良いのですが、スマートフォンなどのモバイル端末からアクセスした時は余白をもう少し減らしたいと思っています。(記事の左右や写真の左右にゆとりがありすぎてコンテンツの幅が狭い)

    Twenty Twelveはアクセスするデバイスの横幅解像度が600px以下の時はサイドバーが下に落ちますが、その状態の記事本文の余白の減らし方をご教授頂ける幸いです。

    よろしくお願い致します。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • スタイルシートの
    Responsive Structure セクションの

    #main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}

    をはじめ、各クラスの padding を調整しましょう。

    トピック投稿者 inos-mini

    (@inos-mini)

    早速アドバイスありがとうございます。

    それがCSSの中にResponsive Structure セクションという項目自体が見当たらないのです。
    そのため何処かの値をいじってみようにも検討がつきません。。

    /* Responsive imagesというセクションはあるのですが、
    これとは違いますよね?

    別件で Twenty Eleven を検証していましたので間違いました。
    Twenty Twelve では Media queries セクションにブレークポイントが記述されています。

    ただ
    Twenty Twelve のスタイルシート構造は、ほかのテーマと視点が逆です。
    PC サイトを基準にレスポンシブルを追加されたものではなく、
    モバイルをターゲットに設計されていますから、
    Basic structure をカスタマイズした上で、
    PC, タブレットでの見え方をあわせて検討する作業になるでしょう。

    トピック投稿者 inos-mini

    (@inos-mini)

    たびたびありがとうございます。

    しかし私のような初心者にはそれさえも良く分からないのですが、

    つまり、
    Basic structure内の調整はモバイルサイトとPCサイトの両方に影響が出て、
    Media queries内の調整はPCサイトにのみ影響が出る仕組みになっていて、

    モバイルサイト用にBasic structureを調整し、それによりPCサイトのレイアウトも崩れるため、
    Media queriesの調整でPCサイトを最終調整する...

    という事でしょうか。

    モバイルサイト用にBasic structureを調整し、それによりPCサイトのレイアウトも崩れるため、
    Media queriesの調整でPCサイトを最終調整する...

    ご理解のとおりです。

    レスポンシブル(横幅解像度が600px以下の時はサイドバーが下に落ちます)デザインが多くのテーマに導入される背景には、Webサイトの作り方が PC サイトからタブレット、モバイルターゲットに重視するようになったためですね。

    わたしも自分のサイトへの訪問者がモバイルとPCが半々。更新して直ぐをモバイルで確認して、後でPCで再来訪してくれるケースがパターン化しています。

    Twenty Twelveを使用しているサイトが多いのも、モバイル用に別途デザインしなくて良い所に人気があります。

    トピック投稿者 inos-mini

    (@inos-mini)

    ありがとうございます。

    非常に読みやすく且つ分かりやすい回答を何度も頂き感謝しております。

    多少時間は掛かるかもしれませんが、
    PCからでもモバイルからでもアクセス頂いた環境に
    読みやすく表示出来るよう頑張ってカスタマイズしてみます。

    本当にありがとうございました。

    トピック投稿者 inos-mini

    (@inos-mini)

    ありがとうございます。

    非常に読みやすく且つ分かりやすい回答を何度も頂き感謝しております。

    多少時間は掛かるかもしれませんが、
    PCからでもモバイルからでもアクセス頂いた環境に
    読みやすく表示出来るよう頑張ってカスタマイズしてみます。

    本当にありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「Twenty Twelveでモバイルからアクセス時の余白設定」には新たに返信することはできません。