MENU
★★★ キャンペーン期間中、新規に『エックスサーバー』を申し込みすると、12ヶ月以上の契約で、利用料金の半額をキャッシュバック!! 2026年6月4日(木)17:00まで! ・・・★★★☆彡

お城のメニューを可愛く彩る|ヘッダー・フッターにアイコンを添える魔法

当ページのリンクには広告が含まれています。
メチャじじ

ヘッダーのメニューが文字ばかりで、なんだか殺風景なのじゃ・・。お洒落な家のマークとかを付けなのか?

チョイじじ

アイコンを入れてあるサイトを見たよ! 僕のSWELLなら簡単にできそうだけど・・。

お城を訪れた読者さんが一番最初に目にする場所、それが「ヘッダーメニュー」です。
ここが文字だけで整列しているのも誠実で素敵ですが、そこに小さなアイコンがちょこんと座っているだけで、お城の印象はパッと華やかになり、使い心地もグンと良くなります。

「でも、画像を自作したり、難しいプログラムを書いたりするのは無理……」と、不器用な僕たちは思ってしまいますよね。

大丈夫、安心してください。SWELLというお城には、あらかじめ数えきれないほどの「魔法のアイコン(Font Awesome)」が用意されています。あなたはただ、お気に入りのアイコンを選んで、その「合言葉」をコピーして貼り付けるだけ。

この記事では、文字の隣に可愛いアイコンを添えて、あなたのお城をもっと親しみやすく、もっと分かりやすく整える方法を丁寧にお伝えしますね!

🚩 この記事で一緒に解決すること…
  • アイコンの魅力: なぜ文字にアイコンを添えるだけで、お城が使いやすくなるのか。
  • 合言葉を探す: 膨大なアイコンの中から、お気に入りを見つける宝探し。
  • 簡単貼り付け: SWELLのメニュー設定に、一瞬でアイコンを表示させる手順。
  • 主(あるじ)のこだわり: ヘッダーだけでなく、フッターまで完璧に彩るコツ。

👉 ひとつだけでも受け取ってもらえれば、うれしく思います!

アイコンを入れるのは、「お城の各部屋のドアに、可愛らしいプレートを掲げる」ような作業です。

「コードを触る」と聞くとドキドキしてしまいますが、今回の作業は「決まった呪文をコピペする」だけ。失敗してもすぐに消せますから、何度でもやり直しがききますよ。

読者さんの目線を想像しながらアイコンを選ぶ。その優しさが、お城の隅々にまで行き届いた「最高のおもてなし」になるんですよ。さあ、一緒に宝探しを始めましょう!

🌱 まだ、自分のお城をもっていない方へ!

もし、この記事を読んでいるあなたが、「まだ自分のお城(ブログ)を持っていないけれど、書く準備だけはしておきたい!」という段階なら、まずはそのワクワクした気持ちを形にしてみませんか?

🚀 【最短ルート】今すぐ始めたい方は、コチラ!

【 重要 】

手順を調べる時間は最小限に…、WordPressを最短10分でブログを開通させたい方は、こちらの「最短・画像付きマニュアル」から読み進めてみてくださいね!

👉〔【2026】WordPressを始める手順|シニアが最短でゼロから公開までの全ステップ

シニアでも失敗なく、誰でもできるやり方を解説していますよ! それは、新しい世界を知るための切符です…。

さあ、僕と一緒に、あなたの「自分のお城」の基礎工事を始めましょう!

目次

文字に「絵」を添える魔法!アイコンが入るとお城はどう変わる?

文字だけのメニューも清潔感があって素敵ですが、アイコンが加わるとお城の印象は劇的に変わります。不器用な僕たちが、なぜこのひと手間をかけるべきなのか。その理由は、読者さんへの「直感的な優しさ」にあります。

たとえば、「ホーム」の横に小さな家のマークがあるだけで、読者さんの脳は文字を読むより速く「ここを押せば帰れるんだ」と理解します。視覚的なリズムが生まれることで、お城の中を回遊するのがもっと楽しく、スムーズになるんですよ。

見た目は、こんな感じ!

グローバルナビゲーション部分のアイコン

