ホームページの作り方

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する

WordPressで作成したホームページのヘッダーを最適化する

 

当ページの想定利用者

  • WordPressで作成したホームページのヘッダーを整備したい
  • ヘッダーにメニューを表示させる方法は?
  • メニューを一通り編集する方法について知りたい

 

この記事では、上記のようなご要望やお悩みにお応えする有意義な情報を掲載しています。
ガイド

 

「ホームページ作成サービス」を使わずにホームページを作る

昨今では多くの「ホームページ作成サービス」が登場しており、従来はデザイン会社などに発注するなどして作成していたホームページが、パソコン初心者でも簡単に作ることができるようになりました。

ただしそうした便利なサービスは、ホームページを運営するうえである程度の制約・デメリットが存在します。

 

100%思い通りのホームページ作成はできない

「ホームページ作成サービス」を使えば、極めてスピーディーに一通り完成されたホームページを作ることができますが、一方でユーザーが作り込める余地が少ないので、真に理想的なホームページ作成は行えないのが現状です。

 

集客力を向上させることにも限界がある

また「ホームページ作成サービス」を利用する場合、SEO(検索エンジン最適化)というGoogle検索などからホームページに訪れるユーザーの数を増やすための施策が十分に行えない可能性が高いです。

例えば根本的にSEO対策に関連する特定の項目にタッチすることができなかったり、公開可能なページ数が限られているため情報発信の量に制限がかかってしまい、結果としてSEO効果が十分に発揮されないなどの問題が挙げられます。

 

ユーザーに直接的な不利益を与える可能性も・・・

さらにホームページデザインのカスタマイズにも限界があるので、ユーザーの導線を意識したベストなコンテンツのレイアウトが行えないことで、ユーザーがホームページ内の情報にリーチすることができず、多くの機会損失を被る恐れなどもあります。

 

以上のようなデメリットが「ホームページ作成サービス」を利用することには挙げられるため、下記の記事でホームページを自ら作成する方法について解説してきました。

関連リンク【ホームページ自作の準備】WordPressでホームページを自作するための準備|ワードプレスなら高い集客力を持つ理想的なサイトが作れる!

 

ヘッダーにメニューを表示してサイトの利便性を高める

今回はWordPressで作成したホームページのヘッダーにメニューを表示させる方法について解説していきます。

ヘッダーメニューはGoogleによるサイト評価においても無視できない重要要素の一つなので、この機会にしっかりと編集方法を習得しておきましょう。

 

本記事を読めば、WordPressヘッダーメニューの編集方法が一通り理解できますよ!
ガイド

 

 

本記事の内容

 

「WordPress」ヘッダー編集方法|管理画面にアクセスする

まずはWordPressのヘッダーを編集するために、WordPress管理画面にログインしましょう。

 

WordPress管理画面へのログイン方法

WordPressの管理画面にアクセスするには、下記の管理画面URLにアクセスしてログインする必要があります。

https://独自ドメイン/wp-admin/

 

例えば「machi-pan.tokyo」という独自ドメインの場合、【https://machi-pan.tokyo/wp-admin/】となります。

なおhttpのあとに付く「s」は付かないこともあるので、上記の形式でアクセスできなかった場合は「s」を抜いて再チャレンジしてみましょう。

 

サーバーの管理画面からアクセスする

独自ドメインがよく分からなくなってしまった場合は、契約しているサーバーの管理画面を経由してWordPress管理画面にアクセスを試みるといいでしょう。

当サイトではConoHa WINGのサーバーサービスを用いたWordPressでホームページ作成をおすすめしているので、ここではConoHa WINGの管理画面を参考に例示していきます。

 

ConoHa WINGにログインする

まずは下のURLからConoHa WINGにログインしましょう。

>>レンタルサーバー「ConoHa WING」にログインする

 

サイト管理画面からWordPress管理画面にアクセスする

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする

ConoHa WING管理画面が表示されたら、画面左にある「サイト管理」をクリックしましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする:続いて「アプリケーションインストール」と書かれた下にあるURLをクリックして新たなメニューを表示させて、「管理画面URL」項目の横に表示されているURLをクリックしましょう。

続いて「アプリケーションインストール」と書かれた下にあるURLをクリックして新たなメニューを表示させて、「管理画面URL」項目の横に表示されているURLをクリックしましょう。

