Twitterはこちら instagramはコチラ

グローバールメニューにお洒落なアイコンをサクッとつけよう!

wordpres_アイコン取りつけ方法_ 設定(CSSなど)

グローバルメニューに隣にこんなアイコンが付いているの見かけませんか?

 

▽ こんなアイコンです ▽

 

グローバルメニュー_アイコン2

▲ 文字のとなりの家マーク ▲

 

こんな感じにちょっとお洒落なアイコン付けてみませんか?

今回の記事ではこんなことを説明します。

 

この記事で紹介すること

グルーバルメニュー文字にアイコンを付ける

今回はアイコンを付けるのに誰にでもかんたんなコードを入力します

設定時間は5分もあればサクッとできます!

 

アイコン取り付けは他の場所にも応用が利きますが

今回はグローバルメニューにアイコンを付けてちょっとお洒落カスタマイズしてみましょう

 

▽ こちらの記事では ▽

  1. WordPress(ワードプレス)
  2. Cocoon(コクーン)
  3. Font Awesome 4

この記事ではグローバルメニューを設定している前提で説明します

 

ワードプレスサイトを使用していてグローバルメニューの設定をしていない方

誰にでもかんたんに作れますのでこちらの記事を参考にしてみてください。

▼ 参考記事はこちら ▼

メニューバー作成⇒Cocoonでおしゃれなレイアウト変更

 

それではサクッとアイコン取り付けましよう

アイコン設置方法

 

管理画面より

「外観」 ⇒「メニュー」をクリック

グローバルメニュー_アイコン設定_メニューをクリック

 

「編集するメニューを選択」より

グローバルメニュー_アイコン設定_編集するメニューをクリック

 

ここでは「めにゅー」を選択

 

グローバルメニュー_アイコン設定_homeをクリック

 

「home」を選択します。

まずは「home」のアイコンを取り付けていきます。

 

Font Awesome 4からアイコンを選ぶ

 

アイコンはこちらの「Font Awesome 4」というサイトから色々選べます。

バージョンアップしたFont Awesome 5もありますが今回はFont Awesome 4で説明します。

 

▽ こちらのサイトへジャンプ ▽

 

▽ アイコンをクリックします

グローバルメニュー_アイコン設定_Font Awesome 4_アイコンをクリック

 

▽ すべてのアイコンをクリック

グローバルメニュー_アイコン設定_Font Awesome 4_アイコンをクリック

 

▽ 検索アイコンに入力

グローバルメニュー_アイコン設定_Font Awesome 4_homeを入力して検索

 

「home」と入力します。

※別のアイコンをhomeに使いたい場合は別のアイコンを選択してください。

次に「家」をクリックしましょう。

 

▽ コードをコピーする

Font Awesome 4_homeアイコンコード画面

 

 

こちらが表示されます。

下へスクロールして枠内のコードをコピーします

Font Awesome 4_home_枠内のコードをコピーする

 

▽ コードはこちら ▽

 

▽ メニューにもどる

メニュー画面に戻り以下のコードを

「ナビゲーションラベル」に入力します。

 

▽ コードを入力 ▽(コピペでOK

 

後ろに付く文字がアイコンの隣に表示される文字です。(こちらでは「home」」

▽ 保存する

「メニューを保存」をクリックします。

 

▽ プレビューで確認

Font Awesome 4_プレビュー確認2 - コピー

お洒落なアイコンが付きました!!!

 

こんな感じで他のグローバルメニューにアイコンも取り付けてみましょう。

 

▽ おまけで更にひと手間追加

ひろくま
ひろくま

アイコンと文字の間隔近いんだよなー

 

こんな方向けの対策があります。

アイコンと文字の間にちょっとのすき間を空けたい人むけの追加コードです。

 

▽ こちらのコードを追加 ▽

 

このコードをアイコンのコードの後ろに付けるとちょっとだけスキマができます。

 

▽ コピペでOK ▽

 

▽ 追加コード後のプレビュー ▽

 

Font Awesome 4_追加コード後確認_

 

わずかですが変更前のと比較してちょっとだけ空いたのわかります?

 

アイコンと文字が近すぎと感じる方は追加コード入れてみてください。

 

ひろくま
ひろくま

気にする人はこんなわずかな細かいところも気にするようです

ちなみに私はこの追加コード入れてます。

近すぎず遠すぎずの間隔がちょうどいい感じですね。

まとめ:アイコンはあればちょっとお洒落

 

▽ 今回のまとめ ▽
  • 設定は誰でもかんたん
  • アイコンがあるとちょっとお洒落な感じ
  • Font Awesome 4で好きなアイコンを選べる
タイトルとURLをコピーしました