有料テーマの購入を検討中の方におすすめ記事

【SWELL】グローバルナビの種類と設定方法!アイコンも簡単に設定できます

SWELL グローバルナビの設定方法
  • URLをコピーしました!
悩子ちゃん

トップページをもっと見やすくできないかな……。

ケイ@

SWELLの機能を使って、
グローバルナビをカスタマイズしてみよう。

SWELLには外観をカスタマイズできる機能がたくさんあります。

その中でも、グローバルナビ(ヘッダーメニュー)を設定することで、外観が見やすくなったり、ユーザーが必要な記事を見つけやすくなります

ケイ@

この記事を読めば、
グローバルナビの設定方法はバッチリです。

▼本記事の内容

  • SWELLグローバルナビの設定方法
  • SWELLグローバルナビの使い方Q&A
  • グローバルナビにアイコンを表示させる方法
タップできる目次

グローバルナビとは

悩子ちゃん

そもそもグローバルナビってなんだろう……?

ケイ@

SWELL公式でも使われている、トップページ上部のメニューのことだよ。

当サイトのグローバルナビ
赤枠内がグローバルナビです

グローバルナビとは、
PCで表示したときにページ上部で表示されるメニューのことです。

グローバルナビを設定することで、
サイト全体が把握しやすくなり、ユーザーが必要な情報を見つけやすくなります

SWELL公式マニュアルはこちら>>グローバルナビの設定方法

悩子ちゃん

グローバルナビには、どんな情報を入れたらいいの?

ケイ@

サイトの強みや、優先的に見てもらいたい情報を入れるのがオススメだよ。

サイト記事への導線となるグローバルナビは、ユーザー目線で設定すること大切です。

そうすることで、「ユーザーの悩みや課題を解決できる=いいサイト」となり、SEOでも評価が上がりやすくなります。

ケイ@

グローバルナビ設定のポイントもまとめたので、参考にしてみてください。

▼グローバルナビ設定のポイント

  • だいたい5~7項目以内にまとめる
  • 優先的に見てもらいたい順に配置する
  • 短文で、わかりやすいワードにする

ヘッダーとの違いは?

グローバルナビは、「ヘッダーナビ」とも呼ばれるように、ヘッダー内のメニュー部分を指します。

ヘッダーとグローバルナビの違い
ヘッダーとグローバルナビの違い
ケイ@

グローバルナビはヘッダーの一部になります。

ページ上部に配置されることが多いですが、スマホだとサイドバーに配置されることもあります。

グローバルナビの設定方法

悩子ちゃん

どうやって設定するの?

ケイ@

SWELLの外観カスタマイズ機能を使って設定できるよ。

グローバルナビは、SWELLの機能を使えば、簡単にカスタマイズすることもできます。

▼グローバルナビカスタマイズ例 

当サイトのグローバルナビ
当サイトのグローバルナビ
ケイ@

それぞれ解説していくので、自分に合ったカスタマイズを試してみてください。

シンプルの設定方法

STEP
ダッシュボード→「外観」→「メニュー」をクリックする。
グローバルナビの設定方法
メニューをクリックする
STEP
「新しいメニューを作成しましょう。」をクリックし、メニュー名、チェックを入れる。
メニューを作成する
タップで拡大できます
STEP
STEP2で作成したメニューを選択し、追加したいメニューを選択、保存する。
グローバルナビの設定方法
タップで拡大できます
ケイ@

グローバルナビにアイコンを挿入する方法は、下記にて後述しています。

サブテキストの設定方法

SWELL公式では、メニュー名の下に英語表記のサブテキストを追加しています。

SWELL公式サイトのグローバルナビ
参照元:https://swell-theme.com/
ケイ@

このサブテキストも、SWELLのカスタマイズ機能で設定できます。

▼サブテキスト設定方法

STEP
ダッシュボード→「外観」→「メニュー」をクリックする。
外観からメニューをクリックする
外観からメニューをクリックする
STEP
右上の「表示オプション」をクリックし、「説明」にチェックを入れる。
表示オプションをクリックする
タップで拡大できます
説明にチェックを入れる
タップで拡大できます
STEP
設定したグローバルナビの「説明」の項目にサブテキストを追加し、保存する。
サブテキストを入力し保存する
タップで拡大できます

ドロップダウンメニューの設定方法

カーソルを合わせると出てくるドロップダウンメニューも、SWELLのカスタマイズ機能を使って設定することができます。

ドロップダウンメニューの見本
参照元:SWELL公式サイト
ケイ@

見やすいように、動画で解説していきます。

▼ドロップダウンメニュー設定方法

ドロップダウンメニューの設定方法

下の画像のように、メニューが右に少しずれた状態になっていればドロップダウンメニューの設定は完了です。

ドロップダウンメニューの設定方法
ドロップダウンメニューの設定方法

