SWELLグローバルナビゲーションの設定方法【英字・アイコンも】

Name: WordPressテーマ「SWELL」の特徴
Brand: WordPressテーマ「SWELL」
Price: 17600 JPY

2022年8月14日2023年2月14日

SWELLグローバルナビゲーションの設定方法と、アイコンを表示させてオシャレにするやり方を解説します。

＼オシャレを実現！初心者でもデザイン性抜群のサイトにできる／

SWELL公式サイトはこちら

※いま一番オススメのWordPressテーマ

SWELLの特徴・メリットデメリットはコチラ！

WordPressテーマ「SWELL」の特徴

総合評価

( 5 )

メリット

とってもオシャレなサイトが誰でも作れる
構造化機能も充実！SEO対策をしやすい
ダントツクラスの機能性
高速化のプロを顧問！ページスピードが速い
時短機能も充実！記事執筆を効率化できる
ブロックエディター対応度ナンバーワン
ブログ運営が楽しくなる
初心者でもカスタマイズしやすい
買い切り、複数サイトに使える
アプデが頻繁で進化が止まらない

デメリット

値段が安くない（17,600円）
AMP非対応
個人開発

グローバルナビゲーションの設定方法が分からない･･･

グローバルナビゲーションの英字表記のやり方が分からない･･･

グローバルナビゲーションにアイコンを設置したい･･･

ヒナキラ

こういった悩みがある方は、この記事を読んでいきましょう。

SWELLグローバルナビゲーションの設定方法

グローバルナビゲーションとは、上記のようなヘッダーメニューのことです。

SWELLでは、アイコンを設定したり、文字下に英字表記ができたりと、とてもオシャレな雰囲気にすることも可能。

では、このようなヘッダーメニューを作れるSWELLグローバルナビゲーションの設定方法を解説します。

グローバルナビゲーションの基本設定手順

まずは、グローバルナビゲーションの基本的な設定手順を解説します。

STEP

「外観」→「メニュー」をクリック

STEP

①「表示オプション」をクリックして②「説明」にチェックを入れる

STEP

「新しいメニューを作成しましょう」をクリック

STEP

①メニュー名を入力して②「グローバルナビ」にチェックを入れて③「メニューを作成」をクリック

STEP

メニューに追加したいものを選ぶ（固定ページ、投稿記事、カテゴリーなど）

STEP

追加できたら「メニューを保存」をクリック

STEP

設定したメニューが表示されました

文字下に英字表記させる方法

次に、グローバルナビゲーションの文字下に英字表記を追加する方法を解説します。

具体的な手順は以下の通り。

①メニュー名をクリックして②「説明」欄に英字を入力して③「メニューを保存」をクリック。

すると、上記のとおり文字下に英字が表示されました。

SWELLグローバルナビにアイコンを表示させる方法

さらに、SWELLグローバルナビにアイコンを表示させる方法も解説しておきます。

具体的には、下記の４ステップを行います。

SWELL設定
使いたいアイコンを探す
アイコンのコードをコピー
SWELLグローバルナビに設定

①：SWELL設定

アイコン（Font Awesomeのアイコン）を使用するのに、まずはFont Awesomeの使用設定をSWELLで行います。

具体的な手順は以下のとおりです。

管理画面から「SWELL設定」をクリックしましょう。

SWELL設定画面になったら、①Font Awesomeをクリックして②「CSSで読み込む」にチェックを入れて③「変更を保存」をクリックしましょう。

これで、Font Awesomeが使える状態となります。

②：使いたいアイコンを探す

次に、Font Awesomeにアクセスして、使いたいアイコンを探しましょう。

今回は、WordPressのアイコンを探してみます。

検索窓に「WordPress」と入力すると、以下のようにアイコンが出てきました。

表示されたものの中から使いたいものを選んでクリックしましょう。（今回は左側のものを使ってみます）

③：アイコンのコードをコピー

アイコンをクリックしたら、表示されたコードをクリックしてコピーします。

コピーができたら、WordPressのメニュー画面（グローバルナビ）を開いて設定していきます。

④：SWELLグローバルナビに設定

これが最後の工程になります。

以下の通りに設定していきましょう。

コピーしたコード<i class="fa-brands fa-wordpress"></i>のうち、<i class=""> </i>を除いたfa-brands fa-wordpressの部分だけを[icon class=""]の” “の中に貼り付けます。

今回のアイコンを貼り付けた結果は、[icon class="fa-brands fa-wordpress"]です。

つまり、実際に使うアイコンのコードは下記の部分ですね。

設定ができると、以下のようにアイコンが表示されます。

全部設定してみた結果です。

オシャレなヘッダーメニューができました。

【初心者向け】グローバルナビ設定の注意点

最後に、グローバルナビゲーション設定の注意点について解説していきます。

注意したいのは、１点。

それは、読者を誘導したい記事やページ、カテゴリーを配置しましょう。ということです。

グローバルナビゲーションはクリックされやすい部分なので、ここに「プライバシーポリシー」など不要なものが設置されているのは非常にもったいない状態といえます。

ヒナキラ

なので、初期状態などは言語道断。かぁーーーーつ！です。

まとめ｜SWELLグローバルメニューをオシャレにしてクリックさせちゃおう！

今回は、SWELLグローバルナビの設定方法と、オシャレなアイコンを表示させる方法についても解説しました。

グローバルナビは、かなり重要な部分です。

オシャレな見た目にすることで、より目についてクリックされやすくなるでしょう。

ヒナキラ

ぜひ、オシャレなグローバルナビを設置して、たくさんクリックされちゃいましょう！

では、以上となります。

またね！

≫SWELLのトップページカスタマイズはこちら

SWELLグローバルナビゲーションの設定方法【英字・アイコンも】