ウィンドウを縮めたらサイドバーが記事の下へ行ってしまいます。

  • 解決済 torabutta

    (@torabutta)


    9年、 3ヶ月前

    現在テーマはSparkingで２カラムで使っています。
    左に記事、右側にサイドバーがあります。ウィンドウを縮めたら記事の下に行き１列になってしまいます。少しずつウィンドウを縮めると左の記事が一瞬拡大しサイドバーを押し退ける感じにも見えます。最終的には記事の方は小さくなります。
    ウィンドウを縮めたら移動やサイズの変更が起こらず、ヤフートップページのようにカットされる感じにしたいです。固定幅で調べ#main{},#content{},#wrapper{}の中身のサイズを変更とありましたが、私のstyle.cssにはこのような記述がありませんでした。　外観＞CSS編集の部分に
    @media screen and (min-width: 600px) {
    body .site {
    min-width: 960px;
    }
    }
    を書き横にスクロールは出来るようになっています。
    サイドバーが移動しないようにするにはどうすればよいでしょうか？
    初歩的な質問だとは思いますがよろしくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ishitaka

    (@ishitaka)

    9年、 3ヶ月前

    Sparking テーマは、Bootstrap という CSS フレームワークを使用したレスポンシブ レイアウトとなっています。
    この為、スタイルで幅だけを固定にしてもグリッド（記事部分やサイドバーはこのグリッドを使用しています）やナビ（メニュー）等はレスポンシブを無効にしないと正しく表示されません。

    Bootstrap のレスポンシブを無効化（固定幅レイアウト）する方法は公式ページ（下記リンク）で説明されています。
    Disabling responsiveness

    ざっくりと手順を説明すると、

    1. header.php から <meta name="viewport" content="width=device-width, initial-scale=1"> を削除する。
    2. 公式サイトより、non-responsive.css をダウンロードして、テーマに組み込む。
    3. HTML のグリッド システムのクラス（col-sm-,col-md-,col-lg-）を「col-xs-」に置き換える。

    となります。

    かなりの作業が必要なので、Sparking テーマを使用するのであればレスポンシブのまま使用することをお勧めします（本末転倒ですみません）。

    • この返信は9年、 3ヶ月前にishitakaが編集しました。
    トピック投稿者 torabutta

    (@torabutta)

    9年、 3ヶ月前

    こういった所で質問するのは初めてで質問するのも不安でしたが、
    分かりやす説明をしてくれてありがとうございます。
    テーマによってここまで編集方法が変わる事を知らなかったので助かりました。

    BootStrapについて調べてから実際にやるか検討したいと思います。

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「ウィンドウを縮めたらサイドバーが記事の下へ行ってしまいます。」には新たに返信することはできません。