IT

【ひ】WordPressテーマJINでサイドバーを非表示にする方法

お世話になっております。
怠惰の化身ことハルトです。

さて、WordpressテーマJINを購入してから……それなりの時間が経過しました。

カスタマイズにあたって、基本で用意されている項目では対応できないサイドバーを非表示にする方法を説明します。

「デフォルトのカスタマイズ項目でできますよ」
って人は教えてください。

(20190623追記)

やり方がちょっとスマートじゃなかったので、スマートに変更しました。
CSSカスタマイズだけでいいので、前より簡単になったと思います。

ステップ1:CSSのカスタマイズ

WordPressのダッシュボードから、

  • 外観
  • カスタマイズ
  • 追加CSS

の順にたどり、追加CSSに以下の記述を追加します。

@media (max-width: 767px) {
  #main-contents {
    width: calc(100% - 30px);
  }
}
@media (min-width: 768px) {
  #main-contents {
    width: calc(100% - 16.6666666667px);
  }
}
@media (min-width: 1024px) {
  #main-contents {
    width: calc(100% - 50.25px);
  }
}
@media (max-width: 767px) {
  #sidebar {
    display: none;
  }
}
@media (min-width: 768px) {
  #sidebar {
    display: none;
  }
}
@media (min-width: 1024px) {
  #sidebar {
    display: none;
  }
}

するとあら不思議、メインカラムがサイドバーの領域まで伸びて、サイドバーを完全に非表示にすることができました。

何をやっているのかというと、サイドバーをdisplay: none;にすることで非表示にし、空いた空間をメインカラムで埋めるということをしています。

まあ、細かいことは気にせず、とりあえず貼ってみれば、大体思った通りになると思います。

ご注意

固定ページ、投稿、カテゴリー、トップページでうまくいくことを確認しましたが、他にうまくいかないページがあるかもしれません。

もしそうだったら、@HarutoTsukusameまでお知らせいただけると(記事のネタになるので)助かります。