MENU

当ブログ愛用のWordPressテーマ

広告

＼乗り換え先おすすめテーマ！／

SWELL公式サイトを見る ＞

／ブロガーとして本格的に取り組む＼

SWELLの評判レビュー記事
SWELLの評判を徹底レビュー｜Cocoonから乗り換えた理由や使ってみた感想も紹介「SWELLを購入しようか迷っている…」 「SWELLのメリット・エメリットは？」 「SWELLを導入すれば何が変わるのか知りたい」 この記事では、そんな方に向けて、SWELLの評...
購入する

最新のSEO・サイト高速化に対応｜WordPressテーマ「SWELL」の評判レビューはこちら >>

SWELLの評判レビューはこちら >>

クリック

タップ

  1. ホーム
  2. ブログ
  3. SWELL
  4. SWELLでグローバルナビ(ヘッダーメニュー)の設定方法【PC・スマホ別】｜アイコンの挿入でおしゃれさUP！

SWELLでグローバルナビ(ヘッダーメニュー)の設定方法【PC・スマホ別】｜アイコンの挿入でおしゃれさUP！

広告
SWELL

「グローバルナビのカスタマイズ方法は？」

「スマホでもグローバルナビを設定したい」

「グローバルナビにアイコンやボタンを設置できる？」

この記事では、そんな方に向けて、SWELLでグローバルナビ（ヘッダーメニュー）の設定方法を解説します。

かめコンパス

こんにちは、かめコンパスです！

本記事の内容

＼読みたい箇所をクリック／

この記事を読めば、あなたも簡単に

  • グローバルナビをおしゃれにカスタマイズ

できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、ブログ回遊率UPもできました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

グローバルナビを設定できるメニュー機能の用語と使い方が分からない場合は、さきに下の記事からご覧ください。

あわせて読みたい
SWELLでメニュー機能の説明と使い方5ステップ【初心者必見】 「メニュー機能の使い方が分からない」 「メニュー機能に知らない用語がある…」 「メニュー機能でヘッダーやフッターをカスタマイズしたい」 この記事では、そんな方に…

また以下の記事では、SWELL導入後にやるべき初期設定をまとめて紹介しています。

あわせて読みたい
SWELLの初期設定｜これさえやっておけば間違いなし！ 「最近SWELLを購入した」 「SWELL導入後、何をどう設定すればいいの？」 「SWELLの初期設定が知りたい」 この記事では、そんな方に向けて、SWELLでやっておくべき初期設…
目次

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

SWELLでグローバルナビ（ヘッダーメニュー）を設定する方法を、以下のデバイス画面別で紹介します。

【PC編】グローバルナビの設定方法

SWELLでPC用のグローバルナビ（ヘッダーメニュー）を設定する方法は、下記のとおりです。

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

「外観」「メニュー」がある場所
STEP
  1. 「新しいメニューを作成しましょう」をクリック
  2. メニュー名を入力※なんでもOK
  3. 「グローバルナビ」に✔
  4. メニューを作成をクリックする
グローバルナビメニューを作成している様子
STEP
  1. をプルダウン
  2. 「すべて表示」をクリック
  3. グローバルナビに設定したい項目に✔
  4. メニューに追加をクリックする
グローバルナビに設置したい項目を追加している様子
STEP
  1. 追加された項目を並び替える
  2. メニューを保存をクリックする

1番上に設置した項目が、グローバルメニューの1番左側になります。

グローバルナビメニューに追加した項目を並び替える様子と、「メニューを保存」がある場所

これで、PC用のグローバルナビ（ヘッダーメニュー）の設定完了です。

【スマホ編】グローバルナビの設定方法

SWELLでスマホ用のグローバルナビ（ヘッダーメニュー）を設定する方法は、下記のとおりです。

STEP

WordPress管理画面で、外観⇒メニューの順にクリックする

「外観」「メニュー」がある場所
STEP
  1. 「新しいメニューを作成しましょう」をクリック
  2. メニュー名を入力※なんでもOK
  3. 「スマホ用ヘッダー」に✔
  4. メニューを作成をクリックする