コチラはグローバルナビゲーション部分です。アイコンが設定されています。(
文字だけのときより、ちょっと締まって見えます。

フッター部分のアイコン

コチラはフッター部分です。(こちらも文字だけのときよりちょっといい感じです。

アイコンなんて簡単に入れられないの?

投稿や固定ページを記事作成をしている時は、ブロックエディタでこのようなバーが出てきますので、アイコンを選ぶだけですが、ヘッダーやフッターを編集している時はこういったアイコンを指定できるようなバーが出てきません。

SWELLでの通常表示アイコン

そのままではアイコンを入れることができないので、今日は、SWELLのグローバルナビゲーションやフッターにアイコンの入れ方【設定方法】を解説していきます。

⚙️ ひろおじ編集長の「お城の模様替え」メモ

ついつい「文字で書けば伝わるはず」と思いがちですが、読者さんは意外と忙しいもの。

ぱっと見で「何があるか」がわかるアイコンは、読者さんの目の疲れを癒やす「小さな休憩所」のような役割も果たしてくれます。

この小さな飾りを添えること。それは、お城の案内板に優しいイラストを書き加えるような、愛情深い作業なんですよ。

シールを貼るだけ!SWELLのメニューにアイコンを表示させる手順

「アイコンを入れるなんて、プログラミングみたいで難しそう……」と身構えていませんか?安心してください。SWELLなら、難しい工事は一切不要です。

やり方は、WordPressのメニュー設定画面を開き、項目の名前に「特定の合言葉」を書き加えるだけ。まるで、お気に入りのシールを選んでペタッと貼るような感覚で作業が完了します。ヘッダー(玄関)もフッター(勝手口)も、同じやり方で自由自在に彩ることができるんです。

グローバルナビゲーションメニューにアイコンを設置

STEP
グローバルナビゲーション用メニューを開きます
  • 『ダッシュボード』『外観』『メニュー』
  • グローバルナビゲーション用のメニューを選択します。
  • 始めての場合は、『新しいメニューを作成しましょう』をクリック(今回はメニューに作り方は割愛します)
グローバルナビゲーション用メニューを開きます
STEP
ナビゲーションラベル表示

例えば、「ブログの始め方」にアイコンを設定してみます。

詳細を開いてナビゲーションラベルを見ると『ブログの始め方』となっていますので、グローバルナビゲーションには、『ブログの始め方』とそのまま表示されます。

ナビゲーションラベル表示
STEP
表示したい文字の前にショートコードを入れます
  • 文字の前に下の『ショートコード』をコピペします。
  • ”ここにアイコンのクラス名”のところにクラス名を入れます。(クラス名は下のクラス一覧から選んでください)
[icon class="ここにアイコンのクラス名"]

こちらをコピペしてください。

表示したい文字の前にショートコードを入れます
STEP
メニューを保存してください

他のページもできましたら、メニューを保存してください。
以上です。

ちょっとしたことですが、意外とイメージが変わります。サイトが寂しい感じがしたら試してみてくださいね!

🚩 ひろおじ編集室の「ここだけの話」

一番不安なのは、「変な文字を入れて画面が崩れたらどうしよう」ということですよね。

でも、SWELLのこの方法は、文字を書き換えるのと同じくらい安全な方法です。もし形が気に入らなければ、その文字を消すだけで元通り。失敗を恐れずに、いろいろなアイコンを試して「これだ!」と思う組み合わせを見つけてみてください。

楽しみながら設定したメニューは、訪れる読者さんにもそのワクワクが伝わるはずですよ。

お宝探しへ出発!よく使う「アイコンの合言葉」一覧

SWELLには、最初からたくさんの魔法のアイコンが用意されています。でも、膨大な数の中から自分のお城にぴったりのものを探すのは、ちょっとした冒険ですよね。

そこで、不器用な僕たちが特によく使う、定番のアイコンとその「合言葉(クラス名)」を一覧にまとめました。家、メール、SNS、検索……。あなたのメニューにぴったりのシールを、この宝箱の中から選んでみてくださいね。

使いたいアイコンのクラス名をコピーして貼り付けるだけですよ!

💡ひろおじの “寄り添い” アドバイス

ついつい「あれもこれも」とアイコンを並べたくなってしまいますが、最初は大切なメニューにだけ絞って付けてみるのがコツです。

飾りすぎないことで、本当に見てほしい場所がキラリと光ります。

お城の雰囲気に合わせて選んだアイコンたちは、文字だけでは伝えきれない「あなたらしさ」を語ってくれる大切な相棒になってくれますよ。

小さなアイコンが、お城の「おもてなし」を完成させる

ひろおじ

お疲れ様でした!お城のメニューに、可愛らしいアイコンは無事に灯ったでしょうか。

最初は「合言葉(クラス名)」をコピーするのも少し緊張したかもしれませんが、実際に画面にアイコンが表示された瞬間、お城がパッと華やかになったのを感じたはずです。その小さな変化が、読者さんにとっては「読みやすさ」という大きな安心感につながります。

  • 直感的な案内: 文字を読む前に「意味」が伝わる、最高の道しるべ。
  • コピペで簡単: SWELLなら、難しいコードを書かずにシール感覚で装飾できる。
  • 自分らしさ: 選ぶアイコン一つひとつに、あなたの個性が宿る。

ヘッダーやフッターは、読者さんがお城の中で迷った時に必ず目を向ける場所です。そこにあなたの優しい気遣い(アイコン)があることで、お城での滞在時間はもっと心地よいものになりますよ。

🍵 ひろおじの「お茶の間、最後の一息」

最後まで読んでくださり、本当にありがとうございます…😄。

メニューにアイコンを添えるのは、「お城を訪れた方に、そっと手を差し伸べる」ような行為です。

50代・60代、シニア世代は、大きな工事は得意ではないかもしれません。でも、こうした小さな飾り付けを一つひとつ丁寧に行うことで、どこの誰にも真似できない、温かみのあるお城が出来上がっていくんです。

あなたが選んだそのアイコンが、今日も誰かの旅(読書)を優しく支えています。その小さな達成感を大切に、これからもあなたらしいお城作りを楽しんでいきましょうね。

🏁 まだお城を建てる前の方が人生の第2幕をスタートするには?

さて、「ヘッダー・フッターにアイコンを添える魔法」が理解できたところで、あなたには、それを形にする『お城(ブログ)の準備』はできていますか?

ひろおじ

不器用な僕でも、手順通りに進めたら自分だけのお城が建ちましたよ! 失敗のない「人生の第2幕」、ここから一緒にスタートしてみませんか?

📌 マニュアルは、コチラ!

🚀 【最短ルート】世界中の「見知らぬ友」と繋がる扉を開こう!

【 重要 】

👉〔【2026】WordPressを始める手順|シニアが最短でゼロから公開までの全ステップ

あなたの人生経験を待っている人が、この広い空の下に必ずいます。一人じゃない安心感を持って、新しい交流の場へ飛び込んでみませんか?

お城のメニューを可愛く彩る|ヘッダー・フッターにアイコンを添える魔法でよくある Q&A

アイコンを入れたら、メニューの文字が消えちゃった!

合言葉を貼り付ける時に、元の文字まで消してしまったのかも。文字の「前」か「後」に、半角スペースを空けて貼り付けるのがコツですよ。

アイコンの色だけを変えることはできる?

SWELLの基本設定では文字と同じ色になりますが、少し難しい魔法(CSS)を使えば変えることも可能です。まずは今のままでお城に馴染むか見てみましょう。

スマホで見ると、アイコンが大きすぎて崩れてしまう。

アイコンの種類によっては少し大きく見えることも。気になる時は、文字を少し短くしたり、アイコンの種類を変えて調整してみましょう。

一覧にないアイコンを使いたい時はどうすればいい?

「Font Awesome」という魔法の図鑑から探せますが、まずはSWELLが標準で用意してくれている「お宝」の中から選ぶのが、不器用な僕たちには一番安全です。

アイコンを文字の後ろに付けたい場合は?

合言葉を文字の後ろに貼り付ければOKです!「ホーム 」のように、お城の雰囲気に合わせて選んでくださいね。

フッターのアイコンが、背景色で見えにくい。

フッターの色とアイコンの色が似ているのかもしれません。お城全体のカラー設定を見直して、読みやすいコントラストを探してみましょう。

アイコンを付けすぎて、逆に分かりにくくなっていないかな?

大切なメニューに絞るのがコツです。全部に付けるのではなく、主要な3〜5箇所に絞ると、より引き立ちますよ。

設定したはずなのにアイコンが「□」と表示される……。

合言葉が少し間違っているか、使えないアイコンを選んでいる可能性があります。一覧の合言葉をもう一度丁寧にコピペしてみてください。

アイコンの大きさを個別に変えることはできる?

これも少し高度な魔法になります。不器用な僕たちは、まずはSWELLが整えてくれる「標準の美しさ」を信じるのが一番の近道です。

メニュー以外(記事の中など)でも、このアイコンは使える?

はい!SWELLの専用ブロックを使えば、記事の中でも同じようにアイコンを散りばめて、読者さんを楽しく案内できますよ。

🗺️ SWELLでの記事LPページの作り方!

「特に気合いを入れているページだけ、もっと印象的に見せたい…いつもとは違う“特別席”を用意できないだろうか?」

ブログを運営していると、「これは本気でおすすめしたい」と思える一記事に出会う瞬間がありますよね。けれど、他の記事と同じ見せ方のままだと、その魅力が埋もれてしまうことも少なくありません。

そんなときに頼れるのが、SWELLに備わっているLP(ランディングページ)作成機能です。

イメージとしては、ブログという建物の中に設ける“専用ギャラリー”。余白や構成を自由に整えながら、伝えたい内容だけをじっくり味わってもらえる空間をつくれます。

「センスに自信がないから難しそう」と感じるかもしれませんが、心配はいりません。SWELLなら、用意されたパーツを組み合わせていくだけで、自然と洗練されたページが形になっていきます。まるで静かに腕のいい職人が後ろで手伝ってくれているような感覚です。

また「お城のメニューを可愛く彩る|ヘッダー・フッターにアイコンを添える魔法」が読み終わりましたら、次は、「SWELLのボックスメニューの作り方|お城の「案内図」をタイル風におしゃれに整える」を確認してみましょう。

詳しい内容は下記の記事で紹介しているので、あわせて読んでみてくださいね!

よかったらシェアしてね!
目次