AFFINGER5

ヘッダーメニュー文字の左側にアイコンを取り付ける方法【AFFINGER5】

 

 ヘッダーメニュー文字の左側にアイコンを取り付けたい人

ブログをオシャレにしたい!

ヘッダーメニュー文字の左側にアイコンを取り付けたいけど、方法がわからない・・・

色んなサイトを見ていると、みんな付いてる。。。オシャレだな~

自分のブログもオシャレにしたいので「ヘッダーメニュー文字の左側にアイコンを取り付ける方法」を教えてください!

 

そんな悩みについて、わかりやすく解説していきます。

 

ヘッダーメニュー文字の左側にアイコンを取り付ける方法はいくつかありますが、今回は、その中でも有名な「fontawesome.com」さんのサイトを活用しアイコンを取り付ける方法について、解説していきたいと思います。

 

このブログはWordPressを使用していて、テーマは「AFFINGER5」を使用しています。「AFFINGER5」は、簡単にアイコンを取り付けることができ、そしてとてもオシャレな記事を作ることができます。また、検索上位を狙うための最強のSEO対策も施されていて、WordPress(ワードプレス)でブログやサイトを持っている人には超おすすめです!

 

SEO最強テーマ「AFFINGER5」が気になる人はこちら ⇓

» WordPressテーマ 【 WING(AFFINGER5)】

 

 

ヘッダーメニュー文字の左側にアイコンを取り付ける方法

WordPressを使用しブログを開設したあと、そのブログ自体を少しでもオシャレにしたいですよね。ブログの見栄えがいいと、記事も読みやすくなります。

 

まずは、下の画像の赤丸で囲った部分を見てください。「HOME」と書かれている左側に「家のマークのアイコン」が表示されていますよね。恐らくこんな感じで付けたいんじゃないでしょうか?

※画像をクリックすると、画像が大きくなり見やすくなります。

 

それでは、ヘッダーメニュー文字の左側にアイコンを付ける方法を解説したいと思います。

 

1.Font Awesome 6 を活用しアイコンを取り付ける方法

当ブログ「KOOOH BLOG」では、「Font Awesome 6」のアイコンを活用させてもらっています。下のステップ通りに進めていけば、簡単にアイコンを取り付けることができますよ。それでは、始めましょう!

 

step
1
Font Awesome 6 にアクセスする

まずは、こちらをクリックしてください

» Font Awesome 6

 

Font Awesome にアクセスすると、下記の画面が出てきます。

 

 

step
2
赤枠部分の検索で「home」と入力する

赤枠部分の検索で「home」と入力すると、「家のマーク」のアイコンが出てきます。家のマークのアイコンが出て来たら、それをクリックしてください。

検索は、英語で入力してください。大文字、小文字は問いません

 

 

step
3
Start Using This icon をクリックする

赤丸部分の「Start Using This icon」 をクリックしてください。

 

 

step
4
<i class="fas fa-home"></i> をコピーする

必ず、Font Awesome のサイトから「<i class="fas fa-home"></i>」を、コピーするようにしてください。

 

 

step
5
WordPressの「外観」→「メニュー」をクリックする

WordPressに戻り「外観」→「メニュー」をクリックしてください。

 

 

step
6
ヘッダー用メニューを選び、選択ボタンをクリックする

編集するメニューを選択という箇所で、「ヘッダー用メニュー」を選び、選択ボタンをクリックしてください。

 

 

step
7
ナビゲーションラベルに <i class="fas fa-home"></i> を入力し、メニュー保存ボタンをクリックする

下記画像の①の赤枠で囲った部分のカスタムリンク設定を行います。

まずは「URL」に、自分のブログのTOPページのURLを入力してください。次に「ナビゲーションラベル」に、先ほどコピーした <i class="fas fa-home"></i> を貼りつけます。

そして、半角スペースもしくは、全角スペースを入れ、その後ろに「HOME」と入力し、②の「メニューを保存」ボタンをクリックすればOKです。

メニューで「HOME」を作っていない人は、「メニュー項目を追加」の中から「カスタムリンク」を右側の「メニュー構造」に、ドラッグ&ドロップしてください

※画像をクリックすると、画像が大きくなり見やすくなります。

 

 

ヘッダーメニュー文字の左側にアイコンを取り付ける方法まとめ

うまくアイコンを取り付けることができましたか?

ブログやサイトって、ちょっとしたことで見栄えが変わってとても読みやすくなります。それにプラスして、価値のある内容を書くことによって間違いなく読者が増えていきます。

 

ぜひ、うまくアイコンを使いながら、オシャレなブログを作って下さいね!

-AFFINGER5

© 2020 KOOOH BLOG. All Rights Reserved.