「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマBlogPressでグローバルメニューの幅を調整する方法

Q.グローバルメニューの各項目の幅の調整方法

グローバルメニューに複数の項目を設定した場合、一つ一つのメニューの幅を調整出来ませんか?
メニュー数が少ない時、一つ一つのメニュー幅(縦罫線の区切り)が長いので調整したいです。

A.cssファイルとjsファイルの編集が必要です

項目名は8文字以内、項目数も画面に収まる範囲内(6~7個程度)が、レイアウトが崩れずに表示される推奨設定となっていますが、これを変更する場合はCSSおよびJSファイルのカスタマイズが必要です。

編集するファイル:style_pc.css
編集する箇所:

#global_menu { width:●●●px; height:63px; z-index:30;
position:absolute; bottom:7px; left:○○○px;

※width:●●●(初期値980px)およびleft:○○○(初期値0px)の値を変更してください。


編集するファイル:jscript.js
編集する箇所:

var aWidth =●●●/n_size;

●●●数値部分を①で編集したstyle_pc.cssの数値に合わせて変更してください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事