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

2020/11/16

むすく

人生はRPG! |特発性過眠症を攻略中|朝も昼も夜もずっとねむたい人間|学んだこと・行動したことをまとめていくブログ|個性:要領悪いけど努力はする|すき:BeatSaber・XR・デザイン|

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

こんな人におすすめ

  • Affinger5でも、スマホでサイトを見た時にフッターを常に表示させたい。
  • 画像付きで,分かりやすく説明してほしい。
  • こんな風なフッターを作りたい人向けです!
実際のスマホ用フッター

この記事の信頼性

このブログはAffinger5(+JET)を使用しており、実際にスマホ用フッターメニューを使っている(2020年11月現在)

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

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

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

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

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

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

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

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

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

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

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

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

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分程度でカスタマイズ可能

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

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

  • この記事を書いた人

むすく

人生はRPG! |特発性過眠症を攻略中|朝も昼も夜もずっとねむたい人間|学んだこと・行動したことをまとめていくブログ|個性:要領悪いけど努力はする|すき:BeatSaber・XR・デザイン|