WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。
今日はヘッダーのメニューの編集です。
STINGER8も他の多くのWordPressテーマ同様、ヘッダー(サイトの上のほう)にメニューを配置できます。
各メニューの字を灰色の線で区切ったようなシンプルなメニュー。
画面サイズにもよりますが、パソコンサイズだとSTINGER8はおおよそ６つ項目を並べることができ、それ以降は２列になります。
メニューの項目が７つや８つだと中途半端に２列になってしまい外観がいまいち。
メニューの項目を詰めたり離したりできるようにしたいと思います。
作業の流れは以下の通りです。
手順
１．子テーマの準備
２．「style.css」を編集
※すでに子テーマを使っている方は読み飛ばしてOKです。
子テーマはなくてもいいですが、バックアップの面や今後のアップデートを考えると子テーマでの編集をおすすめします。
STINGER8はホームページからテーマ本体だけでなく子テーマもダウンロードできるのでそちらを使うのをおすすめします。
子テーマをダウンロードおよびインストールしたら、
WordPressの「外観」→「テーマ」にてSTINGER8の子テーマを有効化しておきます。
「style.css」を編集します。
「style.css」は子テーマにもともと入っているのでそのまま開きます。
「外観」→「テーマの編集」にて「style.css」を。
今回はパソコン画面での表示に関してカスタマイズします。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*-- ここまで --*/
}「style.css」のこの部分に追記していきます。
header .smanone ul.menu li{width:120px;}このコードを追記したいと思います。
「width」の部分の数値を変えると幅を詰めたり広くとったりできます。
120pxだとデフォルトよりぎゅっと詰めた感じになります。
/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
/*メニューの幅を調整する↓↓----------------------*/
header .smanone ul.menu li{width:120px;}
/*メニューの幅を調整する↑↑----------------------*/
/*-- ここまで --*/
}俯瞰してみるとこのような感じになります。
コメントは個人的にあとからわかりやすいように書きましたが、動作的にはなくてもOKです。
【引用・参考サイト】
・『Plus Plus』（【WordPress】STINGER8におけるヘッダーメニューの簡単カスタマイズ集）2017年5月7日検索
・『きになるnet』（【STINGER7】メニュー幅や高さのカスタマイズ方法）2017年5月7日検索