> 12コの有料テーマを使うマニアが大評判のSWELLを徹底レビュー!

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

SWELLグローバルナビ設定

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

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

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

  • グローバルナビゲーションの設定方法が分からない・・・
  • グローバルナビゲーションの英字表記のやり方が分からない・・・
  • グローバルナビゲーションにアイコンを設置したい・・・
ヒナキラ

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

デザインが綺麗でオシャレ、使いやすく、高機能。

SWELLの評判を集めた記事は →「SWELLの口コミ評判・レビュー

有料テーマ12コ使う僕のイチオシWordPressテーマです。

≫SWELL公式サイトはこちら

タップできる目次

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

おしゃれなアイコン付きヘッダーメニュー

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

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

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

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

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

STEP
「外観」→「メニュー」をクリック
外観-メニュー
STEP
①「表示オプション」をクリックして②「説明」にチェックを入れる
表示オプション-説明
STEP
「新しいメニューを作成しましょう」をクリック
新しいメニューを作成
STEP
①メニュー名を入力して②「グローバルナビ」にチェックを入れて③「メニューを作成」をクリック
名前-グローバルナビ-メニューを作成
STEP
メニューに追加したいものを選ぶ(固定ページ、投稿記事、カテゴリーなど)
メニュー項目を追加-メニュー追加
STEP
追加できたら「メニューを保存」をクリック
メニューを保存
STEP
設定したメニューが表示されました
グローバルナビゲーション

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

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

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

英字の入力

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

英字表示

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

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

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

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

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

①:SWELL設定

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

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

SWELL設定

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

アイコンSWELL設定

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

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

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

次に、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"]です。

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

使う部分

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

アイコン設定完了

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

おしゃれなアイコン付きヘッダーメニュー

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

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

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

注意したいのは、1点。

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

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

ヒナキラ

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

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

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

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

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

ヒナキラ

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

では、以上となります。

またね!

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

時短に繋がる、超高機能Wordpressテーマ。

WordPressテーマ「SWELL」の特徴
総合評価
( 5 )
メリット
  • とってもオシャレなサイトが誰でも作れる
  • 構造化機能も充実!SEO対策をしやすい
  • ダントツクラスの機能性
  • 高速化のプロを顧問!ページスピードが速い
  • 時短機能も充実!記事執筆を効率化できる
  • ブロックエディター対応度ナンバーワン
  • ブログ運営が楽しくなる
  • 初心者でもカスタマイズしやすい
  • 買い切り、複数サイトに使える
  • アプデが頻繁で進化が止まらない
デメリット
  • 値段が安くない(17,600円)
  • AMP非対応
  • 個人開発

SWELLはオシャレで、非常に使いやすく、時短に繋がる生産性高いWordpressテーマ。

17,600円の価格も、抜群の機能性やSEO対策面、記事執筆効率化などを考慮すればむしろ安いです。

使ったら二度と手放せなくなるWordpressテーマ「SWELL」の感動を、あなたにも。

\オシャレで使いやすく機能性抜群のテーマ/

※今まで使った有料テーマの中で一番おすすめ

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

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

CAPTCHA

タップできる目次