ワードプレスブログのメニュー項目に英語のサブタイトルとアイコンを表示するウホ！

更新日：2017年10月14日

前回、ブログのメインメニューの設定の仕方を学んだエテキチ。

今回は『メニュー項目に英語のサブタイトルとアイコンを表示させる方法』を教えてもらうようだ。

エテキチ

うう…いててウキ…すっからかんウキ…。

ゴリキチ

ど、どうしたウホか！？顔がアンパンマンみたいにぱんっぱんになってるじゃないウホか！

エテキチ

この前のレッスンの後、バナナを食ながら女の子とおしゃべり出来るお店『ファンキー悶キーベイベー』に行ったウキ。お店の外にいた優しそうなお兄さんは『5000円ぽっきり』って言ってたのに、最後会計する時になって10万円を請求してきたウキよ。

ゴリキチ

完全にぼったくられたわけウホね。で、払ったウホか？

エテキチ

そもそも3000円しか持って行ってないのに無理に決まってるウキ。『出世払いでお願いしますウキ、じゃ。』って言って帰ろうとしたらものすごく大きくて怖いお兄さんが出てきたウキ。

ゴリキチ

3000円持って5000円ぽっきりのお店に入るエテキチくんもエテキチくんウホね。それでボコボコにされたウホね。

エテキチ

恐いお兄さんはなぜかハリセンを持ってきて軟禁したボクを小一時間はたき続けたウキ。おかげでイケメンフェイスがこのざまウキよ全く。

ゴリキチ

これに懲りたら怪しいお店にはいかないことウホね。

エテキチ

分かってるウキ。ところで今日は何を教えてくれるウキか？

ゴリキチ

前回、ブログにメインメニューを設置したウホけど、今回はそれに関連して『メニュー項目に英語のサブタイトルとアイコンを表示させる方法』をレッスンしようと思ってるウホ。

エテキチ

あれウキか。かっこいいサイトには大体ついてるウキよね。ボクにもできるウキか？

ゴリキチ

もちろんウホ。それじゃあ早速レッスン開始ウホ。

今回やることリスト

メニュー項目に英語のサブタイトルを表示させる

メニュー項目の横にアイコンを表示させる

1 メニュー項目に英語のサブタイトルを表示させるウホ！
2 メニュー項目の横にアイコンを表示させるウホ！

メニュー項目に英語のサブタイトルを表示させるウホ！

ゴリキチ

まずワードプレスダッシュボードにログインしたら前回と同じように『外観』>『メニュー』と進んで、メニューの編集画面を表示させるウホ。

エテキチ

OKウキ。

ゴリキチ

そしたら画面右上の『表示オプション』をクリックするウホよ(上図参照)。

エテキチ

ポチっとなウキ。

ゴリキチ

今度は出てきた画面の中の『詳細メニュー設定を表示』の中の『説明』にチェックを入れるウホ(上図参照)。

エテキチ

これをチェック…できたウキ。

ゴリキチ

画面下のメニュー構造のところにあるメニュー項目をクリックして、出てきた設定画面の『説明』の所にメニューの英語表記(この場合はTOP)を入力するウホ(上図①)。その後『メニューを保存』をクリック(上図②)してメニューの英語サブタイトル設定は終了ウホよ。

エテキチ

出来たウキ。簡単だったウキね。

ゴリキチ

ここで一旦ブログのトップページを確認してみるウホよ。メニュー項目の日本語の下に英語サブタイトルが表示されているはずウホ(上図参照)。

エテキチ

確かに表示されているウキ。これはかっこいいウキなあ。

ゴリキチ

それはよかったウホ。それじゃあ今度はメニュー項目の横にアイコンを表示させる方法をレッスンするウホ。

メニュー項目の横にアイコンを表示させるウホ！

ゴリキチ

ここではまずアイコンのタグを無料で配布している『Font Awesome』っていうサイトでタグをコピーしてくる必要があるウホ。まずFont Awesomeに入ったら検索の小窓のところに欲しいアイコンの名前を英語で入力するウホ(上図①)。続いて検索結果に表示された目当てのアイコンをクリックするウホよ(上図②)。

エテキチ

ふむふむウキ。

ゴリキチ

次の画面ではアイコンのタグが表示されているウホからこれをコピーしておくウホよ(上図参照)。

エテキチ

コピーっと…できたウキ。

ゴリキチ

そしたらワードプレスに戻ってさっきと同じようにメニューの編集画面を表示させるウホ。ここで『ナビゲーションラベル』のところのメニューの名前の前にさっきFont Ausomeでコピーしたタグを貼り付けるウホ(上図①)。その後『メニューを保存』をクリック(上図②)してメニュー横のアイコン表示の設定は終了ウホ。

エテキチ

ふむふむ、できたウキ。なんてことはなかったウキ。