これでWordPress管理画面にアクセスすることができます。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|管理画面にアクセスする:あとはユーザー名またはメールアドレスとパスワードを入力して、WordPressにログインするだけです。

あとはユーザー名またはメールアドレスとパスワードを入力して、WordPressにログインするだけです。

 

>>目次へ戻る

 

「WordPress」ヘッダー編集方法|メニューを編集する

ここからはWordPressで作成したホームページのヘッダーに表示するメニューを作成・削除したり、表示位置を変更したりする方法についてに、解説していきます。

 

 

メニューを作成する

まずはホームページのヘッダーにメニューを作成しましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する

ダッシュボードページが表示されたら、画面左側にある「外観」から「メニュー」をクリックしましょう。

 

メニューのベースを作成する

「メニュー」画面が表示されたら、早速メニューの基礎となる部分を作成しましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:まずは「メニュー名」と書かれた横にあるフォームにメニューを識別する名前を入力しましょう。

まずは「メニュー名」と書かれた横にあるフォームにメニューを識別する名前を入力しましょう。

例えば「ヘッダーメニュー」というように、具体的にどこで使うメニューなのか理解できるネーミングがおすすめです。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:続いて「メニュー設定」の「メニュー位置」という項目で「ヘッダーメニュー」にチェックを入れます。

続いて「メニュー設定」の「メニュー位置」という項目で「ヘッダーメニュー」にチェックを入れます。

あとは画面右側にある「メニューを作成」をクリックして、ヘッダーに表示するメニューのベースは完成です。

 

メニュー項目を追加する

次はヘッダーメニューに表示するメニュー項目を、具体的に作成しましょう。

 

とりあえずページを用意する

現時点ではまだホームページ上には作成したページが存在しないので、とりあえず「店舗情報」ページのひな型だけ作ります。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:管理画面左にある「固定ページ」から「新規追加」をクリックしましょう。

管理画面左にある「固定ページ」から「新規追加」をクリックしましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:あとは「タイトルを追加」と書かれたフォームにページのタイトルを入力して「公開」をクリックしましょう。

あとは「タイトルを追加」と書かれたフォームにページのタイトルを入力して「公開」をクリックしましょう。

これで固定ページをヘッダーメニューに表示する準備が整いました。

再び画面左側にある「外観」から「メニュー」を選択して、メニュー作成画面に移りましょう。

 

固定ページをヘッダーメニューに表示する

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:再び「メニュー」に戻ると、「メニュー項目を追加」セクションの「固定ページ」に作成した固定ページのタイトルが表示されているのが分かります。

再び「メニュー」に戻ると、「メニュー項目を追加」セクションの「固定ページ」に作成した固定ページのタイトルが表示されているのが分かります。

これにチェックを入れて「メニューに追加」をクリックしてみましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:すると「メニュー構造」セクションに「店舗情報」と書かれた項目が追加されました。

すると「メニュー構造」セクションに「店舗情報」と書かれた項目が追加されました。

あとは画面右側の「メニューを保存」をクリックして、編集内容を保存します。

これでホームページのヘッダー部分に作成したメニューが表示されているはずです。

 

追加したメニューを確認する

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:作成したメニューの表示を確認するには、管理画面上部にあるホームページ名をクリックしましょう。

作成したメニューの表示を確認するには、管理画面上部にあるホームページ名をクリックしましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:するとホームページのトップページが表示されて、ヘッダーに作成したメニューが表示されていることが確認できるはずです。

するとホームページのトップページが表示されて、ヘッダーに作成したメニューが表示されていることが確認できるはずです。

ここまで解説してきた要領で固定ページを作成すれば、また新たなメニュー項目を追加表示させることができます。

適宜必要なページを作成して、ヘッダーメニューに表示させましょう。

 

>>「メニューを編集する」トップへ戻る

>>目次へ戻る

メニュー項目を削除する

次は作成したメニューを構成する各メニュー項目を削除する方法について解説します。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:メニュー項目を個別に削除するには、「メニュー構造」に表示されているメニュー項目から削除したいものをクリックして、新たなメニューを表示させます。

メニュー項目を個別に削除するには、「メニュー構造」に表示されているメニュー項目から削除したいものをクリックして、新たなメニューを表示させます。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:あとは新たに表示されたメニューにある「削除」をクリックするだけです。

