グローバルナビの設置方法を画像解説 ワードプレスCocoon編

ワードプレスのロゴと記事タイトル画像 ワードプレス

こんにちわ。

りゅうまるです。

 

この記事では、ワードプレスブログにグローバルナビゲーションを設置する手順を画像解説していきます。(カスタマイズ付き)

グローバルナビゲーションとは

グローバルナビとかヘッダーメニューとかいうやつですが、これはもう設置してないブログ(サイト)のほうが圧倒的に少ないですよね。

 

ブログを開いたときによく目につくページ上部(ヘッダー)に設置してありますね。

 

ブログの概要をユーザーに伝えるための案内表示(リンク)という位置づけかな。

 

僕が運用している自社集客用のホームページにもしっかり設置してあります。

 

会社概要、お問い合わせ、料金、アクセス、選ばれる理由なんてのが定番の項目ですね。

 

事業内容と特徴を知ってもらうためのサイトなのでブログの様に頻繁に更新はしませんが、施工事例を定期的に更新して、放置サイトにしないようにしています。

 

そうそう、この記事は、前回記事にしたお問い合わせフォームの設置方法の続きになります。

 

前回は、「Contact Form 7」という有名なプラグインを使ったお問い合わせフォームの作成方法だけで終わってしまったので、その記事内へのリンク(メニューボタン)を早く設置しなくちゃなんないんですよね。(前回の続編として)

 

でないと、お問い合わせフォームはできたけどリンク(メニューボタンが)ユーザーの目に触れないんじゃ全く意味ないですからね。

 

恥ずかしながら、僕の運用しているもう一つのワードプレスブログにはグローバルナビが設置してないので、別ウインドウで設置作業をしながらさっそく記事を書いていきます☆(前回もフォームの設置、画像加工、記事作成の同時作業だったんですがむっちゃ効率悪いです)

 

記事内では、よく使われている言い方のグローバルナビで統一していますが、実際の設定場面(画像)ではヘッダーナビという表示になっています。

 

グローバルナビとヘッダーナビは全く同じものです。

 

前回の記事でも書きましたが、僕は無料テーマのCocoonを使用しているので他のテーマと若干手順が異なるかもしれません。

 

ご了承くださいませm(__)m

 

ワードプレス(コクーン)にグローバルナビゲーションを設置する方法

 

まずはワードプレスのダッシュボード(左管理メニュー)から外観⇒メニューをクリックします。

 

ワードプレスダッシュ簿度外観メニュー画面

 

このメニューページ内での設定がメインになります。

 

ブログ内にメニューを設置できる場所は、ヘッダー(グローバルナビ)、フッター(ページ最下部)、モバイル版表示向けの3種類ですが、モバイル表示での対応は表示される端末の横幅が768px(ピクセル)以下の場合です。(Cocoonの場合です)

 

Cocoonは、標準でレスポンシブ(モバイル表示最適化)仕様なので、わざわざモバイル表示の設定をしなくても、以下の様に反映されます。(画面下で追従)

 

ワードプレスCocoonのスマホ表示メニュー

デフォルトでのモバイルメニュー表示

 

この後のメニュー設定画面で、一か所にチェックを入れるだけで、以下の様にグローバルナビとして反映されます。(以降画像解説)

 

グローバルメニューのスマホ表示の画像

モバイルヘッダーナビにチェックした場合のモバイルメニュー表示

 

この記事ではグローバルナビ(ヘッダーメニュー)を例に進めていきますが、フッター(ページ最下部)メニューに反映させるやり方もモバイル表示同様、一か所にチェックを付けるだけです。(以降画像解説)

 

グローバルナビに設定できるのは以下の4項目です。(URLが存在するページ

 

  • 固定ページ⇒お問い合わせやプライバシーポリシーなど)
  • 投稿(個別の記事ページ)
  • カスタムリンク(任意のURL)
  • カテゴリー(存在する任意の項目)

新規メニューを作成してメニュー構造を設定

グローバルナビのメニューを設定するための新規メニューを作成します。

 

ダッシュボード⇒外観⇒メニューとクリックすると以下の様にメニュー作成画面に変わるので、新規メニューを作成をクリックします。

 

まず新規作成メニューに、メニュー名を付けます。

 

メニュー名はブログ内での覚書きなので、実際のメニューには表示されません。

 

今回は、「ヘッダーメニュー」としました。

 

メニュー名を付けたらメニューを作成をクリックします。

 

ワードプレスCocoonのナビゲーションメニュー作成画面

 

新規メニューを作成⇒任意のメニュー名を記入⇒メニューを作成をクリックと進むと、先ほどの4項目(固定ページ、投稿、カスタムリンク、カテゴリー)が表示されます。

 

ワードプレスのナビメニューの項目一覧

 

