【SWELL】グローバルナビの追加&アイコンをつける方法をわかりやすく紹介!

当ページのリンクには広告が含まれています。
グローバルナビとアイコン追加

こんにちは!カイマイママです。

【SWELL備忘録】というカテゴリーを追加して、その1記事目がこのページになります。

以前、グローバルナビを追加したときに、そのやり方をパッと思い出せずメモを見ながら時間を費やしてしまったので、忘れそうな設定についてここに記していこうと考えました

みなさんが見てくれたときに、「わかりやすい!」とか「あ、こんな感じにしてみたい!」と思ってもらえて役に立てたらいいなぁと思いますので、張り切って記していきます。

チビ

みんなのためになりそうだね!

カイマイママ

自分のためとみんなのため!SWELL備忘録はそれを目指したページだよ!

目次

SWELLグローバルナビゲーションの追加方法

グローバルナビ追加1

当サイトのホームの右上、グローバルナビゲーション(ヘッダーメニュー)のブログにマウスを乗せると6つのカテゴリーが出てきます。

今回は、癒しの時間と本日のご褒美の間に【SWELL備忘録】を追加します。

カテゴリーに追加する

まずは、カテゴリー名を追加します。

STEP
投稿のカテゴリーを開く
グローバルナビ追加2
STEP
名前とスラッグを入力する
グローバルナビ追加3

今回は、名前にSWELL備忘録、スラッグにはswell-bibourokuと入力しました。

スラッグとはURLの末尾の部分なので、半角英数字と使える記号で入力しましょう。

親カテゴリーと説明はそのままでOKです。

STEP
名前とスラッグを入力後、新規カテゴリー追加をクリック
グローバルナビ追加4
STEP
グローバルナビに追加できました
グローバルナビ追加5

追加したカテゴリーをメニューに表示させる

次に、追加したカテゴリーをホームのグローバルナビゲーション(ヘッダーメニュー)に表示させます。

STEP
外観のメニューをクリック
グローバルナビ追加6
STEP
編集するメニューを確認する
グローバルナビ追加18

①がグローバルナビになっていなければグローバルナビを選んで選択をクリック。すると下のメニュー構造メニュー名がグローバルナビになります。

STEP
メニュー項目を追加する
グローバルナビ追加7

メニュー項目を追加カテゴリーの右にある▼をクリックして①すべて表示をクリック。

②追加したいカテゴリー名ここではSWELL備忘録)にを入れて③メニューに追加をクリックします。

STEP
メニュー構造の一番下からドラック&ドロップで移動する
グローバルナビ追加8

右のメニュー構造の一番下にカテゴリー名が追加されるので、ドラッグ&ドロップで好みの場所まで移動します。今回は癒しの時間の下に移動。

STEP
メニューを保存する
グローバルナビ追加9

移動させたら、下にあるメニューを保存をクリックします。

STEP
グローバルナビに表示できました
グローバルナビ追加10

SWELLグローバルナビゲーションにアイコンをつける方法

まずは、SWELL設定でFont Awesomeの使用設定を確認します。

Font Awesomeとは

Font Awesome(フォント オーサム)は、ウェブサイトやブログでアイコンフォントを簡単に表示できるサービスで、商用利用も可能です。

Font Awesomeの使用設定

すでにFont Awesomeを使ってアイコンをつけている場合は、設定済になっています。

STEP
SWELL設定をクリック
グローバルナビ追加11

上のFont Awesomeをクリックして、読み込み方はCSSで読み込むを選択、バージョンはv6を選択して、変更を保存をクリックします。

STEP
Font Awesomeアクセスする
グローバルナビ追加12

カイマイママは無料の範囲で使っているので、その方法で紹介します。

虫めがねアイコンをクリック。

STEP
検索窓に使いたいアイコン名を入力
グローバルナビ追加13

今回はclip(クリップ)で検索。①検索窓にclipと入力し、②無料をクリック。

下に無料のアイコンが出てくるので見てみると、クリップがありました。

クリップをクリックします。

STEP
アイコンのコードをコピー
グローバルナビ追加14

赤枠で囲ったコードの上にマウスを乗せてクリックすることでコピーできます。

STEP
SWELLのグローバルナビの設定に戻る
グローバルナビ追加15

外観のメニューから、先ほど追加したSWELL備忘録の右側にあるカテゴリーの▼をクリック。

STEP
ナビゲーションラベルを編集する
グローバルナビ追加16

①のナビゲーションラベルのSWELL備忘録の前に、先程コピーしたクリップのアイコンのコードを貼り付けます。

そのままでは、<i class="fa-solid fa-paperclip"></i>となっているので、完成形が[icon class="fa-solid fa-paperclip"]となるように編集します。

[icon class="〇〇〇"]の〇〇〇の部分に、コピーしてきたfa-solid fa-paperclipのみを貼り付けるという流れで完成できます。

入力できたら、②メニューを保存をクリックして保存します。

カイマイママ

カイマイママはクリップアイコンとSWELL備忘録の間に半角のスペースを入れてるよ。

グローバルナビ追加19

つまり、コピーしてきたコードで使う部分は、fa-solid fa-paperclipということです。

STEP
完成です
グローバルナビ追加17
チビ

うわぁ~!なんかうれしくなるね!

カイマイママ

うん!どんどん増やしたくなっちゃうけど、必要なものだけにしないとね!

このように、ワードプレスでブログを作っていると、以前編集した作業でもついつい忘れてしまうことがいっぱい出てきます。

なので、安心無敵なSWELL備忘録を設置してみました。

みなさんもぜひご活用ください!

よかったらシェアしてね
  • URLをコピーしました!
目次