横幅が1150px未満でもサイドバーを横に表示させたい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 横幅が1150px未満でもサイドバーを横に表示させたい

このトピックには6件の返信が含まれ、1人の参加者がいます。5 ヶ月、 1 週前 taka さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #59653 返信

    taka

    既存のウェブサイトをワードプレスサイトに移行中の者です。
    Simplicity2を使い、レスポンシブに設定しています。
    PCの画面の横幅が狭い状態で見ると、サイドバーが横に表示されず、
    下に表示されるので、過去のトピックを読んで調べてみると、
    「Simplicityでは、横幅が1150px未満だとサイドバーはレスポンシブ表示されます」
    とありました。
    既存のサイトの横幅が900px程度で、このサイズを変えずに移行したいので、
    900px程度まではサイドバーを横に表示したいのですが、
    その場合、レスポンシブの分岐点を変える必要があるのでしょうか?
    とは言っても、どのcssまたはphpをどのように直したら良いのかわかりません。
    横幅が1150px未満でもサイドバーを横に表示できる方法を教えてください。

  • #59672 返信

    Akira

    何か簡単にやれる方法はないかなと考えてみましたが、思い付きません。ご希望のカスタマイズは、そこそこ重労働です。

    ちょっとフォーラムでは対応できないかもしれません。

  • #59673 返信

    かうたっく

    子テーマCSSに以下を追記すれば良いかと思われます。

    @media screen and (min-width: 900px) and (max-width: 1110px) {
    	div#body-in {
    		width: 100%;
    		margin: 0;
    	}
    	#main {
    		width: calc(70%);
    		margin-left: 10px;
    	}
    	div#sidebar {
    		width: calc(25%);
    		float: right;
    		clear: none;
    		padding: 0 15px;
    	}
    	/*#mobile-menu {
    		display: none;
    	}*/
    }

    こんな感じのイメージですが、Chromeでザックリやってみた感じなので微調整はあまりしてません。
    GIF画像
    http://netakiri.net/uploader/src/up0456.gif

  • #59678 返信

    Akira

    あら。かうたっくさんが先にご提案されていた。

    サイドバーの幅を固定するタイプを作りました。せっかくなので一応書いておきます。想定しているのは右サイドバーです。

    https://notepad.pw/share/8w2v00au2

    画面幅 900px まで、サイドバーとメインカラムを横並びにすることしか考えていません。「既存のサイトの横幅が 900px 程度で、このサイズを変えずに移行したいので」という部分は考慮していません。

  • #59705 返信

    taka

    Akiraさん、かうたっくさん、ありがとうございました。
    お2人のcssを参考にして、
    サイドバーを横に表示させることができました。

    調整しながら、記述すると、以下のようなcssができました。
    このままでも満足なのですが、
    (830pxから、1110pxの間の場合で、)
    ヘッダーとナビはセンター寄せになるのですが、
    ボディ(サイドバーとメイン)が右寄せになってしまいます。
    margin: autoがボディに効いていないと思うのですが、
    どのようにすれば、すべてが画面の中央に配置できるのでしょうか。
    https://notepad.pw/0y49f01y

    まだ、1ページしか作成していませんが、
    移行中のサイトは以下になります。
    http://stay-samui.com/wp/samui_weather.html

  • #59711 返信

    Akira

    taka さんの CSS を微調整してみました。

    @media screen and (min-width: 830px) and (max-width: 1110px) {
      div#header-in,
      div#navi-in {
        padding: 0;
        width: 100%;
      }
      div#body-in {
        width: 830px;
      }  
      #mobile-menu {
        display: none;
      }
      #header {
        max-width: 830px;
        margin: auto;
      }
      #navi {
        max-width: 830px;
        margin: auto;
      }
      #body {
        margin: auto;
      }
      #footer {
        margin: auto;
      }	
      #navi ul {
        border: 1px solid #ddd;
        display: block;
      }
      #navi ul li {
        float: left;
      }
      #navi ul li a {
        font-size: 14px;
        padding: .3em .7em;
      }
      #main {
        margin-left: 10px;
        float: right;
        width: 520px;
      }
      div#sidebar {
        box-sizing: border-box;
        clear: none;
        float: left;
        padding: 0;
        width: 280px;
      }
    }
  • #59723 返信

    taka

    Akiraさんにお直し頂いたCSSをそのまま貼りました。
    素晴らしい見栄えになり、感動しました。
    CSSについて、まったくの初心者で修業中の身ですが、
    問題箇所がわかり、とても勉強になりました。
    ありがとうございました。
    Simplicity2のレスポンシブ、素晴らしいですね。

返信先: 横幅が1150px未満でもサイドバーを横に表示させたい
あなたの情報:




スポンサーリンク
アドセンス(大)
アドセンス(大)