スマホ用ヘッダーメニューを作成している様子
STEP
  1. をプルダウン
  2. 「すべて表示」をクリック
  3. スマホ用ヘッダーに設定したい項目に✔
  4. メニューに追加をクリックする
スマホ用ヘッダーに設置したい項目を追加している様子
STEP
  1. 追加された項目を並び替える
  2. メニューを保存をクリックする

1番上に設置した項目が、グローバルメニューの1番左側になります。

スマホ用ヘッダーメニューに追加した項目を並び替える様子と、「メニューを保存」がある場所

これで、スマホ用のグローバルナビ（ヘッダーメニュー）の設定完了です。

SWELLグローバルナビをおしゃれにカスタマイズ！

先ほど設定したグローバルナビ（ヘッダーメニュー）をおしゃれにカスタマイズしていきます。

カスタマイズ内容
グローバルナビをカスタマイズした様子

それぞれ詳しく解説します。

アイコンを挿入する

SWELLのグローバルナビ（ヘッダーメニュー）にアイコンを挿入するには、ナビゲーションラベルにショートコードを入力します。

ナビゲーションラベルの場所
ナビゲーションラベルがある場所
  1. 先ほど作成したグローバルナビメニューを開く
  2. アイコンを挿入したい項目のをプルダウンする

使用するショートコードは、以下のとおり。

[icon 〇〇]　または　[アイコン 〇〇]
※〇〇にアイコンのクラス名を入力する
かめコンパス

2つあるショートコードのうちどれかを使ってね

SWELLで使えるアイコンとクラス名は公式サイトで紹介されていますが、本記事でも一部抜粋して紹介します。

アイコンクラス名アイコンクラス名
icon-swellicon-wordpress
icon-phoneicon-mail
icon-searchicon-cart
icon-personicon-download
icon-megaphoneicon-check
icon-homeicon-bubbles
icon-caret-downicon-caret-up
icon-caret-lefticon-caret-right
icon-chevron-downicon-chevron-up
icon-chevron-lefticon-chevron-right

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

かめコンパス

おしゃれなアイコンが豊富！

ショートコードの使い方の例として、プロフィールの左側にを表示させたい場合は、ナビゲーションラベルに以下のように入力します。

[アイコン icon-person] プロフィール
ナビゲーションラベルにショートコードを入力した様子

ショートコードを入力し、メニューを保存をクリックすれば完了です。

かめコンパス

アイコンがあると視認性がアップするからおすすめだよ

ドロップダウンメニュー(階層構造)を作る

SWELLのグローバルナビ（ヘッダーメニュー）には、以下の画像のように項目を右にスライド配置させることで、ドロップダウンメニュー（階層構造）を作ることができます。

項目を右にスライドした様子

階層構造を作り、メニューを保存をクリックすれば完了です。

かめコンパス

マウスカーソルを上に持ってこないとドロップダウンメニューが表示されないから、あまりおすすめしないかな…

サブテキストを入力する

SWELLのグローバルナビ（ヘッダーメニュー）にサブテキストを入力するには、説明にテキストを入力します。

説明の場所
説明がある場所
  1. 先ほど作成したグローバルナビメニューを開く
  2. アイコンを挿入したい項目のをプルダウンする

＼クリックで開く／

「説明」がない場合はこちら
「説明」を表示させる手順
  1. 「表示オプション」をプルダウン
  2. 「説明」に✔する

「説明」にサブテキストを入力し、メニューを保存をクリックすれば完了です。

かめコンパス

サブテキストは短めのほうがユーザーに分かりやすく伝わるよ

ボタンを設置する

SWELLのグローバルナビ（ヘッダーメニュー）にボタンを設置するには、

  • 手順①：ブログパーツでボタンの作成
  • 手順②：ウィジェットからボタンを配置

で可能です。

手順①：ブログパーツでボタンの作成

