STINGER8 メニューの項目間の幅を変える

WordPressのテーマであるSTINGER8(スティンガー8)のカスタマイズをします。

今日はヘッダーのメニューの編集です。


ヘッダーのメニュー


STINGER8も他の多くのWordPressテーマ同様、ヘッダー(サイトの上のほう)にメニューを配置できます。

各メニューの字を灰色の線で区切ったようなシンプルなメニュー。
画面サイズにもよりますが、パソコンサイズだとSTINGER8はおおよそ6つ項目を並べることができ、それ以降は2列になります。

メニューの項目が7つや8つだと中途半端に2列になってしまい外観がいまいち。

メニューの項目を詰めたり離したりできるようにしたいと思います。


作業概要


作業の流れは以下の通りです。

手順
1.子テーマの準備
2.「style.css」を編集



1.子テーマの準備


※すでに子テーマを使っている方は読み飛ばしてOKです。

子テーマはなくてもいいですが、バックアップの面や今後のアップデートを考えると子テーマでの編集をおすすめします。

STINGER8はホームページからテーマ本体だけでなく子テーマもダウンロードできるのでそちらを使うのをおすすめします。

子テーマをダウンロードおよびインストールしたら、
WordPressの「外観」→「テーマ」にてSTINGER8の子テーマを有効化しておきます。


2.「style.css」を編集


「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日検索