本日もブログを見てくださり、ありがとうございます!
今回は、【初心者でも簡単】サイトのトップページの設定方法を簡単に解説☆というテーマについてお話していきたいと思います♪
そんなブログ初心者さんでも簡単に設定できるように、図説でわかりやすく解説していきます☆
トップページのメニューを設定することで、読者が見やすくて使いやすいサイトにすることができます
トップページのメニュー関連を設定する方法をご紹介します♪
この記事では、サイトの初心者さんでもわかりやすく解説しますので、ぜひ一緒に設定していきましょう!
グローバルナビゲーションの設定
まずは、グローバルナビゲーションというものを設定していきます。
グローバルナビゲーションとは、私のブログで言うと、こちらの赤線の部分です。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-3-23.png)
トップページに常に表示されているメニューのようなものです。
ブログサイトの主要なコンテンツへのリンクがまとめられているので、見に来てくれた読者が、「ホームページの全体像」を簡単に把握することができます☆
また、グローバルナビゲーションはいつでも表示されていますので、途中で違う記事を読みたいと思った時にも、記事の移動がしやすくなります。
では、さっそく設定していきましょう☆
ナビゲーションの順番を変更する方法
まずは「外観」→「メニュー」をクリックします。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-4-20.png)
メニューが初期設定のままだと、赤枠のメニュー名が「グローバルナビゲーション」という言葉が入っているかと思います。こちらのメニューを自分でカスタマイズすることで、自分だけのグローバルナビゲーションを作成することができます♪
上から順に、
- ホーム
- プロフィール
- サービス
- 口コミ
- ランキング
- お問い合わせ
という順番になっているかと思います。
左上にあるホームボタンを押して、一度サイトのトップ画面を見てみましょう☆
このように、ホーム〜お問い合わせまで、左から順番に設定されていますね◎
先ほどのメニュー画面に戻りましょう◎
グローバルメニューの項目を、ドラッグ&ドロップで順番を入れ替えることも可能です。
試しに、このように「ホーム」と「プロフィール」の順番を入れ替えてみましょう。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-3-24.png)
変更した場合は必ず、右下の青いボタン「メニューを保存」をクリックしましょう。
左上のホームボタンから、サイトのトップページを確認してみましょう☆このように、トップページのグローバルナビゲーションも、順番が変わりましたね♪
ナビゲーションの副項目を作る方法
次に、「サービス」という項目の中に、「クチコミ」を入れてみましょう。
「クチコミ」を長押ししたまま、右側にスライドさせます。
こうすることで、副項目として「サービス」の下に設定することができます。
右下の青いボタンの、「メニューを保存」を押しましょう!
左上のホームボタンを押して、サイトのトップページを見てみましょう☆
このように、サービスの中にクチコミが入りました◎
ナビゲーションの名前を変える方法
メニュー画面に戻りましょう。
メニュー項目の横の、逆三角形ボタンをクリックして、「ナビゲーションラベル」を変更することができます☆
![](https://ai-0304.com/wp-content/uploads/2023/07/これ.png)
- 「ホーム」→「トップページ」に変更
- 「プロフィール」と「お問い合わせ」はそのまま使用
- 「サービス」→「コンセプト」に変更
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-12-4.png)
赤丸の削除ボタンから、削除することができます◎
変更したものを保存するために、右下の「メニューを保存」を忘れずに押しましょう☆
リンク先のURLを設定する
グローバルナビゲーションの、中身を見ていきましょう☆
このURLが、トップページのグローバルナビゲーションをクリックした時に飛ぶリンク先のURLになります。
![](https://ai-0304.com/wp-content/uploads/2023/07/使う.png)
トップページでクリックした時に、違うページに飛ばしたい場合は、リンク先のURLをここに貼り付けましょう。
メニュー設定の、「グローバルナビゲーション」にチェックを入れて完了です☆
これで、トップページのグローバルナビゲーションの設定をすることができました♪
ピックアップコンテンツの設定
次に、ピックアップコンテンツの作成をしていきます☆
ピックアップコンテンツとは、私のブログで言うと、この赤枠の部分です。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-3-25.png)
読者に読んでもらいたい記事を、トップページに常に表示させることができるのが、ピックアップコンテンツです◎
先ほどと同じように、「外観」→「メニュー」をクリックします。
「新しいメニューを作成しましょう」をクリックしましょう☆
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-4-22.png)
メニュー名に「ピックアップ」と入力します。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-15-5.png)
次に、「メニュー設定」から、追加したい場所にチェックを入れます◎私は「スマホのスライドメニュー」と「トップページのピックアップコンテンツ」の2つにチェックを入れています。
右下の青いボタンの「メニューを作成」を押しましょう!
表示させたい記事を追加する
次に、ピックアップコンテンツとして表示させたい記事を、入れ込んでいきましょう☆
入れ方は、「メニュー項目を追加」から、入れ込みたいものにチェックを入れて「メニューに追加」を押しましょう。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-8-11.png)
私のブログでは、
- プロフィール
- コンセプト
- 1年間の活動計画
- お問い合わせページ
この4つをピックアップコンテンツとして表示しています☆
チェックを入れた記事が、右側に反映します
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-11-10.png)
ドラッグ&ドロップで順番を入れ替えることもできますので、お好きな順番に並び替えてみてください。
最後に必ず「メニューを保存」を押しましょう!
これで、ピックアップコンテンツの作成が完了しました
サイドバーの設定
次に、トップページのサイドバーを設定していきましょう☆
サイドバーとは、私のブログで言うと、こちらの部分です。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-12-6.png)
カテゴリーや人気記事ランキングを表示させることで、読者に色々な記事をおすすめすることができます◎
さっそく設定していきましょう!
一度シンプルなサイドバーにする
現在、サイドバーがごちゃごちゃしているかと思いますので、一度シンプルなサイドバーにしていきましょう☆
「外観」→「ウィジェット」をクリックします。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-3-26.png)
赤枠の「ブロック」というものが入っているかと思いますが、こちらは必要のないものなので3つとも削除していきます。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-14-6.png)
赤丸で囲ってある逆三角形を押すと、
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-5-19.png)
削除ボタンが出てくるので、こちらから削除していきましょう◎
「サイドバー追尾」にも「ブロック」があるので、こちらも削除していきましょう。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-4-23.png)
ブロックを削除したことにより、一度シンプルなサイドバーにすることができました♪
新しいサイドバーを設定する
次に、新しくサイドバーを作っていきましょう◎
サイドバーに追加したい項目を「利用できるウィジェット」の右側の中から選択しましょう。
私が設定しているもの
- カテゴリー
- 人気ランキング
- おすすめ記事
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-7-14.png)
まず、「カテゴリー」の逆三角形ボタンをクリックします。
「サイドバー」→「ウィジェットを追加」をクリックしましょう☆
サイドバーに「カテゴリー」が追加されました。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-11-11.png)
こちらのタイトルにも「カテゴリー」と入力して、「ドロップダウンで表示」にチェックを入れて「保存」をクリックします。
「人気ランキング」・「おすすめ記事」も、同様に追加しましょう☆
左上のホームボタンから、トップページを確認してみましょう。
![](https://ai-0304.com/wp-content/uploads/2023/07/記事中の画像-13-6.png)
このように、サイドバーを追加することができていると思います◎
このように、ウィジェットを設定することで、ブログサイトのサイドバーを簡単にカスタマイズすることができます☆
まとめ
いかがでしたでしょうか?
今回設定した3つのメニュー
- グローバルメニュー
- ピックアップコンテンツ
- サイドバー
このように、トップページのメニューを設定することによって、読者がより使いやすいサイトにすることができました♪
次回は、サイト全体のデザインを設定する方法をご紹介しますので、ぜひブログを覗きに来てくださいね!