AFFINGERのカスタマイズ

【AFFINGER】スマホでフッター固定メニューを作成して、アイコン画像を付ける方法

【AFFINGER】スマホでフッター固定メニューを作成して、アイコン画像を付ける方法

AFFINGER5EX・6・6EXでのカスタマイズ方法です。

スマホで表示した際に出る

スマホ下のフッターメニュー固定

をしていこうと思います!

おすすめ!アイコンの無料素材

フッター固定のメニューには、見やすいようにアイコンを使用するのがおすすめです。

そのため、必要なアイコンを揃えます!

私は、基本的にこの2個所を使用することが多いです。

アイコンのおすすめサイト

好きなカラー設定ができるのが「ICOOON MONO」です。

アイコンをダウンロードしたら、WordPressのメディアにアップロードします。

※サイズは後程変更できるので
使用したいサイズより大きめの画像を選んでおくと、画像が綺麗に表示されます。

フッター固定メニューを反映させよう!

「AFFINGER管理」からフッター固定メニューを反映させます!

確認しながら作業をするために、先に反映させるのがおすすめ

「AFFINGER管理」>「メニュー」を開きます。

一番下にある「スマホフッターメニューを表示する」にチェックを入れます。

これで、スマホフッター固定メニューが反映されました。

続いて、メニューを作成していきます。

メニューを作成しよう!

アイコンのアップロードが済んだら、メニューを作成していきます。

新しいタブで開いておくと、スムーズに捗ります!

WordPressのダッシュボードから
「外観」「メニュー」を開きます。

「新しいメニューを作成しましょう」で新しいメニューを作成します。

「メニュー名」を作成して

「スマホフッターメニュー」にチェックを入れて「メニューを作成」をクリックして保存

これで、フッター固定メニュー用のメニュー作成ができました。

メニューを設定しよう!

メニューの数は?

続いて、メニューを挿入していきます。

スマホフッター固定メニューは、

  • 多くて4つ
  • 少なくて3つ

最近の傾向は、キラーページ誘導に1つにしているサイトを多く見かけます。

AFFINGERはフッター固定メニューを作成すると、右下に出る「TOPへ戻る」ボタンが表示されなくなります。

メニュー項目の追加は”カスタムリンク”で行う!

メニュー項目を追加する場合は、リンク文字列にHTMLコードの挿入ができる「カスタムリンク」で行っていきます。

項目概要
URLメニュー表示させたいページのURL
リンク文字列表示させたい文字
例:HOME・お問い合わせ・メニュー等

「メニューに追加」でメニューを追加します。

アイコンを入れよう!

アイコンを表示させる

アイコンは「ナビゲーションラベル」に記載します。

<img src="【画像URL】" alt="" width="20" height="20"/>表示させたいメニュー名

を「ナビゲーションラベル」に追加します。

画像のURLは
「メディア」⇒ 「使用したい画像」を選択

URLをコピーします。

<img src="ここに貼り付け" alt="" width="20" height="20"/>表示させたいメニュー名

画像サイズは

  • width:横幅
  • height:高さ
<img src="【画像URL】" alt="" width="20" height="20"/>表示させたいメニュー名

おおよそ縦横20~30くらいがおすすめ

フッター固定は、このまま2段に分かれます。

すべてのメニューに、同じ作業を行い「メニューを保存」します。

ただこのままだと行間が狭いので、調整をしてあげた方がすっきりします!

< Font Awesome の場合>

やり方は同じ

アイコンと文字の隙間を調整したい場合

通常、このままの場合はアイコンと文字の隙間(行間)が詰まった状態になっていると思います。

行間の調整は、CSSで調整を行っていきます!

WordPressダッシュボードから
「外観」>「カスタマイズ」>「追加CSS」

\ 追加CSSに追記 /

.margin-bottom3 { margin-bottom: 3px; }

「.margin-bottom5」はクラス名なので、英数字なら何の名前にしてもOK。

赤文字の数字を大きくすると、隙間が広くなります。

10pxくらいにすると隙間が空きすぎるので、5px以下くらいがおすすめ

「公開」ボタンを押して保存します。

先ほどの「メニュー」に戻り

<img>の前と後に、コードを追加します。

<div class="margin-bottom3"><img src="【画像URL】" alt="" width="20" height="20"/></div>HOME

全てのメニューに反映させ「メニューを保存」

これにて、メニューの設定は完了です。

まとめ

スマホフッター固定メニューの作成方法でした!

このアイコンを画像にするやり方は、ヘッダーにも使用できるので、ぜひやってみてください。

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

まめこ

【ブログ歴10年】

これからブログを書いてみたいなという人に向けて『ブログを始める手順』『ブログについて』や知っておくと便利な『おすすめツール』の紹介しています。

夫について行き海外生活スタート▸出産▸現在3歳の息子と在宅での生活

子育てのかたわらでも、場所や時間にとらわれない働き方を目指して発信していきます!

-AFFINGERのカスタマイズ
-,