海外行ったことないけどebay輸出

ebay輸出のブログ / File exchangeの使い方 / Affinger4カスタマイズ / Amazonプライムビデオ

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

投稿日:2017年11月26日
このページは に更新されました。

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

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

追記:見た目を少しだけ変更したので、CSS追記しました。メニュー横幅100%の方向けです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

アイコン一覧

※バージョンアップして、Fontawesomeのサイト画面が少し変化しているようです。「PRO」と表示されないアイコンが無料で使用できます。

コードをコピーする

コードのコピー

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

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

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

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

あとは保存して完了!

入力場所の再確認

外観 ⇒ メニュー ⇒ 編集するメニューを選択(スマホ 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%にしている」場合に適しています。

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

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

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

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

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

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

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

おわり

🔥 Thank you for your time! 🔥

  • この記事を書いた人
  • 最新記事

yotta(よった)

海外ECサイト ebay(イーベイ)で販売者やってます(in2018) 自分がつまづいて困った「ebayの設定方法」解説を中心に、海外への発送手段を比較したりしつつな趣味のブログです。

follow us in feedly

関連の最新情報などは Twitterで発信することが多いです。拡散やフォロー よかったらぜひー! ✨⚽🐕🍻

-Affinger4

Copyright© 海外行ったことないけどebay輸出 , 2018 All Rights Reserved.