ブログ運営

【アフィンガー6】メニューの高さを変更する方法を紹介!

2022年1月4日

アフィンガーのメニューですが「デフォルトの高さじゃもの足りない」といった方もいるかと思います。

本記事では「アフィンガーのメニューの高さをもっと広げたい」といった方に向けて、アフィンガー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を利用】」で解説しているので、気になる方はこちらも参考にしてみてください。

この記事を書いた人

くりすぷ

プログラマー10年経験した後、独立。ブロガー、Webライター、ネット物販で収入を得ながら、たまに海外一人旅をしています。

>>プロフィール詳細

-ブログ運営
-