この中からグローバルナビのメニューとして設置したい項目を選んでいきます。

 

メニューに設置したい項目欄をクリックすると、プルダウンメニューが開きます。(以下画像では固定ページをクリックしています)

 

ワードプレスのナビメニュー設定画面

 

表示させたいページを選んで追加する

 

プルダウンメニュー内から、グローバルナビに並べたいページにチェックし、メニューに追加をクリックすると、メニュー構造下(緑枠内)に選択したメニュータブが並びます。

 

以下の画像では、すでに作成済みの固定ページすべて表示させ、ホームお問い合わせフォーム追加しています。

 

固定ページのすべて表示をクリックしても、ホームが表示されない場合はカスタムURLの項目から追加できます。(以下で解説しています

 

すべての項目を追加するまで「メニューを保存」ボタンは押しません。

 

ワードプレスのナビメニューを固定ページから追加する画像

 

ちなみに、HTMLサイトマップを固定ページで作成してグローバルナビやフッターメニューに設置している方は多いですよね。(メニュー名はサイトマップが多いかも)

 

例にしているブログは運用して間がないので、固定ページにプライバシーポリシーとお問い合わせしか作っていませんが、すでに固定ページで作成済みのHTMLサイトマップをグローバルナビに表示させる場合はこの時にチェックONしておいてくださいね。

 

HTMLサイトマップを作成していない方は、以下の記事を参考にしてください。

【画像解説】HTMLサイトマップを設置しよう!ワードプレス編(Cocoon)
ワードプレスブログにHTMLサイトマップを設置する方法を豊富な画像で解説しています。テーマCocoonで【PS Auto Sitemap】というプラグインを使用したやり方です。4.9以前と5.0以降のやり方を掲載してあります。参考にしてくださいね。

 

固定ページ以外の項目からも、同じ要領でメニュー(ページ)を追加していきます。

 

先ほど、固定ページから設定したお問い合わせホーム(トップページ)に加えてカテゴリーすべて表示させCD映像作品追加してみます。

 

ワードプレスナビメニューのカテゴリーから追加する画面

 

カスタムリンクの使い方

 

カスタムリンクを使用してリンク(メニュー)を設定する場合は任意のURLを記入しますが、記入欄には最初から「HTTP://」と記入されているので、「HTTPS://」でサイトを運用している方は、バックスペースで文字列(HTTP;//)を削除してから、正しいURLを記入するか、Pの後に Sを追加してくださいね☆

 

 

先ほど、固定ページ項目のすべて表示をクリックしてもホームが表示されなかった場合は、カスタムURLにブログのURLを入力してメニューに追加してください。

通常は、記事一覧のURL(サイトのURL)をホームとして入力してください。

このブログの場合、https://kokotoku.com/がURLです。

 

複数サイトを運用している場合、関連サイト(姉妹サイト)などを紹介したい時に便利ですよね。

 

リンク文字列にはナビメニューに表示させたい項目名を記入し、メニューに追加してください。

 

ワードプレスのカスタムリンクメニュー設定画面

 

グローバルナビに設置したいメニューをすべて追加したら、「メニューを保存」をクリックします。

 

ワードプレスのナビメニューを保存する画面

 

これで、グローバルメニューの項目設定は完了です。

 

メニューの並び替えと階層の設定

メニュー構造に並んでいる項目はドラッグ&ドロップで並び替えることができます。

 

左右の順番を並べ替える場合は、上下に移動します。

 

この時一番上にあるメニューが、グローバルナビでは一番左に配置されます。

 

メニュー構造の上下並べ替え

 

階層を付けるには、目的の項目にカーソルを乗せ、右側にドラッグで移動するだけです。

 

グローバルナビでは、いわゆるドロップダウンメニューになります。

 

サブメニューが反映されるのはグローバルナビだけです。

 

別ウインドウで設置作業しながらの記事作成で、画像の用意が間に合わない為ココは当ブログの画像を使用してます。(汗)

 

メニュー構造の階層化

 

メニュー名を変更する

メニュー構造に設置した項目右側の矢印(▼マーク)をクリックすると、メニュー名の変更や項目の削除、上下の移動などが行えます。

 

以下の画像では、「お問い合わせフォーム」を「お問い合わせ」に変更しています。

 

メニュー構造内での編集画面

同じメニューをグローバルナビ以外にも設置できます

今回設定(設置)したグローバルメニューを、フッターやモバイル版表示に反映することもできます。

 

その場合は、メニュー設定のメニューの位置で追加したい項目にチェックを付けてください。

 

メニューをフッターやモバイル(スマホ)表示に反映させるには

 

この時、メニュー設定項目のメニューの位置で、モバイルヘッダーナビにチェックを入れておくとスマホ表示でもグローバルナビが表示されるようになります。(レスポンシブ対応のテーマに限る)

 

ワードプレスナビメニュー作成のモバイル設定

 

グローバルメニューのスマホ表示の画像

 

同様に、メニュー設定項目のメニューの位置で、フッターナビにチェックを入れておくとフッターメニュー(ページ最下部)が表示されるようになります。

 

ワードプレスのナビメニューにフッターを設定

 

ワードプレスCocoonのフッタースマホ表示画面

 

 

グローバルナビの編集方法(Cocoon設定)

一連の設定で見事にグローバルナビが設置できましたが、デフォルトは超シンプル!

 

先にグローバルナビ設置前と設置後の画像をご覧ください。(これはデフォルト設定です)

グローバルナビ設置前のヘッダー

もともとスッキリシンプルなデザインが好きなので、ヘッダーデザインはブログタイトルの太文字と、文字色の変更しかしてないんですよね。

 

シンプルなのはいいんですが、グローバルナビがないのはあまりにもそっけないし、ユーザー目線を無視しちゃってますね。

 

グローバルナビゲーションを設置する前のヘッダー画像

グローバルナビ設置後のヘッダー

以下、グローバルナビゲーション設置後の画像です。

 

シンプルですが、今回設定した、お問い合わせホームCD映像作品の4項目がグローバルナビとして反映されました。

 

枠っていうか、仕切りひとつありません!

 

グローバルナビゲーション設置後のヘッダー画像

 

Cocoon設定でナビゲーションをカスタマイズ

安心してください。このままでは終わりませんから★

 

CSSでカスタマイズする方法もありますが、Cocoonの場合、ある程度の装飾は管理メニュー内から簡単に設定できてしまいます。

 

ダッシュボード(左管理メニュー)内のCocoon設定をクリックし、ヘッダー項目をクリックします。

 

少し下にスクロールすると、グローバルナビの編集項目があります。

 

ワードプレステーマCocoonの設定画面

 

「Cocoon設定」でカスタマイズできる内容は以下の通りです。

 

  • ナビの背景色
  • ナビのテキスト色
  • トップメニューの横幅(px指定)
  • サブメニューの横幅(px指定)

 

あ~あ(*´Д`) 大げさにカスタマイズなんて書いちゃいました(笑)が、以下の様にカスタマイズできました。

Cocoon設定でグローバルナビをカスタマイズした結果

Cocoon設定でグローバルナビを編集した結果の画像

 

ん~~なかなかいいですね☆

 

どう思います?

 

可もなく不可もなく?

 

飽きの来ないデザインということで(*^^)v

 

カスタマイズ(スリムバージョン)

 さらにカスタマイズっていうと大げさですが、Cocoon設定からも一つカスタマイズできてしまうのでやってみようと思う方は以下から!

 

メニューの高さ(縦幅)を狭くする設定です。

Cocoon設定の「ヘッダー」タブをクリック⇒ プレビュー画面下の「ヘッダーレイアウト」項目 横にある窓(プルダウン)を開けるとグローバルナビの高さ(幅)を調整することができます。


ワードプレステーマCocoonの設定画面

プルダウン内のセンターロゴ(デフォルト)からセンターロゴ(スリムメニュー)に変更するだけで、ナビメニューの高さ(幅)を細くすることができてしまいます。


▼マークをクリックして開けてね♪


ワードプレステーマCocoonの設定画面


高さの幅は調整できないようですが、デフォルトとスリムメニューでは結構見た目が変わるので、お好みに合わせてカスタマイズしっちゃてください!



変更後は「変更をまとめて保存」を忘れないで下さいね。



変更前(デフォルト)と変更後(スリムメニュー)の比較画像です。

ワードプレスCocoonのグローバルナビゲーションのカスタマイズ画像

 

カスタマイズ(アイコン追加)

ナビゲーションメニューにアイコンを追加して、ちょっとおしゃれにカスタマイズできます。

 


例としてホームに家のアイコンを表示させてみます。

ブログのトップページ画面


解説の流れ

  • コードの貼り付け方(wp内)
  • デザイン調整(wp内)
  • コードを選んで取得(外部サイト)



ダッシュボード⇒外観⇒メニューへと進みます。

ワードプレスのダッシュボード画面



《メニュー(構造)画面です》


ヘッダーメニューを選択していることを確認してくださいね。

ワードプレスのメニュー構造選択画面



アイコンコードの貼り付け方


追加するコード(家のアイコン)

<i class=”fa fa-home” aria-hidden=”true”></i>


アイコンを付ける項目(ここではホーム)を開いてナビゲーションラベルにコードを追加します。

矢印→▼をクリックするとナビゲーションラベルが編集できます。

※テキスト(メニュー名)の手前にコードを追加してください。

ワードプレスのメニュー設定画面


コードを貼り付けたら「メニューを保存」をクリックします。

ワードプレスのメニュー構造設定画面


これで、グローバルナビに家のアイコンが表示されます。




ココからデザイン調整の解説です。


余白(隙間)の追加


アイコンと文字列の組み合わせによっては、間隔が詰まりすぎて見栄えが悪くなってしまいます。(アイコンと1文字目の間)


元のコードにfa-fwを追加するだけで解消できます。

グローバルナビのアイコン設置例




アイコンサイトから取得したコードに[fa-fw]を追加します。


《余白なしのコード》

<i class=”fa fa-home” aria-hidden=”true”></i>


注意:⇒○半角スペースを忘れずに⇒fa-home○fa-fw


※homeの後に半角スペース(shift+スペースキー)をいれてから[fa-fw]を追加します。


《余白ありのコード》

<i class=”fa fa-home fa-fw” aria-hidden=”true”></i>


アイコンサイズの変更


アイコンのサイズを変更する場合は、取得したコードに[fa-○○]を追加します。


○○⇒lg→2x→3x→・・・の順にサイズアップしますが、大きすぎるとデザインが崩れます。

アイコンサイズの比較画像


《指定なし(未記入)のコード》

<i class=”fa fa-home” aria-hidden=”true”></i>



注意:⇒○半角スペースを忘れずに⇒fa-home○fa-lg

※homeの後に半角スペース(shift+スペースキー)をいれてから[fa-lg]を追加します。



《fa-lg(サイズ)を変更したコード》

<i class=”fa fa-home fa-lg” aria-hidden=”true”></i>


《余白を付けてサイズを変更する場合》

注意:⇒○半角スペースを忘れずに→home○fa-fwfa-1g” 

homeの後に半角スペース。fa-fwの後に半角スペースをそれぞれ入れます。

《余白を付けてアイコンサイズを変更したコード》

<i class=”fa fa-home fa-fw fa-lg” aria-hidden=”true”></i>


アイコン(コード)を取得するサイト

Font Awesomeのアイキャッチ画像

公式サイト⇒ https://fontawesome.com/v4.7.0/icons/


Font Awesomeは無料でアイコン(コード)を無料で取得できるサイトです。(日本語対応)



Font Awesome(4.7.0)の使い方


トップページからアイコン一覧ページへ移動してください。


アイコンをクリックするとコードが表示されます。

Font Awesomeのログイン画面
Font Awesomeのアイコン選択画面


表示されたコードをコピーして、ワードプレス内ナビゲーションラベルへ貼り付けてください。

アイコンコードの取得画面


ここで紹介したアイコンサイト(Font Awesome4.7.0)は、最新バージョン(5.0)ではありません。


最新バージョンでは、アイコンの種類が追加されていますが、現状(2019/3)のCocoonテーマでは対応していないようです。(試したけど反映しない)


Cocoonは頻繁にバージョンアップデートするので、やがて対応すると思います。
(4.7.0には現在対応中なのでライセンスコードの追加は必要ありません)


最新(5.0)のコードを反映させるには、ライセンスコードの設置作業が必要です。


テーマの編集⇒head-insert.phpへの貼り付けができる方は以下のコードを使用してください。


テーマの編集は自己責任でお願いします。



「Font Awesome 5のライセンスコード」

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.2/css/all.css” integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>

Font Awesome5.7.2のアイキャッチ画像

公式サイト⇒Font Awesome5.7.2 

 

グローバルナビゲーション設置のまとめ

いかがでしたでしょうか。

 

思ってたよりCocoon限定にならなかったと思うんですが。

 

最後のCocoon設定以外はワードプレス共通っていう感じじゃないでしょうか。

 

今回グローバルナビゲーションを設置したブログは、運用して約3か月間という若さなんですよね。

 

前回、お問い合わせフォームを設置しながら、キャプチャ画像を加工して同時に記事を書いていたんですが、あまりに時間がかかりすぎて固定ページにフォームを設置するとこまで書くのがやっとでした。(もちろん徹夜です)

 

お問い合わせフォームができても、リンク(メニュー)を設置しないと意味ないですよね。

 

この記事と合わせて早速公開したいと思います。

 

珍しくもない内容ですが、どなたかのお役に立てばうれしいです。

 

りゅうまるでした★

 

 
あわせて読みたい

>>【WordPress】お問い合わせフォームの簡単設置方法を画像解説

 

あわせて読みたい

>>アドセンスで稼げるテーマ【Cocoon】申請から合格までを画像で徹底解説!

 

あわせて読みたい

>>アドセンスで稼げるテーマCocoon|広告設定最適化で収益アップ!

 

あわせて読みたい

>>アドセンスで稼ぎたい方必見!申請手順とログインエラーの解決策まとめ

コメント