【ホームページ入門】SWELLでヘッダーメニューをかっこよくカスタマイズしよう(アイコンを表示させよう)

記事
IT・テクノロジー
こんにちは。
今回はワードプレステーマ「SWELL」を使用して、ホームページのヘッダーメニューにアイコンを入れる方法をご紹介いたします。

ヘッダーメニューにアイコンを入れる理由は?

★ユーザーが使いやすくなり、サイト全体の使いやすさが向上するため

ヘッダーメニューにアイコンを入れることで、視覚的にどんなページなのか分かりやすくなります。
例えば、「ホーム」「お知らせ」「お問い合わせ」などのアイコンがちゃんと並んでいると、迷わずに目的のページに行けるようになり、ユーザーに好印象を与えることができます。

ココナラブログ.png

アイコンが入ると、一気に見やすくなりますね。

3.png

さっそく、こちらの方法についてご紹介いたします。

ヘッダーメニューにアイコンを入れる方法

①まずは、管理画面から「カスタマイズ」をクリックします
4.png

②左側の項目にある「メニュー」をクリックします
5.png

③次に、メニューを選択してクリックします
(まだメニューを設定されてない方は「メニューを新規作成」から設定)
6.png

④メニュー項目を一つクリックします
(※画像はホームメニューを変える場合)
7.png

⑤「ナビゲーションラベル」欄に [icon icon-home] ホーム と入力
8.png

⑥すべてのメニュー項目を入力したら上の「公開」をクリックします
9.png

⑦完成!
3.png

ちなみに、今回は⑤の工程でナビゲーションラベルに
[icon icon-home] ホーム
と入力しましたが↓
8.png

[icon icon-home] の部分は [icon 〇〇] といった感じでお好きなものに変更可能です。
SWELL公式サイトにアイコン一覧が載っていますので、お好きなものを選んでくださいね!

「SWELL アイコン」と検索すると以下のようなページが出てきます↓
10.png

これで、他のサイトよりもより視覚的に分かりやすいデザインに生まれ変わりました!
少し手を加えるだけでこのように印象ががらっとかわりますので、ぜひお試しください。

それではまた。

サクッとかっこいいホームページを制作したいなら
デザイン丸投げOK!
SWELL専用/低価格でスピーディーに制作します

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す ココナラコンテンツマーケット ノウハウ記事・テンプレート・デザイン素材はこちら