
今まで、スマホフッターメニューのアイコンは、Affinger6「テーマ管理」>「その他」にある”FontAwesomeIcons4.7.0の読み込み”のチェックを入れて有効化してFontAwesome4アイコンを使用していました。
ところが、FontAwesome4を有効化するとGoogleの「PageSpeed Insights」で「ウェブフォント読み込み中のテキストの表示」に警告が出ていることが分かり、FontAwesome4.7.0のチェックを外して無効化すれば、警告が解消されることが分かりました。
FontAwesome4を無効化すると「PageSpeed Insights」の警告表示は消えますが、当然ながらスマホフッターメニューのFontAwesome4のアイコンが消えてしまいます。
そこで、FontAwesome4を無効化した状態で、スマホフッターメニューにFontAwesomeアイコンの代わりにAffinger6のオリジナルアイコンを使う方法の紹介です。
Affinger6のオリジナルアイコンについて
Point
1 アイコンの種類
Affinger6のオリジナルアイコン(Webアイコン)は、テーマファイル中の st_svgフォルダーに内蔵されています。 アイコンの種類は112種類あります。 夫々のアイコンにクラス名が付与されています。 詳しくは、AFFINGER6オリジナルアイコンリスト(公式マニュアル)を参照してください。
FontAwesome4又は5を導入すれば、多くのアイコンを手に入れられますが、前述したように、「PageSpeed Insights」で警告が発出される可能性があります。 Affinger6のオリジナルアイコン(Webアイコン)は、112種類のアイコンのみですが、取敢えず実用上は問題ないアイコン種類を選択できます。
Point
2 アイコンの一般的使い方
投稿記事中でオリジナルアイコンを使うには、「タグ」中からパーツを選択した時に、ショートコード中にある webicon="" にクラス名(例えば、st-svg-check-circle 等)を記入すれば当該アイコンが表示されます。
また、本文中に単独でアイコンを表示するには、下のショートコードで記述すればアイコンが表示できます。
shortcode [st-i class="(st-svgで始まるクラス名)" add_style=""]で表示できます [st-i class="st-svg-heart" add_style="font-size:2em;color:red;"] ハートと記載すると 表示例の様にハートマークが2倍の大きさの赤色で指定する等、デザイン変更も可能です。
オリジナルアイコンの表示例
ハート
Point
3 HTMLで使う場合
テキストモードにして、下の様にアイコンのクラス指定して記述すれば、上記ショートコードと同じ様に表示できます。
HTML <i class="st-svg-heart" style="font-size:2em;color:red;"></i> ハート
ハート
スマホフッターメニューでオリジナルアイコンを使う
ここの説明は、既に「スマホ用フッターメニュー」が設定されていて、アイコンの挿入に係る説明になります。 (新たに「スマホ用フッターメニュー」を作成する場合は、【Affinger6 スマホ用フッターメニュー】等でネット検索すれば、色々なサイトで紹介されていますので、ここでの説明は割愛します。)
Step
1 今回使うオリジナル・アイコン
今回使うアイコンは、下の3つです。
HOME(Top)ページ用
Webアイコン・クラス名:
st-svg-home
ハイレコページ用
Webアイコン・クラス名:
st-svg-lightbulb-o
ページ先頭へスクロール用
Webアイコン・クラス名:
st-svg-double-up
Step
2 オリジナルアイコンの挿入設定
既に「スマホ用フッターメニュー」が設定されていて、アイコンの挿入に係る説明になります。
WordPressの管理画面から 外観 > メニュー を選択し、更に既に作成されている「スマホ用フッターメニュー」を選択します。 例えばHOMEの場合は「ナビゲーションラベル」に以下のコードを記入します。
ナビゲーションラベル <i class="st-svg-home" aria-hidden="true" style="font-size:1.2em;"></i> HOMEコードの説明
class:Webアイコンのクラスを指定
aria-hidden="true":「読み上げをスキップ(読み上げない)」
style:font-sizeでアイコン(文字)倍率を指定して大きさを調整
他の、「ナビゲーションラベル」も同じ様に記入すると、下の様にオリジナルアイコンが挿入されたスマホフッターメニューが表示されます。
これが、Affinger6のオリジナルアイコン(Webアイコン)を使って完成したスマホフッターメニューです。
以上、FontAwesomeアイコンを使用しない、Affinger6のオリジナルアイコンを使ったスマホフッターメニューの説明でした。