グローバルナビの文字カスタマイズ(色や大きさの変更等)は、CSSを追加する必要があります。(参考サイト>>デザインの歩き方

ケイ@

CSS編集は上級者向けなので、最初はSWELLの機能内でカスタマイズするのがおすすめです。

アイコンを挿入する方法

SWELLでは、「ショートコード」を入力することで←このように簡単にアイコンを追加することが可能です。

ショートコードを利用すれば、
文中やグローバルナビでもアイコンを使用できます

悩子ちゃん

ショートコード?なんだか難しそう……

ケイ@

下のコードをコピーして貼り付けるだけで使えるから、安心してね。

▼使用するショートコード

[icon アイコンクラス名]

iconの後ろは半角スペースが入ります。全角だと表示されないのでご注意ください。

上のコードに、使いたいアイコンのクラス名を入力して使用します。

ケイ@

グローバルナビで使いやすいアイコンをまとめたので、コピーして使ってください。

▼アイコンクラス名(一部抜粋)

アイコンクラス名アイコンクラス名
icon-homeicon-swell
icon-phoneicon-megaphone
icon-light-bulbicon-search thin
icon-carticon-book
icon-downloadicon-mail
icon-penicon-person
アイコンの一部

SWELL公式>>SWELLで使えるアイコンの一覧

▼使用例

アイコンの表示方法
アイコンの表示方法
STEP
ダッシュボード→「外観」→「メニュー」をクリックする。
外観からメニューをクリックする
メニューをクリックする
STEP
アイコンを追加したいメニューの「▼」をクリックし、「ナビゲーションラベル」にショートコードを追加する。
ナビゲーションラベルにコードを入力する
タップで拡大できます

▼完成図

グローバルナビにアイコンを表示させた画像
タップで拡大できます

他のアイコンも使いたい人は、Font Awesomeから利用することができます。

詳しい利用方法はSWELL公式に載っているので、参考にしてみてください。

SWELL公式>>SWELLでFont Awesomeのアイコンを使う方法

ケイ@

一部でFont Awesomeのサイトが
表示されない場合があるのでご注意ください。

PCとスマホの表示場所

悩子ちゃん

グローバルナビは、スマホだと表示されないの?

ケイ@

スマホだと開閉メニューの中へ移動するよ。

グローバルナビは、
通常の設定だとPC・スマホで表示場所が異なります

▼グローバルナビ表示場所

  • PC→ページ上部(ヘッダー内)
  • スマホ→開閉メニュー内
PCでのグローバルナビの表示位置
悩子ちゃん

スマホでもヘッダーに表示することはできるの?

ケイ@

クリックするだけで、簡単に設定できるよ。

スマホでもページ上部に表示したい場合は、
グローバルナビ設定でメニュー設定の「スマホ用メニュー」にチェックを入れればOKです。

▼スマホでヘッダー表示する方法

スマホでヘッダーに表示をする方法
スマホでヘッダーに表示をする方法

ヘッダーを透明に表示を設定していると、スマホのヘッダーには表示されません。

ケイ@

Q&Aでも解説しているので、確認してみてください。

Q&Aへジャンプ→

グローバルメニューを消したい場合は?

悩子ちゃん

グローバルナビの消し方がわからない……。

ケイ@

グローバルナビ設定と同じ手順で、空白ページを作れば消すことができるよ。

▼グローバルナビの消し方

  • メニューを新規作成
  • グローバルナビ空白のまま保存
STEP
ダッシュボード→「外観」→「メニュー」をクリックする。
グローバルナビを消す方法
グローバルナビを消す方法
STEP
新しいメニューを作成しましょう。

「グローバルナビ(消去用)」などわかりやすいものがオススメです。

メニューを設定して保存する
メニューを設定して保存する

グローバルメニューのQ&A

ケイ@

グローバルナビに関することをQ&A形式でまとめてみたので、ぜひ参考にしてみてください。

グローバルナビってそもそもなんのために使うの?

サイトの内容をわかりやすくすることはもちろん、ユーザーが目的の情報を見つけるための導線づくりに使います。

SWELL以外のほかのテーマでも設定できるの?

ほかのテーマでも設定することができます。

しかし、プルダウンやアイコン挿入などのカスタマイズが簡単にできるのはSWELLだけです。

SWELL公式HPのように、追従設定(常にグローバルナビが上にある状態)はどうやったらできるの?

「外観」→「カスタマイズ」→「ヘッダー」内の「ヘッダー追従設定」にチェックを入れると、PC・スマホそれぞれ追従設定ができます。

ヘッダーの追従設定方法
ヘッダーをクリックする
ヘッダーの追従設定方法
追従機能を表示させたい個体にチェックする
SWELL公式のように、ボタンリンクをつけるにはどうしたらいいの?

ブログパーツを使い、SWELLボタンを作ることで挿入することができます。

詳しいやり方は、
こちらの記事で解説しています。

【初心者向け】ブログパーツの使い方から使用例を紹介します

スマホでヘッダー表示の設定をしたのに、表示されないときどうしたらいいの?

カスタマイズ設定で、
ヘッダーを透明に設定していると表示されません

カスタマイズ→「ヘッダー」で、設定をチェックしてみてください。

ヘッダーが追従されない時の、直し方
背景を透明にすると表示されません。
Font Awesomeで設定したアイコンが表示されないときはどうしたらいいの?

Font Awesomeは使用前に読み込み設定が必要です。

ダッシュボード→「SWELL設定」→「Font Awesome」のcssで読み込むにチェックをいれましょう。

詳しくはSWELL公式を参照してみてください。

SWELL公式>>SWELLでFont Awesomeのアイコンを使う方法

グローバルナビを設定して、環境を整えよう

SWELLのカスタマイズ機能を使えば、グローバルナビは簡単に設置することができます。

グローバルナビを設定することで、
いままで以上にサイト内を見てもらえるチャンスが広がるので、他のサイトを参考にしながらぜひ設定してみてください。

グローバルメニューだけでなく、SWELLにはカスタマイズ機能がたくさんあります。

まだまだ使いこなせていない!という方は、こちらの記事でSWELLブロックの使い方をチェックしてみてください。

【SWELLブロック】全20種類の使い方!初心者向けにわかりやすく解説

  • パソコン初心者でもかんたんに使える
  • かんたんにおしゃれなブログを作れる
  • 記事を書くのが楽しくなるSWELLのブロックエディタ

ブログ村参加しています。

SWELL グローバルナビの設定方法

この記事が気に入ったら
フォローしてね!

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

コメント

コメントする

タップできる目次