アフィンガーのメニューですが「デフォルトの高さじゃもの足りない」といった方もいるかと思います。
本記事では「アフィンガーのメニューの高さをもっと広げたい」といった方に向けて、アフィンガー6のメニューの高さを変更する方法を紹介したいと思います。
アフィンガー6のメニューの高さを変更するには、CSSの修正が必要となりますが「CSSなんて触ったことがない」といった方でも安心してください。
本記事の内容を参考にすれば、CSSの知識がなくてもメニューの高さを変更できるようになりますよ。
メニューの高さを変更する方法
冒頭でもお話しましたが、アフィンガー6のメニューの高さを変更するには、CSSの修正が必要となります。
修正箇所のCSSを取得する
まずは、メニューの高さを変更するために修正が必要となるCSSの箇所を探していきましょう。
「そんなのいいから、コピペだけで修正したい！」という方は、ここは読み飛ばして「メニューのCSSを修正する」からお読みください。
ブログのトップページを表示したら、
- Macを使っている人は「command + option + i」
- Windowsを使っている人は「F12」
を押してください。
以下のように、自分のブログのHTMLを表示することができます。HTMLが表示されたら、「Elements」をクリックしたあと、「矢印」アイコンをクリックします。
そのあと、カーソルをメニューのカテゴリの1つに持っていきクリックします。
以下のようなCSSが表示されます。（「header .smanone ul.menu li」となっている箇所が表示される）
以下の2つが表示されているはずなので、コピーします。
「header .smanone ul.menu li」以降をコピー。
「header .smanone ul.menu li a」以降をコピー。
以上の2つのCSSが、アフィンガー6のメニューの高さを修正するときに必要な箇所になります。
メニューのCSSを修正する
それでは、アフィンガー6のメニューの高さを変更していきます。
サクッとメニューの高さを変更したい方は、以下のCSSコードをコピーしてご利用ください。
高さを変更するときのCSS
header .smanone ul.menu li {
box-sizing: border-box;
list-style-type: none;
float: left;
height: 40px;
text-align: center;
border-right: solid 1px #f3f3f3;
position: relative;
}
文字位置を変更するときのCSS
header .smanone ul.menu li a {
display: block;
font-size: 13px;
overflow: hidden;
width: 100%;
height: 100%;
line-height: 40px;
color: #333;
text-decoration: none;
position: relative;
z-index: 1;
}
WordPress管理画面のメニューから「外観」→「カスタマイズ」→「追加CSS」を選択します。
ここに、先ほどのCSSを貼り付けていきます。
まずは、「高さを変更するときのCSS」を貼り付けましょう。
参考
アフィンガーのテーマエディタから「style.css」を直接修正する方法もありますが、アフィンガーのアップデートがある度に上書きされて、変更が元に戻ってしまいます。
追加CSSに記載することで、アップデートがあっても修正したままの状態となるので、こちらの方法をおすすめします。
「height」が高さの調整ができる項目なので、これを変更することで好みの高さにできます。
デフォルトでは「40px」となっていますが、「50px」に変更してみます。
変更前のメニューがこちら。
変更後（height：50px）のメニューがこちら。以前よりメニューの高さが増えましたね。
しかしよくみると、メニュー内の文字位置のバランスが悪いですよね。少し上寄りになっています。
そこで、文字位置の調整をするために、今度は「文字位置を変更するときのCSS」をコピーして「追加CSS」に貼り付けましょう。
「line-height」をメニューの高さと同じ値の50pxにすることで、メニュー文字が中央に表示されるようになります。
メニューの高さに対して、文字の大きさのバランスがよくないと感じたら、「font-size」の値を変更することで文字の大きさを変えることができます。
「文字位置を変更するときのCSS」を貼り付けたときに、メニューの文字色が変わってしまうことがあります。
これはCSSに「color: #333;」が設定されているためです。
文字色が変わってしまった場合は、「color: #333;」を削除するか、好きな色を設定しましょう。
まとめ
アフィンガー6のカスタマイズとして、メニューの高さを変更する方法を紹介してきました。
本記事で紹介したCSSに変更したい項目を追加していくことで、さらにカスタマイズしていくこともできますよ。
ぜひ参考にしていただければと思います。
メニュー関連のカスタマイズでは、アイコンを表示する方法をこちらの記事「アフィンガー6のメニューにアイコンを表示する方法【Font Awesome5を利用】」で解説しているので、気になる方はこちらも参考にしてみてください。
この記事を書いた人
