- これで解決!《SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】》
-本記事の要点と結論-
本記事を読めば、SWELLでヘッダー(グローバルナビゲーション)やフッターにアイコンの入れ方がわかるようになります。
ヘッダーのグローバルナビゲーションは、Webサイトにアクセスしたときにコンテンツを素早く把握し、サイト内での移動を容易にする役割がありますし、フッターは、サイトマップや企業情報、SNSへのリンクなどを配置したり、情報を整理したりする役割もあります。
いずれにしても両方とも回遊性を高くしたい部分に間違いありませんが、グローバルナビゲーションも、フッターナビゲーションもなんとなくちょっと地味な感じがするのは否めません。
そこで、ちょっとでもユーザーの視線を集められるようグローバルナビゲーション、フッターナビゲーション部分にアイコンを設置してみます。
これが実践できることで、ちょっとだけブログサイトがひき締まって見えるようになり、訪問してくてくれたユーザー様に少しだけいい印象を与えることができます。ぜひ参考にしていただきご活用くださいね!
デザインってちょっとしたことで、よくなったり悪くなったりするんだよね!
そういえば、ヘッダーとかフッターにアイコンが入ってるブログを見たんだけど、ワシも入れ方を教えてほしいのじゃ・・・
じゃあ今日は、本当にちょっとしたことなんだけど
アイコン設定してみよう・・・
この記事では、SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】についてお話をしていきます。
- ブログの回遊性を少しでも高くしたい方
- ウェブサイトをちょっとだけおしゃれにしたい方
- サイトの装飾を色々試したい方
- SWELLでヘッダーやフッターにアイコンの入れ方を知りたい方
早く希望の記事箇所に到達したい方はコチラ
当ブログでは、初心者が快適なブログ運営をするために必要な『エックスサーバー』と『SWELL』の説明。そしてWordPress導入後、10記事書くまでに必要なWordPressとSWELLの設定、必要なプラグイン等の徹底解説をしております。ぜひご活用くださいませ!
\ シェアNo.1のレンタルサーバー /
\ シェアNo.1のWordPressテーマ /
ヘッダーやフッターにアイコンが入るとどんな感じ?
見た目は、こんな感じ!
コチラはグローバルナビゲーション部分です。文字だけのときより、ちょっと締まって見えます。
コチラはフッター部分です。こちらも文字だけのときよりちょっといい感じです。
アイコンなんて簡単に入れられないの?
投稿や固定ページを作成している時は、ブロックエディタでこのようなバーが出てきますので、アイコンを選ぶだけですが、ヘッダーやフッターを編集している時はこういったアイコンを指定できるようなバーが出てきません。
このようにそのままではアイコンを入れることができないので、今日は、SWELLのグローバルナビゲーションやフッターにアイコンの入れ方【設定方法】を解説していきます。
やり方は、簡単です!
SWELLのヘッダーやフッターにアイコンの入れ方【設定方法】
今日はグローバルナビゲーションを例にとって解説していきます。
- 『ダッシュボード』 『外観』 『メニュー』
- グローバルナビゲーション用のメニューを選択します。
- 始めての場合は、『新しいメニューを作成しましょう』をクリック(今回はメニューに作り方は割愛します)
例えば、「ブログの始め方」にアイコンを設定してみます。
詳細
を開いてナビゲーションラベルを見ると『ブログの始め方』となっていますので、グローバルナビゲーションには、『ブログの始め方』とそのまま表示されます。- 文字の前に下の『ショートコード』をコピペします。
- ”ここにアイコンのクラス名”のところにクラス名を入れます。(クラス名は下のクラス一覧から選んでください)
[icon class="ここにアイコンのクラス名"]
こちらをコピペしてください。
他のページもできましたら、メニューを保存してください。
以上です。
アイコンとクラス名一覧
現在デフォルトで使えるアイコンたちです。
これだけでも結構助かりますよ。
使いたいアイコンのクラス名をコピーして貼り付けてくださいね!
今日は、ちょっとやってみたら良かったちょっとした装飾でした。
なんとなくサイトが寂しい感じがしたらやってみてくださいね!
まとめ:SWELLでヘッダーやフッターにアイコンの入れ方
今回は、SWELLでヘッダーやフッターにアイコンの入れ方【設定方法】について解説しました。
ちょっとしたことなのですが、ヘッダーのグローバルナビゲーション部分やフッターなどに小さなアイコンが入るだけで、サイトの見た目が少しだけいい感じに見えるようになります。小さなことですが、クリックされるところなので、アイコンを入れてみましょう。
具体的に気になる記事箇所をチェックするのはコチラ
このSWELLでヘッダーやフッターにアイコン設定が実践できることで、ちょっとだけブログサイトがひき締まって見えるようになり、訪問してくてくれたユーザー様に少しだけいい印象を与えることができます。
始める選択肢の一つとしてブログとYouTubeの両方の取り組みが来ることがわかります。同じ内容を扱うという条件ですが、効率も非常に良く、取り組むことでユーザー数の向上やSEOにおいてもいい効果を得ることが出来ます。
また、「SWELLでヘッダーやフッターにアイコンの入れ方」が終わりましたら、次は「ブログのファビコンを簡単に作成する方法」にチャレンジしてみましょう。
詳しいやり方は下記の記事で紹介しているので、あわせて読んでみてくださいね。