いのっすブログ

使用してみたおすすめのグッズや情報を紹介します。

アフィンガー4(affinger5)のメニュー幅を変更する(狭める・広げる)方法

 2016年11月19日  

アフィンガー4のメニュー幅を変更している図

ワードプレステーマ、アフィンガーのメニュー幅(グローバルナビの幅)を変更する方法です。

↓のどちらの方法でも可能です。かんたんな方から紹介します。

スポンサーリンク

ワードプレスのダッシュボードから変更する方法

WPダッシュボードの「外観」→「カスタマイズ」→「[+]メニューのカラー設定」→「PCヘッダーメニュー」→「メニューの幅(px)」の欄を任意の数値に書き換えます。

デフォルトが160pxですので、大きく記入(180pxなど)すれば広がり、小さく記入(135pxなど)すれば狭まります。

メニュー幅全体が1060pxなので、7等分したければ、1060÷7=151px になります。

子テーマstyle.cssから変更する方法

子テーマstyle.cssに以下を追記します。コピペでOKです。

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {
    header .smanone ul.menu li{
        width:151px !important;
    }
}

width:151pxのところの記入する数値は、上の説明と同様です。

スポンサーリンク

-アフィンガーカスタマイズ