Affinger6のスマホフッターメニューにオリジナルアイコンを挿入する方法

 

Affinger6のオリジナルアイコンについて

Affinger6のオリジナルアイコン（Webアイコン）は、テーマファイル中の st_svgフォルダーに内蔵されています。　アイコンの種類は112種類あります。　夫々のアイコンにクラス名が付与されています。　詳しくは、AFFINGER6オリジナルアイコンリスト(公式マニュアル)を参照してください。

FontAwesome4又は5を導入すれば、多くのアイコンを手に入れられますが、前述したように、「PageSpeed Insights」で警告が発出される可能性があります。　Affinger6のオリジナルアイコン（Webアイコン）は、112種類のアイコンのみですが、取敢えず実用上は問題ないアイコン種類を選択できます。

 

投稿記事中でオリジナルアイコンを使うには、「タグ」中からパーツを選択した時に、ショートコード中にある 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倍の大きさの赤色で指定する等、デザイン変更も可能です。

テキストモードにして、下の様にアイコンのクラス指定して記述すれば、上記ショートコードと同じ様に表示できます。

 HTML
<i class="st-svg-heart" style="font-size:2em;color:red;"></i> ハート

ハート

 

スマホフッターメニューでオリジナルアイコンを使う

ここの説明は、既に「スマホ用フッターメニュー」が設定されていて、アイコンの挿入に係る説明になります。　（新たに「スマホ用フッターメニュー」を作成する場合は、【Affinger6 スマホ用フッターメニュー】等でネット検索すれば、色々なサイトで紹介されていますので、ここでの説明は割愛します。）

今回使うアイコンは、下の３つです。

既に「スマホ用フッターメニュー」が設定されていて、アイコンの挿入に係る説明になります。　

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でアイコン（文字）倍率を指定して大きさを調整

他の、「ナビゲーションラベル」も同じ様に記入すると、下の様にオリジナルアイコンが挿入されたスマホフッターメニューが表示されます。

 

以上、FontAwesomeアイコンを使用しない、Affinger6のオリジナルアイコンを使ったスマホフッターメニューの説明でした。