WordPressFontAwesomeの使い方

2024/07/01

index
• 概要
• FontAwesomeプラグインの導入
• 設定の仕方
• メニューコメントの付け方
• 感想

WordPressの設定が一通り終わり一息つくと、次に見栄えをよくしたいと思うようになって、最初に目立つメニューにアイコンをつけたい。これには手っ取り早くFontAwesomeプラグインを使う。FontAwesomeプラグインは無料と有料がある。ここでは無料の基本的なものを使う。ちなみにawesomeとは「素晴らしい」という意味

「ホーム」がメニュー名、houseのアイコンがFontAwesomeでつけたアイコン、メニュー名の下が説明でここでは「home」。

• プラグイン導入
• 設定はそのままでOK

• Font Awesomeアイコンにリンクする。urlは"https://fontawesome.com/icons"
• 右側の 2045「free and open source icon」をクリック

• アイコン一覧から house を選択

• 希望のhouseアイコンを選んで
  <i class="fa-solid fa-house"></i>をクリックするとコピーされる

• WordPressの外観>メニューから、ナビゲーションラベルにコピーしたコードを貼り付ける
• ラベル名を</i>の前に記入する
• メニューを保存

• 設定後の確認
• 必要ならば前画面でホームの前にブランクを挿入する

• 右上に「表示オプション」をクリックし「詳細メニュー設定を表示」の説明にチェック

• メニュー設定に「説明」欄が表示されるので、説明を記入する。ここでは英語のhome

• 設定後の確認

メニュー周りの設定は一度設定すると当分使わないので忘れ易い。Font Awesomeはメニューに限らず他の場所でも使える