メインメニューにアイコン追加

Bizvectorで作成するサイトのメインナビにアイコンを追加する方法をご紹介します。
アイコンをナビに付けることで情報が視覚的に伝わりやすくなります。
今回は初回にピッタリ!ラクラク2ステップ完了です。

仕上がりイメージは以下の画像のようになります。

仕上がりイメージ

アイコンはFont Awsomeから読み込みます。
Font Awsomeを使えば、大きさや色などの見た目が文字部分と自動で揃ったりする上、
ボケもせず、とにかく簡単なので私たちも積極的に使っています。

  1. アイコンをFont Awesomeから読み込む
  2. アイコンをメニューに指定

アイコンをFont Awesomeから読み込む

サイトのheadタグ内にFont Awesome読み込むためのリンクを挿入します。

Bizvectorのheadタグってどこにあるの?
と思われる方、安心してください。

ちょちょちょいとやっていきましょう!

まず、ログインして左側のメニューから「外観」-「テーマの編集」をクリックします。

説明画像1

「編集するテーマを選択」から親テーマである「Bizvector」を選択。

説明画像2

次にテンプレートの中から、「header.php」を見つけてクリック。青色文字で「テーマヘッダー」となっているところです。

説明画像3

これでheadタグ内に記述をすることができます。
headタグ終了直前にFont Awsomeを読み込むため以下のコードを貼り付けます。

↑ サイトが更新されると変わることがあります。
こちらから最新のコードを取得してください。
Font Awsomeサイト

説明画像4

「ファイルを更新」ボタンで変更を保存します。

これでFont Awsomeの読み込み完了です!

アイコンをメニューに指定

読み込みができたらメニューにアイコンを指定します。

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

説明画像5

「編集するメニュー」の中からつくっておいたメインメニューを選択します。
そうするとメインメニューを編集できるようになります。

説明画像6

小さい▼をクリックして展開し、
ナビゲーションラベルにお好きなアイコンのコードを貼り付け。

説明画像7

メニューを保存すれば完成です。

ホームページ作成講座お申し込み・お問い合わせ

ゼロから自分でホームページを作りたい方・作成後も自分で更新管理をしていきたい方はアールズファクトリーの「ホームページ作成講座」へお申し込みください。
完成イメージやスキルに合わせてカリキュラムを組み立て、現役のウェブデザイナーがマンツーマンで丁寧に教えます。