yStandardカスタマイズ: ブラウザ最大幅で(のみ)メニュー非表示

yStandardカスタマイズ: ブラウザ最大幅で(のみ)メニュー非表示
2020年1月28日

このブログでも利用させてもらっている、WordPress用テンプレートyStandardのカスタマイズを紹介します。
今回は、ブラウザ最大幅(1025px以上)において2カラムになる設定で利用していることが前提です。

ブラウザ最大幅(2カラム)でメニューが必要ない場合もある

もし、メニュー内に置いている主な内容が「カテゴリー」であり、サブカラムにも「カテゴリー」があるなら、同じ情報が近い場所に重複してしまいますよね。
この条件ならば、いっそメニューが無い方がすっきりするのではないかと思い、このブログではメニューを消しています。

設定項目には全てのブラウザ幅を対象にしたON/OFFしか無い

yStandardの設定項目ではメニューの表示/非表示を切り替えることができますが、この設定は全てのブラウザ幅に作用します。
今回の私のニーズのように、特定のブラウザ幅でメニューの表示/非表示を切り替えたい場合は、追加CSSで実現するしかなさそうです。

追加CSSをメディアクエリで記述する

追加CSSを入力する場所については、yStandard公式の解説を参考にしてください。
以下ソースコードになります。

@media screen and (min-width: 1025px){
  .h-nav {
    display: none;
    }
}

以上になります。
今回のような要素消す系は、CSSカスタマイズの中でも簡単なものです。
消せない要素はないので、ぜひミニマリスト視点で自身のブログに余計な要素がないか観察してみてください。