Stinger5カスタマイズ!サイドバーを削除、すっきり1カラムにする方法。特定ページだけなしにもできるよ

公開日: : 最終更新日:2014/10/12 Stinger, Wordpress ,

Stinger5カスタマイズ!サイドバーを削除、すっきり1カラムにする方法。特定ページだけなしにもできるよ

カスタム次第で全く違ったモノへと進化するWordpressテーマ「Stinger5」。
今回は「サイドバーを削除して1カラムにしたいんだけどどうすればいいの?」と質問を頂いたので、お答えしたいと思います。

このカスタマイズは「全ページから削除したい場合」と「特定ページから削除したい場合」で方法が変わってきます。
目的に合った方を試してくださいね。

Sponsored Link


デフォルトではこうなってるよ

Stinger5のサイドバー部分は各ページの「php」ファイルで「sidebar.php」を読み込んで出力しています。

たとえばトップページの「home.php」ではこんな感じ。

サイドバーの読み込み部分

なのでサイドバーを消すには

  • 読み込んだ「sidebar.php」の中身をなくしてしまう
  • 「sidebar.php」を読み込まないようにする

  • の2通りの方法があります。

    今回は

  • 全ページから削除 → 読み込んだ「sidebar.php」の中身をなくしてしまう
  • 特定ページのみ削除 →「sidebar.php」を読み込まないようにする
  • という方針でカスタマイズしていきます。

    全ページから削除したい場合

    カスタマイズ概要

    全ページから削除する場合、変更するのは「sidebar.php」と「style.css」の2つのみ。

    はじめに「sidebar.php」を編集して、読み込む中身をなくしてしまいます。
    次に「style.css」を調整して見た目を整えれば完成です。

    Step1 「sidebar.php」の中身をなくす

    まず「sidebar.php」に書いてある中身を全削除してください。
    これで読み込んだ中身をなくせます。

    ※サイドバーを復活させる可能性が少しでもある場合はどこかにメモをとっておいてくださいね

    Step2 cssを調整

    このままだとサイドバーがなくなった分余白や大きさがおかしくなっています。
    修正のために以下のコードをcssの「領域④」に追記してください。
    (Stinger5のstyle.cssはデバイスごとに4つの領域にわかれています。詳しくはこちらの記事をご覧ください。)

    ピクセル数によるcssの適用領域

    main {
    	margin-right: 0px;
    }
    

    ここまで終えるとこんな1カラム表示になっています。

    1カラムになりました

    これでカスタマイズは完了ですが、この方法だと「sidebar.phpを読み込む」流れが無駄ですね。
    表示速度を早くするためにも無駄なコードは少ないほうがいいです。できれば次に紹介する「特定ページ」の方のやり方を使ってください。

    特定ページのみからサイドバーから削除する場合

    カスタマイズ概要

    特定ページから削除する場合には削除したいページのphpファイルを変更します。
    対応しているphpファイルは

  • トップページ → 「home.php」
  • 記事ページ → 「single.php」
  • アーカイブページ → 「archive.php」
  • です。

    Step1 読み込みコードを消す

    まず削除したいページのphpファイルからサイドバーの読み込みコードを消します。

    <?php get_sidebar(); ?>
    

    の部分を消してください。

    Step2 余白を調整

    続いて余白の調整です。「main」の余白を変更します。
    ただし「style.css」は触りません!変更したphpファイルに直書きします。

    どうしてstyle.cssに書かないの?

    今回変更したいのは「サイドバーをなくしたページ」のmain部分。
    style.cssに余白の幅を指定すると「すべてのページ」のmain部分に変更が反映されてしまうので、サイドバーがあるページの表示が崩れてしまいます。
    これを防ぐために削除したページのphpに直書きしていきます。

    サイドバーを削除したphpの「main」の下に以下のコードを追記してください。

    <style type="text/css" media="only screen and (min-width: 780px)">
    main{
         margin-right:0px;
    }
    </style>
    

    これで特定ページからサイドバーを削除出来ました。
    例えばトップページのみサイドバーを消すとこうなります。

    トップページのみサイドバー削除

    あとがき

    サイドバーを無くすと画面を広々使えますね!
    今回は記事一覧や記事本文を広げましたが、他にも色々できそうです。
    ぜひ自分好みにカスタマイズしてください。

    最後まで読んでいただきありがとうございました。
    Jimon(@jimon_s)でした。

    jimon


     これは!と思ったらシェアして頂けると嬉しいです
    • このエントリーをはてなブックマークに追加
    • Pocket
    • 111 follow us in feedly
    Loading Facebook Comments ...

    Comment

    1. ダイ より:

      記事ページ → 「home.php」
      トップページ → 「single.php」
      の間違いでないです?

      • Jimon より:

        コメントありがとうございます。
        記事ページが「single.php」、トップページが「home.php」で合っています。

    2. Shiho より:

      初めまして、こんにちは。
      とても親切なカスタム解説に、初心者の私はとても助かっています!
      ありがとうございます(≧▽≦)

      ところで、1つ質問なんですが、

      私は固定ページを作って、そこを1カラムにしました。
      サイドバーも削り、幅を広げようとしましたが、うまくいかないんです(>_<)
      ここで最後のCSSに

      main {
      margin-right: 0px;
      }
      と入れると、
      その固定ページだけじゃなく、すべてのページにこれが適用されてしまうんですが、
      その原因って分かりますか?

      もしかしたら「えー、何その質問」って感じかもしれませんが、超初心者なので、
      大目に見ていただけると嬉しいです(*´ω`)

    3. Shiho より:

      度々、ごめんなさい!

      ちょこちょこ動かしていたら、何とか解決しました(*´ω`)
      スミマセンでした、ありがとうございました!
      また色々、カスタマイズの参考にさせてもらいます♪

      • Jimon より:

        ご質問ありがとうございます!
        また何かわからないことがあったら聞いてくださいね

    4. […] 知人が「トップページだけサイドバーを消したい!」とゴネるので、これは!ログさんの記事とかを参考にトップページのサイドバーを消そうと試みたんですよ。 […]

    5. […] Stinger5カスタマイズ!サイドバーを削除、すっきり1カラムにする方法。特定ページだけなしにもできるよ […]

    6. […] ▼これは!ログ:Stinger5カスタマイズ!サイドバーを削除、すっきり1カラム… […]

    7. […] ▼これは!ログ:Stinger5カスタマイズ!サイドバーを削除、すっきり1カラム… […]

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    PROFILE

    Jimon Profile
    Jimon
    東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
    お問い合わせ

    About


    おしゃれな小物とiPhone,Macの情報発信ブログ。
    管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

    PAGE TOP ↑