ebay輸出のことや、Amazonプライムビデオのおすすめ作品などをヨッタさんへ教えるブログ

前略、ヨッタさんへ

コピペでOK!AFFINGER4のメニューにアイコンをつけるカスタマイズ

このページは に更新されました。

AFFINGERのメニューをカスタマイズしたのでサクッと方法をご紹介。各項目にアイコンをつけて、文字サイズやスペースなどを調節しました。

より見やすくしたつもりですが、こればかりは好みの話になるので、当サイトのメニューが見やすいと感じる方はぜひお試しあれ(11月26日現在)コピペで誰でもオッケー!

メニュー中央の画像

2018/4月 現在はこちら

※STINGER PROでも同じようにカスタマイズ可能でしょう。たぶん

この記事のカスタマイズ内容

今回のカスタマイズは、スマホのミドルメニューと通常ヘッダーメニューの二ヵ所。※分かりやすいようにメニュー背景をオレンジで色付けしています。

スマホのミドルメニュー完成図ミドルメニュー完成図

通常ヘッダーメニュー完成図
メニュー完成図

  • メニューの各項目にアイコンを付ける
  • メニューの文字サイズを変更する
  • メニューのスペースを広げる

以上の3つがカスタマイズ内容です。

やることは、スタイルシート(CSS)と、AFFINGER (WING) の設定をカスタムするのみ

ほぼコピペで大丈夫です🙆

yotta
すぐできるので、一緒にやってみましょう

AFFINGER4のメニューにアイコンをつけるカスタマイズ

アイコンをテキストの横にくっつけましょう!

AFFINGER4はWebフォント(FontAwesome)を使用できるように作られてます。(フォントと言っても見た目はアイコンです。もっと言うと、元からFontAwesomeは多数使われています。)

まずは好きなアイコン選んでコードをコピペしましょー。

FontAwesomeで好きなアイコンを選ぶ

アイコン一覧

コードをコピーする

コードのコピー

コピーしたコードを、メニュー設定のナビゲーションラベル部分に入力

ナビゲーションメニューに入力

  • 「スマートフォン用ミドルメニュー」
  • 「ヘッダー用メニュー」

どちらにも設定できます。

あとは保存して完了!

入力場所の再確認

外観 ⇒ メニュー ⇒ 編集するメニューを選択(スマホ or ヘッダー用) ⇒
メニュー構造 ⇒ ナビゲーションラベル

この時点でメニューにアイコンが表示されていればバッチリです。

menu-iconon

コードとテキストの間に半角スペースを入れると更にいい感じ
yotta

Stingerの公式マニュアルでも紹介されてました参考スマホ用フッターメニューの追加

※公式紹介では、"改行の<br />タグ"が入っているのでアイコンとテキストが二段表示になるところが異なるポイント

メニューにアイコン付けるカスタマイズは以上です。

ここで終わってもOKですが、文字サイズが小さいのとスペースに余裕があればなーと感じたので、CSSを入力してさらに調節してみます。

メニューの文字サイズを変更する

メニューの文字サイズはCSSを使います。子テーマのStyle.css などに次の内容をコピペすりゃオッケー!

僕の好みなので、数字は適宜ご変更くださいませ。

ちなみに情報

通常、CSS入力はテーマのStyle.cssに入力しますね。最近気づいたのですが、Style.cssの他にもカスタマイザーの「追加CSS」機能への入力がすごく便利でおススメです。

外観 ⇒ カスタマイズ ⇒ 一番下にある「追加CSS」

コードをコピペ!
custom-menu-font

入力したらすぐに見た目が変わるので、コードの反映結果が分かりやすいです。↑メニューの文字が大きくなってるの分かりますか?

メニューの縦の幅を調節する

文字は大きくなりましたが、窮屈な感じなので、今度はメニューのたて幅を広くします。

menu-height

このコードをコピペ(上で紹介した方法と合体済み)

これで完成です♪

文字を大きくして、縦のスペースを広くしました。

CSSのちょっとした解説

heightで縦幅を指定し、テキスト(li a)にも同じサイズのline-heightつけるといい感じの中央配置になります。他にも方法はあると思いますが、一番シンプルでベターかなと。

他には例えば、#st-menubox li に paddingを設定したりしてもOKです。ただその場合は、a:hoverでbackgroundを変更するときに変な感じになります。

できましたか?

ついでにマウスオンしたときの動作CSSも紹介しましょー

マウスオンで文字の色を変更するカスタマイズ

色はお好みでご変更ください。

マウスオンで背景の色を変更するカスタマイズ

すべてまとめたCSS

少しカスタマイズ箇所を増やしたので追記

  • メニューの上下にラインを追加
  • アイコンの色やサイズを変更

「メニューの横幅を100%にしている」場合に適しています。

必要ない所はコメントがある部分の記述をバッサリ削除でOKです。

あとはー、メニュー数で幅を調節したり、均等揃えにする方法なんかは解説されているサイトが多いと思いますので割愛します。

関連しそうなAFFINGER4メニューカスタマイズ記事もついでに探しました

カスタマイズした環境メモ

  • AFFINGER4のバージョン:Version: 20171115
  • ワードプレスのバージョン:WordPress 4.8.3

個人的にはメニューなんていらねぇ!と考えているのですが、メニュー無くしたらアクセス数が落ちたので、やっぱり必要みたい。

せっかくならば!と数字に繋がるよういじってみました。

yotta
どうかみんなが無駄にメニューをクリックしてくれますように!

おわり

-Affinger4

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.