2018年11月16日スポンサーリンクWordPressテーマ「JIN」では、スマホフッターメニューに以下のようなアイコンを設定することができます。コードを追加すれば、アニメーション動作をつけてアイコンを動かすことも可能となります。その方法を解説していきます。前提JINの公式マニュアルの「スマホフッターメニューの設定方法」に従って設定していき、メニューを作成する追加したいメニューを選ぶ管理画面上部の「表示オプション」にある「説明」にチェックを入れるまで完了していることとします。やりたいこと今回は、スマホフッターメニュー項目「ホーム」に、家のアイコンを設定していきます。Awesome公式サイトの無料アイコンのページから、使用したいアイコンを探します。無料アイコンを探す検索エリアに「home」と入力すると、homeがトップに出てきましたので、クリックします。アイコン「home」の詳細画面に遷移しました。赤枠で囲った部分をクリックすると、コードがコピーされます。fa-homeアイコン名だけです。丸ごと設定してしまわないように注意しましょう。「説明」の項目にペーストした後、””の前後を削除すると良いでしょう。fa-home“></i>保存すると、スマホフッターメニューにアイコンが反映されます。JINスマホフッターメニューへの動くアイコン設定方法やりたいことスマホフッターメニュー項目「ホーム」の、家のアイコンにアニメーション動作を加えます。headタグ内にコードを追加する以下のコードをコピーします。/>管理画面のメニューから「HTMLタグ設定」を選択し、【head内】にペーストし、保存します。このコードを追加することで、アイコンにアニメーション動作を加えることができるようになります。animatedを追加することで、アイコンにアニメーション動作を加えることができます。下記の表の赤字部分です。animated“></i>アイコンにアニメーション動作を加えるスマホフッターメニューにアニメーション動作を加えるためには、少々イレギュラーな設定をしなければなりません。fa-home)を入力しますが、今回は「説明」は空欄にし、代わりに「ナビゲーションラベル」にコードを入力していきます。アニメーション動作“></i><br><small>メニュー名</small></span>ホームのアイコンに、上下に浮かぶアニメーション動作を加える場合、以下のようになります。animated“></i><br><small>ホーム</small></span>これを、ナビゲーションメニューに記入します。保存すると、スマホフッターメニューに動くアイコンが反映されます。まとめアニメーション動作を加える方法は少し分かりづらいかもしれませんが、アイコンが動いているとついついクリックしたくなりますので、ぜひ試してみてくださいね。コメントをキャンセルメールアドレスが公開されることはありません。date*日本語が含まれない投稿は無視されますのでご注意ください。Awesomeの使い方!動くアイコンも簡単表示できますSEの旦那あるある10選おうちITママKaori東京都在住の30代一児の母。文系大学卒業後、プログラミング未経験にも関わらず、地方のIT中小企業に就職。プログラマーとして約7年間勤務した後、フリーランスのITエンジニアとなる。