あとは新たに表示されたメニューにある「削除」をクリックするだけです。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:「店舗情報」が無くなったのが確認できますね。

「店舗情報」が無くなったのが確認できますね。

これでメニュー項目の削除は完了です。

 

メニューそのものを削除する

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:メニューを構成する各メニュー項目ではなく、包括的にメニューそのものを削除したい場合は、「メニュー構造」セクションの下部にある「メニューを削除」をクリックしましょう。

メニューを構成する各メニュー項目ではなく、包括的にメニューそのものを削除したい場合は、「メニュー構造」セクションの下部にある「メニューを削除」をクリックしましょう。

ここをクリックするだけでメニューを丸ごと削除することができます。

 

>>「メニューを編集する」トップへ戻る

>>目次へ戻る

メニュー項目の表示位置を変更する

最後に作成した各メニュー項目の表示位置を変更する方法について解説しましょう。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:メニューを構成する各メニュー項目ではなく、包括的にメニューそのものを削除したい場合は、「メニュー構造」セクションの下部にある「メニューを削除」をクリックしましょう。

管理画面右側の「外観」から「メニュー」を選択してページを表示させたら、表示位置を変更したいメニュー項目にマウスカーソルを合わせましょう。

するとカーソルが矢印マークから十字にクロスした矢印マークに変わります。

この状態でメニュー項目をクリックしたまま、ドラッグして表示位置を変更させます。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:管理画面右側の「外観」から「メニュー」を選択してページを表示させたら、表示位置を変更したいメニュー項目にマウスカーソルを合わせましょう。

クリックした状態でカーソルを移動させると、画像のようにメニュー項目の間に割り込ませることができます。

移動させたい位置に割り込ませる表示になったらクリック状態を解除して、移動を確定させましょう。

最後に「メニューを保存」をクリックすれば、メニュー項目の移動は完了です。

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:クリックした状態でカーソルを移動させると、画像のようにメニュー項目の間に割り込ませることができます。

この変更によって、元々ヘッダーメニューの右端にあった「店舗情報」が、

 

【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する|メニューを編集する:この変更によって、元々ヘッダーメニューの右端にあった「店舗情報」がヘッダーメニュー中央に移動したのが確認できます。

ヘッダーメニュー中央に移動したのが確認できます。

 

これでヘッダーメニューの編集方法は一通りマスターしたことになります。
ガイド

 

>>「メニューを編集する」トップへ戻る

>>目次へ戻る

「WordPress」ヘッダー編集方法|まとめ

「【WordPress:ホームページのヘッダー編集】WordPressで作成したサイトのヘッダーを編集する方法|メニューを配置して導線を確保する」と題して、「WordPress」で作成したホームページのヘッダーメニューを作成したり削除したりする方法について、詳しく解説してきました。

 

ヘッダーを整備して、ホームページの利便性を高めましょう!

ヘッダーメニューは、ホームページに来訪するユーザーの道標になる重要な要素です。

このメニュー表示を最適化させているか否かで、ホームページ内にある情報を求めてユーザーが移動する回遊性を高めることに繋がり、それはひいてはGoogleのサイト評価を高めることにも繋がります。

ホームページ管理者にとっても、来訪してくれるユーザーにとっても大きな意味のあるヘッダーメニューは、ぜひとも早いうちにしっかり整備しておきましょう。

 

ホームページの内容を最適化して、ユーザーにとって使いやすいサイト化を目指しましょう!
ガイド

 

【まとめ】無料で簡単にホームページが作れるサービス

【ホームページの作り方】画像で分かりやすく作り方を解説!初心者でも完全無料で作れるホームページ作成サービスをご紹介|無料サービスの落とし穴に要注意!|アイキャッチ画像

「専門知識が無い初心者だけど、ちょっとしたホームページを無料で簡単に作りたい」

そんな望みを叶えてくれる無料の「ホームページ作成サービス」についてまとめた記事を公開しています。

お金をかけずに見栄えの良いホームページを作成できるサービスを厳選してご紹介しているので、興味のある方は要チェック!

関連リンク初心者でも完全無料で作れるホームページ作成サービスをご紹介

 

本記事があなたの望みに適ったホームページ作りに何らかの貢献ができれば、嬉しく思います。
ガイド

-ホームページの作り方
-, ,

© 2021 初心者のためのホームページ作成ガイド