Affinger（アフィンガー）のスマホ用フッターの設置方法

今回は、Affinger5のスマホ用フッターデザインを見やすく設定する方法をご紹介します！

こんな人におすすめ

スマホ用フッターの設置方法

まず初めにフッターを設置していきます。

この順番で簡単に設置ができます。

編集画面から、外観　→　メニューの順で開く

メニューを編集　→　”新しいメニューを作成しましょう” で新規のメニューを作成する

メニュ構造の”メニュー名”を入れる

今回は、分かりやすいように”スマホ　フッダー用　メニュー” でメニューを作成しています。

ここは自分が分かればOKなので、名前はなんでもいいです。　

メニュー設定 → スマートフォンフッター用メニューにチェックをいれる

”メニュー項目を追加”から”カスタムリンク”を選択

フッターに表示させたい文字と文字に対応するURLを記入

今回は、『Home』、『Site-map』、『SNS』、『TOP』の４つを作成。

TOPへ移動のURLは、#wrapperと入力するといいですよ！

あとで何度でも作り変えることができるので、どの項目を作りたいか悩んでいる人は、とりあえず『Home』、『Site-map』、『SNS』、『TOP』を作ってください！

これで、スマホフッターメニューを設置できました。

アイコンを表示させる

つぎに、文字に合ったアイコンを表示させます！

今回は、無料のアイコンサイトのfontawesomeを使います！

フリーのアイコンでも、じゅうぶんかわいくなりますよ！

≫fontawesomeのサイトへ移動する。

好きなアイコンを選ぶ

ちなみに、Homeのアイコンを探しています。

コピー

<i class～　からはじまるコードをコピーして、カスタムリンクのナビゲーションラベルに貼り付ける。

『aria-hidden="true"』の『true』を削除して、</i>の後に</br>を入れてください。

よく分からない方は、下のコードをコピーして貼り付けてください。

Home

<i class="fa fa-home" aria-hidden=""></i><br>Home

Site-map

<i class="fa fa-sitemap" aria-hidden=""></i><br>Site-map

SNS

<i class="fa fa-twitter" aria-hidden=""></i><br>SNS

TOP

<i class="fa fa-arrow-up" aria-hidden=""></i><br>TOP

こんな風にすべてのカスタムリンクにアイコンを入れると、ほぼ完成です。

これに時間をかけるのはもったいないので、パパッと終わらせてください！

アイコンのデザインに迷ったり、細かい設定が分からないなら、とりあえずコピペして、時間があるときにこのサイトをゆっくり見てください！

アイコンのサイズ・カラーを変更

さいごに、アイコンのサイズとカラーの変更の方法をご紹介します。

外観 → カスタマイズ → [+]メニューのカラー設定 → スマホフッターメニューまで移動します

文字色・フッダーの背景色・ fontawesomeアイコンサイズ(%)の変更が可能

スマホで見ると、こんな風になります。

フッターメニューは簡単にできる

• Affingerでもスマホ用フッターのデザインは簡単にできる
• 慣れてしまえば、10分程度でカスタマイズ可能

もっとこうした方がいいよーっていうのがあれば、ぜひ教えてください！

最後まで読んで頂きありがとうございました！