★★★ キャンペーン期間中、新規に『エックスサーバー』をお申し込みいただくと、 「初回のご利用料金が最大30%オフ!」 2025年1月7日(火)17:00まで! ・・・★★★☆彡

SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】

当ページのリンクには広告が含まれています。
  • これで解決! SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】

-本記事の要点と結論-

本記事を読めば、WordPressテーマ「SWELL」を使って、ヘッダー(グローバルナビゲーション)やフッターにアイコンを入れる方法を簡単に理解し、実践できるようになります!

ヘッダーのグローバルナビゲーションは、訪問者がサイトの全体像を一目で把握し、迷わずに各コンテンツへアクセスできるようにする重要な役割を担っています。一方、フッターは、サイト全体の締めくくりとして、サイトマップやSNSリンク、企業情報などを整理し、訪問者に安心感や便利さを提供する場として欠かせません。

どちらも非常に重要な要素ではありますが、そのままでは少し地味で平凡な印象になりがちなのも事実。そこで、グローバルナビゲーションやフッターナビゲーションにアイコンを加えて、視覚的なアクセントをつけることで、訪問者の目を引きつける工夫をしてみましょう!

アイコンを設置することで、ブログサイトの印象がぐっと向上し、訪問者にプロフェッショナルで魅力的な雰囲気を伝えることができますよ。ぜひ今回の内容を参考にして、あなたのサイトにも取り入れてみてくださいね!

チョイじじ

デザインってちょっとしたことで、よくなったり悪くなったりするんだよね!

メチャじじ

そういえば、ヘッダーとかフッターにアイコンが入ってるブログを見たんだけど、ワシも入れ方を教えてほしいのじゃ・・・

ひろおじ

じゃあ今日は、本当にちょっとしたことなんだけど
アイコン設定してみよう・・・

この記事では、SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】についてお話をしていきます。

この記事はこんな方にオススメ
  • ブログの回遊性を少しでも高くしたい方
  • ウェブサイトをちょっとだけおしゃれにしたい方
  • サイトの装飾を色々試したい方
  • SWELLでヘッダーやフッターにアイコンの入れ方を知りたい方

早く希望の記事箇所に到達したい方はコチラ

エックスサーバーとSWELLを紹介する人

\ シェアNo.1のレンタルサーバー /

シェアNo.1のWordPressテーマ

目次

ヘッダーやフッターにアイコンが入るとどんな感じ?

見た目は、こんな感じ!

アフターにアイコンが入るとどんな感じなのか説明している人
グローバルナビゲーション部分のアイコン

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

フッター部分のアイコン

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

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

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

SWELLでの通常表示アイコン

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

ひろおじ

やり方は、簡単ですよ!

SWELLのヘッダーやフッターにアイコンの入れ方【設定方法】

SWELLのヘッダーフッターにアイコンを入れる方法を探している人

今回は、グローバルナビゲーションメニューにアイコンを設置していきます。

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

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

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

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

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

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

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

メチャじじ

えらい簡単だな・・・

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

アイコンとクラス名一覧

アイコンクラス名を紹介している人

現在デフォルトで使えるアイコンたちです。
これだけでも結構助かりますよ。
使いたいアイコンのクラス名をコピーして貼り付けてくださいね!

SWELLでヘッダーやフッターにアイコンの入れ方でよくある Q&A

ヘッダーにアイコンを追加するメリットは何ですか?

ヘッダーアイコンは視覚的なアクセントとなり、訪問者がメニュー内容を直感的に理解しやすくなる効果があります。

SWELLでアイコンを追加するにはプラグインが必要ですか?

必要ありません。SWELLの機能を使えば、プラグインなしで簡単にアイコンを設置できます。

SWELLの標準機能でアイコンをアニメーション表示できますか?

SWELLでは標準的なアニメーション機能はありませんが、CSSを追加することでアニメーションを付けられます。

アイコンの色をサイト全体のテーマに合わせて変更するには?

SWELLの「カスタマイザー」からカラー設定を調整できます。

ヘッダーアイコンをモバイルビューでも表示できますか?

はい、SWELLはレスポンシブデザイン対応なので、モバイルでも問題なく表示されます。

フッターに設置するアイコンの数に制限はありますか?

特に制限はありませんが、多すぎるとデザインがごちゃごちゃするので注意が必要です。

初心者でも簡単にアイコンを設置できますか?

SWELLのシンプルな操作画面を使えば、初心者でも数分でアイコンを設置できます。

SWELLブログを一番速く、簡単に始める方法

WordPressブログを始めるには、「レンタルサーバー」「ドメイン」「WordPressテーマ」が必要です。当サイトでは・・・・、

レンタルサーバーとドメイン

エックスサーバー

を採用

WordPress「テーマ」

SWELL

を採用

エックスサーバーの「WordPress クイックスタート」を利用するとすぐにSWELLブログを始められます!

👉エックスサーバーの「WordPress クイックスタート」を利用すれば、SWELLも一緒に購入することができ、ドメインの取得・設定、WordPressのインストール、SWELLのインストールまで、一気に完了させることができます。運用管理も一括ですから本当にオススメです!

  • エックスサーバーは、国内で最も信頼される高性能なサーバーであり、これから初めてブログ運営をされる方は、エックスサーバーを選んでおけば間違いありません。
  • 価格面においても最初から必要なものが全部そろっており、後から機能を追加することもありませんので、返ってコストパフォーマンスが高いと言えます。

エックスサーバーでSWELLブログの始め方は、コチラを参考にしてください!

簡単・安心、エックスサーバー

¥ 693円/月〜・2025年1月7日(火)17:00まで…

高性能なレンタルサーバーを個人でも利用できる。WordPewssでブログを始めるならエックスサーバーが最適解。しかもコスパNo.1!

\ 公式サイトは、コチラ! /

\ わかり易く解説! /

まとめ:SWELLでヘッダーやフッターにアイコンの入れ方

いかがでしたか?SWELLでヘッダーやフッターにアイコンを追加する方法をご紹介しました。
このひと工夫で、サイト全体がぐっと引き締まり、訪問者に「また来たい」と思わせるデザインを実現できます。

特にグローバルナビゲーションやフッターナビゲーションは、サイトの使いやすさを左右する重要なポイント。アイコンを使った視覚的な演出で、回遊性を高め、プロらしい印象を与えましょう!

今回の内容を参考に、ぜひあなたのサイトにも取り入れてみてください。訪問者に愛されるサイトづくり、一緒に楽しんでいきましょう!

ここまでお読みいただき、誠にありがとうございました。😊

具体的に気になる記事箇所をチェックするのはコチラ

このSWELLでヘッダーやフッターにアイコン設定が実践できることで、ちょっとだけブログサイトがひき締まって見えるようになり、訪問してくてくれたユーザー様に少しだけいい印象を与えることができます。

ブログとYouTubeの両方やりたい・・・・

始める選択肢の一つとしてブログとYouTubeの両方の取り組みが来ることがわかります。同じ内容を扱うという条件ですが、効率も非常に良く、取り組むことでユーザー数の向上やSEOにおいてもいい効果を得ることが出来ます。

また、「SWELLでヘッダーやフッターにアイコンの入れ方」が終わりましたら、次は「ブログのファビコンを簡単に作成する方法」にチャレンジしてみましょう。

詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。

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