サポート » 使い方全般 » 固定ページでサイドバーを消したがメインカラムの幅が広がらない

  • 解決済 casiomeron

    (@casiomeron)


    stinger5を左サイドバーで使用しています。
    固定ページの一部のページを左サイドバーの無い状態で表示したいと思い、 ここのサイト様を参考にしてpage.php をベースに <?php get_sidebar(); ?>を削除したランディングページテンプレートを作りました。

    なんとかサイドバーを消すことはできたのですが、サイドバーの合ったスペース(300px)が空欄のままで、固定ページの幅を広げることができませんでした。サイドバーを削除したテンプレートはlanding-page.phpという名前をつけています。

    試したコードは以下です。

    ↓CSSに記述。!importantも効きませんでした。

    .page-template-landing-page-php main {
    box-sizing: border-box;
    width: 100%;
    }

    ↓landing-page.php これも効きませんでした。
    <style type=”text/css” media=”only screen and (min-width: 780px)”>
    main{
    margin-left:0px;
    }
    </style>

    初心者ゆえ行き詰まってしまっております・・・。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • 参照先ありがとうございます。参考にwidthをmax-widthにしたりwrapperに書いてみたりしましたが、やはりサイドバーのあったスペースが空いたままでメインの幅が広がりません・・・。試してみたコードの例は↓のような感じです。

    //ランディングページのカスタムページ・テンプレートについてのスタイルをCSSに
    .page-template-landing-page-php main {
    box-sizing: border-box;
    max-width: 1280px !important;
    }

    //ランディングページのカスタムページ・テンプレートに直接書きました
    <style type=”text/css” media=”only screen and (max-width: 780px)”>
    #wrapper{
    margin-left:0px;
    max-width: 1280px;
    }
    </style>

    リンク先に書いてある下記の注意点は大丈夫ですか。

    注意点その1 「style.css」の記述場所

    ひとつ目はコードの記述場所。必ず領域①に書いてくださいね。

    こちらの記事に書いたようにStinger5のstyle.cssはデバイスごとに4つの領域に分かれています。うっかりタブレット用のサイズにコードを足してしまうとレスポンシブデザインが崩れます。
    気をつけてくださいね。

    領域①とされているところに
    //ランディングページのカスタムページ・テンプレートについてのスタイルをCSSに
    .page-template-landing-page-php main {
    box-sizing: border-box;
    max-width: 1280px;
    }
    記述もしてみましたが変わりませんでした。 max-width: 100%;も効かないです。

    .page-template-landing-page-php main(固定ページのメイン幅のみ)のwrapperを指定するにはどのように書けばよいのでしょうか??汗

    最初に書きましたが Stinger5 を使っていないのでわかりません。ほかの方からコメントが付くとよいですね!

    どなたか原因がわかる方いらっしゃいませんでしょうか・・・?

    style.cssでマージンを0に指定することでメインカラムの幅が広がりました。お騒がせしました。

    .page-template-landing-page-php main {
    margin-left: 0px;
    }

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「固定ページでサイドバーを消したがメインカラムの幅が広がらない」には新たに返信することはできません。