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

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

:2014/9/7 STINGER Wordpress

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

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

スポンサーリンク

記事内リード文下_PC


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

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


    記事下_W左_PC

    記事下_W右_PC

    -STINGER, Wordpress
    -,

    サイドバー上_PC

    CATEGORY
    この記事のカテゴリ
    STINGERの親カテゴリ
    ブログ内の他のカテゴリ
    更新チェックはこちらから!