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

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

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

-本記事の要点と結論-

本記事を読めば、SWELLでヘッダー(グローバルナビゲーション)やフッターにアイコンの入れ方がわかるようになります。

ヘッダーのグローバルナビゲーションは、Webサイトにアクセスしたときにコンテンツを素早く把握し、サイト内での移動を容易にする役割がありますし、フッターは、サイトマップや企業情報、SNSへのリンクなどを配置したり、情報を整理したりする役割もあります。

いずれにしても両方とも回遊性を高くしたい部分に間違いありませんが、グローバルナビゲーションも、フッターナビゲーションもなんとなくちょっと地味な感じがするのは否めません。

そこで、ちょっとでもユーザーの視線を集められるようグローバルナビゲーション、フッターナビゲーション部分にアイコンを設置してみます。

これが実践できることで、ちょっとだけブログサイトがひき締まって見えるようになり、訪問してくてくれたユーザー様に少しだけいい印象を与えることができます。ぜひ参考にしていただきご活用くださいね!

チョイじじ

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

メチャじじ

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

ひろおじ

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

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

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

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

ブログの始め方

当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ!

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

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

シェアNo.1のWordPressテーマ

目次

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

見た目は、こんな感じ!

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

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

フッター部分のアイコン

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

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

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

SWELLでの通常表示アイコン

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

ひろおじ

やり方は、簡単です!

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

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

今日はグローバルナビゲーションを例にとって解説していきます。

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

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

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

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

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

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

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

アイコンとクラス名一覧

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

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

今日は、ちょっとやってみたら良かったちょっとした装飾でした。 
なんとなくサイトが寂しい感じがしたらやってみてくださいね!

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

今回は、SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】について解説しました。

ちょっとしたことなのですが、ヘッダーのグローバルナビゲーション部分やフッターなどに小さなアイコンが入るだけで、サイトの見た目が少しだけいい感じに見えるようになります。小さなことですが、クリックされるところなので、アイコンを入れてみましょう。

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

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

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

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

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

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

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