【STINGER PLUS+】ヘッダーメニューの幅を調節する方法!3分あれば変更可能!

WordPress テーマ【STINGER PLUS+】を使用しているのですが、ヘッダーメニューの数を増やしたら二段になってしまったので、 子テーマstyle.css に追記しました。 ヘッダーメニューの幅の変更方法を備忘録としてメモしておきます。  

 

 ヘッダーメニューの追加方法

 一応、ヘッダーメニューの追加方法の確認をしておきます。

基礎の基礎で、かつヘッダーメニューの幅の変更方法とはあまり関係ないので読み飛ばしてしまってOKです。

 

 『外観』→『メニュー』→固定ページ、投稿、カスタムリンク、カテゴリーから 選択し、「ヘッダーメニュー」へドラッグして 項目を追加します。

ここで追加した項目が多いと、 STINGER PLUS+の最初の設定ではメニューが2段になってしまいます。

 

  style.css をいじる

style.cssの2817行目がヘッダーメニューの幅調節できる部分でした。

header .smanone ul.menu li{
		list-style-type:none;
		float:left;
		width:160px; 
		height:40px;
		text-align:center;
		border-right:solid 1px #f3f3f3;
		position:relative;
	}

黄色でマーカーをした部分がヘッダーメニュー幅を変える部分です。

もともとは160pxですので、追加したメニューの数に合わせて調節していきましょう。

 

chrome を使用している場合は、右クリックの「検証」→「Sources」→「style.css」を開きます。2820行目がwidth(幅)の記載なので、ここのpxをいじると見た目が変わります。リアルタイムで変わるのでわかりやすいかと思います。これで丁度良い px を探しましょう。

 

 

STINGER PLUS+子テーマの style.css に追記する

丁度良いpxが分かったら、STINGER PLUS+子テーマの style.css に追記しましょう。

 

例えばこんな感じ↓で追記します。

/*ヘッダーメニュー*/
header .smanone ul.menu li{
		width:145px; 
}		

↑のように変更した部分だけ子テーマのstyle.css に追記すればOKです。

ちなみに、「/*ヘッダーメニュー*/」は自分の分かりやすい名前(「メニュー」だけでもOK)に変更可能です。

 

 

まとめ

子テーマのstyle.cssにちょこっと一文追記するだけで終了なので、案外簡単です。

ほぼ自分用メモですが、誰かのお役に立てれば幸いです。