ホームページの作り方

【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で作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|メニューを編集する:するとホームページのトップページが表示されるので、ページの一番下までスクロールしてフッターを見てみましょう。 先ほど作成したフッターメニューが表示されていることが確認できるはずです。

するとホームページのトップページが表示されるので、ページの一番下までスクロールしてフッターを見てみましょう。

先ほど作成したフッターメニューが表示されていることが確認できるはずです。

 

なお新たなメニューを表示させたい場合は、新たに固定ページなどのリンク先ページを作成して同様の手順でメニュー項目を追加すればOKです。

適宜必要なページを作成して、フッターメニューを充実させましょう。

 

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

>>目次へ戻る

メニュー項目を削除する

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

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

 

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

>>目次へ戻る

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

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

 

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

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

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

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

 

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

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

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

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

 

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

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

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|メニューを編集する:フッターメニュー中央に移動したのが確認できます。

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

 

これでフッターメニューの編集はひと通り完了です。
ガイド

 

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

>>目次へ戻る

「WordPress」フッター編集方法|フッターの背景色を変更する

ここではホームページのフッターの背景色と文字色を変更する方法について、解説していきます。

 

背景色を指定する

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

まずはWordPress管理画面左側にある「Cocoon設定」をクリックしましょう。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:続いて「Cocoon設定」ページ上部に多数表示されているタブの中から「フッター」をクリックしましょう。

続いて「Cocoon設定」ページ上部に多数表示されているタブの中から「フッター」をクリックしましょう。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:管理画面上に「フッター設定」ページが表示されたら、「フッター色」項目にある「フッター背景色」の「色を選択」と書かれた部分をクリックしましょう。

管理画面上に「フッター設定」ページが表示されたら、「フッター色」項目にある「フッター背景色」の「色を選択」と書かれた部分をクリックしましょう。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:すると色を指定できるメニューが新たに表示されるので、適宜色を指定しましょう。 「色を選択」ボタンの右にあるフォームに直接好ましいカラーコードを入力してもOKですし、複数の色が表示されているパレットから選択してもOKです。

すると色を指定できるメニューが新たに表示されるので、適宜色を指定しましょう。

「色を選択」ボタンの右にあるフォームに直接好ましいカラーコードを入力してもOKですし、複数の色が表示されているパレットから選択してもOKです。

 

色を探す

望ましいカラーを探したい場合は、下記のサイトが参考になります。

>>配色の見本帳

>>日本の伝統色

>>NIPPON COLORS

>>Color Hunt

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:例えば「配色の見本帳」の場合、表示されている色の下に表示されている「#E60012」というのがカラーコードです。 このカラーコードを「フッター背景色」の「色を選択」ボタン右にあるフォームに直接入力すると色が反映されます。

例えば「配色の見本帳」の場合、表示されている色の下に表示されている「#E60012」というのがカラーコードです。

このカラーコードを「フッター背景色」の「色を選択」ボタン右にあるフォームに直接入力すると色が反映されます。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:色を指定したら「変更をまとめて保存」をクリックしましょう。

色を指定したら「変更をまとめて保存」をクリックしましょう。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターの背景色を変更する:するとプレビュー画面にカラーが反映されます。 このカラーを確認しながら、望ましい色合いに調整しましょう。

するとプレビュー画面にカラーが反映されます。

このカラーを確認しながら、望ましい色合いに調整しましょう。

なおフッターの文字色は「フッター文字色」項目を同じように調整することで変更することができます。

 

>>目次へ戻る

「WordPress」フッター編集方法|フッターのデザインを変更する

ここではホームページのフッターの表示形式を変更する方法について、解説していきます。

 

フッター表示タイプを変更する

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

まずはフッターの背景色を変更したとき同様に「Cocoon設定」から「フッター設定」を表示させましょう。

「フッター設定」の「フッター表示タイプ」という項目にある選択肢から、望ましい表示形式を選びましょう。

 

フッター表示タイプのデザイン

それぞれの「フッター表示タイプ」のデザインは、下記の通りです。

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターのデザインを変更する:「ロゴ&メニュー&クレジット」※クリックで拡大表示※

「ロゴ&メニュー&クレジット」

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターのデザインを変更する:「メニュー&クレジット(左右)」※クリックで拡大表示※

「メニュー&クレジット(左右)」

 

【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する|フッターのデザインを変更する:「メニュー&クレジット(中央揃え)」※クリックで拡大表示※

「メニュー&クレジット(中央揃え)」

 

以上の表示形式から望ましいものを指定したら「変更をまとめて保存」をクリックして、変更を確定させましょう。

これでフッターのデザイン変更は完了です。

>>目次へ戻る

「WordPress」フッター編集方法|サイトクレジットを編集する

ここではホームページのフッターに表示するクレジット表記を編集する方法について、解説していきます。

 

クレジット表記を指定する

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

まずはフッターの背景色を変更したとき同様に「Cocoon設定」から「フッター設定」を表示させましょう。

「フッター設定」の「クレジット表記」という項目を操作することで、望ましい表示形式に仕上げます。

 

適宜項目を選択・入力したら「変更をまとめて保存」をクリックして、変更内容を確定させましょう。

これでサイトクレジットの編集は完了です。

>>目次へ戻る

「WordPress」フッター編集方法|まとめ

「【WordPress:ホームページのフッター編集】WordPressで作成したサイトのフッターを編集する方法|メニューを配置して導線を確保する」と題して、「WordPress」で作成したホームページのフッターメニューや背景色、デザインなどを変更する方法について、詳しく解説してきました。

 

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

フッターは、ヘッダー同様、ホームページに来訪するユーザーの道標になる重要な要素です。

フッターをしっかりと整備することで、ホームページ内にある情報を求めてユーザーが移動する回遊性を高めることに繋がり、ひいてはGoogleのサイト評価を高めることにも繋がります。

ホームページ管理者にとっても、来訪してくれるユーザーにとっても大きな意味のあるフッターは、早いうちに万全に整えておいて損はないでしょう。

 

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

 

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

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

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

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

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

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

 

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

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

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