ブログのメニュー項目のアイコン(赤枠の部分)の設定方法を説明します。
テーマにAffinger5を使っている方は簡単に設定できますので、アイコンを付けてみてはいかがでしょうか。
メニュー項目のアイコンを設定する手順は、以下の通りです。
- header.phpにアイコンのリンクを貼る(テーマがAffinger5の場合は不要)
- アイコンサイトに行って設定するアイコンを選ぶ
- メニュー項目にアイコンのリンクを設定する
header.phpにアイコンのリンクを貼る
Affinger5は標準でFont Awesomeに対応しているため、この手順は不要です。header.phpにFont Awesomeのリンクを設定するとSNSのアイコンが表示されない場合があります。
WordPressの外観 > テーマエディターを選択して、テーマの編集画面を開きます。
テーマ編集画面の右上にあるメニューから、テーマを選択します。
以下、Affinger5の手順になっていますが、各自のテーマに置き換えてheader.phpを編集してください。
テーマファイルからテーマヘッダー(header.php)を選択して、header.phpを開きます。
header.phpから</head>タグを探して、その直前に以下の一文を挿入します。(下図の赤枠の部分)
※ v5.12.0の部分は、後述するFont Awesomeのメイン画面のバージョンを記載してください。
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
編集が完了したらファイルを更新を押下して、header.phpを保存します。
アイコンサイトに行って設定するアイコンを選ぶ
以下のリンクを押下して、アイコンサイトFont Awesomeに移動します。
Affinger5はFont Awesome 5には対応していないため、Font Awesome 4を使用してください。
Font Awesome 5の手順
Iconsを押下して、アイコンの選択画面に移動します。
※ header.phpに記載したFont Awesomeのバージョンは、ここで分かります。
設定したいアイコンを探します。
日本語は使えませんので、英単語で検索してください。
設定したいアイコンを選択して、アイコンのリンクをコピーします。
下図の赤枠部分を押下すると、リンクがコピーされます。
Font Awesome 4の手順
Iconsを押下して、アイコンの選択画面に移動します。
設定したいアイコンを探します。
日本語は使えませんので、英単語で検索してください。
設定したいアイコンを選択して、赤枠部分をコピーします。
メニュー項目にアイコンのリンクを設定する
WordPressの外観 > メニューからアイコンを設定したいメニュー項目を選択して、コピーしたリンクを貼りつけます。
メニューを保存を押下します。
以上でブログメニューのアイコン設定は完了です。