STEP

WordPress管理画面で、ブログパーツ⇒新規投稿を追加の順にクリックする

「ブログパーツ」「新規投稿を追加」がある場所
STEP

+をクリックし、SWELLボタンをクリックする

「+」「SWELLボタン」がある場所
STEP

ボタンにテキストとリンク先URLを入力する

SWELLボタンにテキストとURLを入力する場所
STEP

公開をクリックする

「公開」がある場所

これでボタンの作成完了です。

STEP

WordPress管理画面に戻り、ブログパーツ⇒ブログパーツの順にクリックする

「ブログパーツ」「ブログパーツ」がある場所
STEP

作成したブログパーツの呼び出しコードをコピーしておきます。

呼び出しコードがある場所
かめコンパス

呼び出しコードは後で使うよ

手順②：ウィジェットからボタンを配置

STEP

WordPress管理画面で、外観⇒ウィジェットの順にクリックする

「外観」「ウィジェット」がある場所
STEP
  1. 「カスタムHTML」のをプルダウン
  2. 「ヘッダー内部」をクリック
  3. ウィジェットを追加をクリックする
「カスタムHTML」ウィジェットを追加する様子
STEP

「内容」に先ほど作成したブログパーツの呼び出しコードを貼りつけて、保存をクリックする

カスタムHTMLにブログパーツの呼び出しコードを入力している様子と、「保存」がある場所

これで、グローバルナビ（ヘッダーメニュー）にボタンの設置完了です

SWELLグローバルナビでよくある質問

ここからはSWELLのグローバルナビ（ヘッダーメニュー）でよくある質問に回答します。

Q&A
かめコンパス

気になる質問をクリックしてね

グローバルナビを非表示にする方法は？

SWELLでグローバルナビを非表示にする方法は、メニュー項目を1つも追加しなければできます。

STEP
  1. 「新しいメニューを作成しましょう」をクリック
  2. メニュー名を入力※なんでもOK
  3. 「グローバルナビ」に✔
  4. メニューを作成をクリックする
グローバルナビメニューを作成している様子
STEP

メニュー項目を追加せず、メニューを保存をクリックする

メニュー項目が空っぽな様子と、「メニューを保存」がある場所
STEP

これでグローバルナビを非表示にできます。

グローバルナビ（ヘッダーメニュー）が非表示になった様子

グローバルナビが表示されない原因は？

SWELLでグローバルナビが表示されない原因は、メニューの位置を設定していないからです。

メニューの位置が設定されていない様子
  • PCで表示する場合…グローバルナビ
  • スマホで表示する場合…スマホ用ヘッダー

に✔すれば、表示されるようになります。

SWELLでグローバルナビの設定方法まとめ

今回は、SWELLでグローバルナビ（ヘッダーメニュー）の設定方法を紹介しました。

本記事のおさらい

＼読み直したい箇所をクリック／

グローバルナビを設定し終えたら、あわせてヘッダーのカスタマイズも行いましょう。

あわせて読みたい
SWELLでヘッダーのカスタマイズ方法｜ロゴ画像やボタンも設置できる！ 「ヘッダーのカスタマイズ方法は？」 「ヘッダーロゴ画像の推奨サイズを教えて…」 「ヘッダーにボタンを設置できる？」 この記事では、そんな方に向けて、SWELLでヘッダ…

また、本記事で紹介した内容と同じくらい重要なフッターの設定がまだの人は、以下の記事もご覧ください。

あわせて読みたい
SWELLでフッターのカスタマイズ方法｜3つある機能をデザインして利便性を高めよう 「フッターのカスタマイズ方法は？」 「スマホ画面で固定フッターを表示させたい」 「フッターに設置するおすすめのコンテンツを教えて…」 この記事では、そんな方に向…

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

SWELL記事のカテゴリー一覧
かめコンパス

ためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです！

SWELL
SWELLでグローバルナビ(ヘッダーメニュー)の設定方法の記事

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

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

コメント

コメントする

目次