パソコン、ゲーム、自動車、副業、日常生活などを扱う雑記ブログ

naolog

Wordpress

AFFINGER5(WING)メニュー高さ、文字サイズの変更方法

投稿日:2019年4月19日 更新日:

Affinger WING Menu Customize

「Affinger5(WING)でメニューをもっと自由にカスタマイズしたいけど、メニューの幅(高さ)を広げる方法がわからない」
「メニューの幅をカスタマイズした上で、メニュー文字サイズも変更したい」

この記事では、この悩みを解決できます。

Affinger5(WING)はカスタマイズ例の記事も多いんですが、なぜかメニューの高さ方向の幅を変更するカスタムだけ見付からない。

横幅や、メニューをセンター寄せする方法はよく見掛けるんですけどね。

Affinger5(WING)のメニュー幅をカスタマイズする手順

Affinger5(WING)でメニュー幅をカスタマイズする場合、子テーマ(Chile)でのCSS変更をおすすめします。

親テーマでカスタマイズしてしまうと、テーマアップデートの度にやり直しになってしまうので。

 

1. ヘッダーメニューのコードを確認する

WordPress左メニューの外観>テーマエディターから「親テーマ(WING-AFFINGER5)のstyle.css」を開く。

エディタ上に入力カーソルを点滅させた状態でCtral+Fを押し文字検索をエディタ左上に表示させる。

『header .smanone ul.menu li{』で検索すると、以下のようなコードが出てくるので、下記コードと同じ範囲でコピーし、メモ帳などに張り付けておく。

 

2. コピーしたコードを子テーマのCSSに追加する

重要なポイントは、テーマエディターで追加しても全然反映されなかったこと。

私はここでかなり苦悩しました。

外観>カスタマイズ>追加CSSを開く。

先ほどコピーしてメモ帳に張り付けておいたコードを、追加CSSに張り付ける。

これで、このままコードの内容を変更すると、右側のプレビュー画面で即時反映される状態になります。

 

3. メニューの幅(高さ)と文字サイズをカスタマイズする

「width:160px;」が、メニュー1つあたりの横幅を指し、最上部の「min-width: 960px」で最大横幅を指しています。

つまり、960の横幅の中に160幅のメニューが6つ入っているわけです。

ですから、160の数字を仮に120に変更すれば、1段にメニューが8つ入るようになります。

ここまではよく他の記事でも見掛ける内容ですが、今回のメインはここから。

「Height:40px」がメニューの幅(高さ)を指し、これを50や60に変更すればメニューの幅(高さ)が変わります。

しかし単純にメニューの高さを替えても文字の位置がかわりません。

やってみるとわかりますが、メニューの文字がズレるはずです。

「line-hight:40px;」の数字を変更することで、メニュー文字の高さ方向の位置を調節できますから、好みに合わせて変更しましょう。

メニューの文字サイズを大きくしたい場合は、「font-size: 13px;」の13の数字を変更すれば文字サイズは大きくなります。

ただし、文字サイズを大きくすると横方向にもサイズが大きくなるので、文字サイズを変更する場合はメニューの横幅(上で「width:160px;」の説明をした部分)も変更する必要があるでしょう。

変更はすべてリアルタイムで右側プレビューで確認できますから、すべて完了したら公開を押してカスタマイズ完了です。

-Wordpress
-

Copyright© naolog , 2019 All Rights Reserved.