simplicityのヘッダーにメニュー欄を表示させて項目を増やすには?

最初にsimplicityのテーマを使ってワードプレスのブログサイトを立ち上げたときは、

初期設定では、サイトのトップページのヘッダー部分には、

サイトのタイトルとその下にサブタイトルしか表示されていないはずです

(これは、ワードプレス共通だと思います)

赤枠のところにメニュー欄がありません

ホームページ風のサイトにするために固定ページ(フロントページ)の設定をすると

ヘッダーにメニュー欄が表示されるようになりますが、

初期設定のブログタイプのサイトでも

ヘッダーのメニュー欄を使いたい方もいらっしゃると思います

下の写真のような感じです

赤枠のところにメニュー欄が表示されるようになりました

今回の記事では、上の写真の赤枠のところにメニュー欄を表示して

サイトをさらに使いやすくする方法を説明します

ちなみに簡単に説明すると

ヘッダーとは、上部に表示されるカスタマイズ可能なスペース

フッターとは、下部に表示されるカスタマイズ可能なスペース

です。

では、サイトのヘッダーのメニュー欄を表示して

自分の好きなメニュー項目を表示してみましょう

※この記事を読む前に

すでにヘッダーにメニュー欄が表示されている場合は、第2章

simplicityのヘッダーのメニュー欄に項目を増やすには からお読みください!

また、メニューの項目を増やすことに関しては、ブログサイト、ホームページ風の

ウェブサイト共通のはずです

スポンサーリンク

simplicityのヘッダーにメニュー欄を表示させる方法

ワードプレスでホームページ風のウェブサイトを作らなくても

初期設定のブログサイトのヘッダーにメニュー欄を表示させる方法を説明していきます

ちなみにワードプレスのテーマはsimplicityを使用しています!

シンプルなのに高機能で大変使い勝手のよいテーマだと思います!

1、ワードプレスの管理画面を開きます

2、左のメニューの 外観 にマウスカーソルを合わせて

新しく表示される項目の メニュー をクリック

3、メニューの編集画面が表示されます

4、メニュー名 の右の空欄に

メニューとして表示したい文字を入力します

例えば、今回は、ホーム と入力してみます。

5、入力したら メニュー作成 をクリックします

6、メニュー設定 の ヘッダーナビ にチェックを入れます

7、メニューを保存 をクリックします

8、左のメニューにある カスタムリンク をクリックします

下の写真の赤枠の部分です

9、リンク文字列 に ホーム と入力してみます。

上の写真の青枠の部分です

URL には、この場合ホームなので、

自分のサイトのトップページのアドレスを入力してみます

上の写真の緑の枠の部分です

10、メニューに追加 をクリック

11、メニューを保存 をクリック

これで完了です。

自分のサイトを見てください。

サイトのヘッダーにメニュー欄が表示されるようになり、そこに

ホーム と表示されていると思います!

また、ホーム をクリックするとちゃんとトップページへ移動するはずです

simplicityのヘッダーのメニュー欄に項目を増やすには

では、次に、ヘッダーのメニュー欄に新しいメニュー項目を追加してみましょう

●まずは、自分のサイトの右側のサイドメニューに

すでに表示されているカテゴリーをヘッダーのメニューに追加する方法です

これは、とても簡単です

1、先ほどの画面

外観→メニュー をクリックして

表示されるメニューの編集画面

左のメニューの カテゴリー をクリック

2、すると現在、あなたのサイトで使われているカテゴリーが表示されます

その中で、ヘッダーのメニュー欄に追加したいものにチェックを入れます

上の写真の すべて表示 をクリックするとすべてのカテゴリーが表示されます

※もしワードプレスを始めたばかりの人で

カテゴリーが 未分類 しか無い場合は、実験的に 未分類 にチェックを入れて試して

みてもよいでしょう。もちろん後で削除できます

3、メニューに追加 をクリックします

4、メニューを保存 をクリックします

これでヘッダーのメニューに、先ほどの ホーム と 未分類 が並んで

表示されているはずです

また、どちらをクリックしても、ちゃんと正しいページに移動するはずです!

使わないメニュー項目を削除するには

前述のとおり、上の写真の 未分類 という項目を削除することも簡単にできます

これに関しては、下の章

4.ヘッダーメニューのいらない項目を削除する方法 で説明しています

●カテゴリー以外の項目をヘッダーのメニューに表示したい場合

1、上の手順1と同じやり方で メニューの編集画面 を開いて

左のメニューの カスタムリンク をクリック

2、カスタムリンクの

URL    → 移動させたい場所(ページ等)のアドレスを入力します

リンク文字列 → ヘッダーメニューに表示したい名前(項目)を入力します

※このとき、例えば、あなたのサイトの中のおすすめの記事をアピールするために

おすすめ と入力して、そのおすすめ記事のアドレスを URL に入力してもかまいませ

ん。一般的には、ヘッダーのメニューには、カテゴリーの項目を

表示させる人が多いと思います!

3、メニューに追加 をクリックします

4、メニューを保存 をクリックします

このやり方でヘッダーメニューに項目を増やしていくことができます

ヘッダーのメニューの項目の並び順を変更する方法

これも非常に簡単にできます!

例として

サイトのヘッダーメニューには

ホーム 未分類 おすすめ

の順番で並んで表示されているとします。

この順番を変えてみましょう

現在は、左端に ホーム が表示されていますが

ホーム と おすすめ の場所を入れ替えてみます

1、先ほどと同じように 外観→メニュー をクリックして 

メニューの編集画面を開きます

メニューの構造 の下に

現在、ヘッダーメニューに表示されている項目が表示されているはずです

その中で移動させたい項目(例の場合 おすすめ )を

ドラッグしながら(左クリックしながら)好きな場所へ移動させてみましょう

2、移動させ終わったら メニューを保存 をクリック

実際にサイトのヘッダーメニューを確認してみると

おすすめ という項目が一番左に移動しているはずです

このやり方で、好きな順番にメニューの項目を並び替えることができます。

ヘッダーメニューのいらない項目を削除する方法

ヘッダーメニューに項目を追加したが、間違ったので

その項目を削除したい場合

1、外観→メニューをクリックしてメニューの編集画面を開き

メニュー構造

削除したい 項目 のカテゴリーの右側のをクリックします

(下の写真を参照してください青枠をクリックします)

2、すると 削除 というのが出てきますので

削除 をクリック

(上の写真の赤枠をクリックします)

3、最後に忘れずに メニューを保存 をクリック

これでサイトのヘッダーのメニュ-から 今削除した項目が消えているはずです

また、このとき項目のカテゴリーの右側のをクリックすると

ナビゲーションラベル が表示されますので

ここに違う名前を入力すると

項目名を変更することができます

その際は、忘れずに最後に必ず メニューを保存 をクリックして変更内容を

反映させてください。

ヘッダーのメニューをプルダウンタイプにする方法

プルダウン式のメニューとは、簡単に説明すると

ひとつのメニュー項目にマウスカーソルを合わせると複数の項目が表示される方式です

以下のようなメニューです

↑ 上の場合、おすすめ にマウスカーソルを合わせると

新たにメニューが増えます

少しメニュー項目が多くなってきたなどの理由で、

項目をまとめたいと思う場合があります。

そんなときは、プルダウンメニューにすると大変便利です!

では、実際に下のようなメニュー欄をプルダウン式にしてすっきりさせてみましょう!

   

上記のようなプルダウンメニューにする方法も非常に簡単です。

1、外観→メニューをクリックして 先ほどのメニューの編集画面を開きます

メニュー構造には、

現在ヘッダーのメニュー欄に表示されている項目が表示されていますが

その中で、下の階層に移動させたい項目を選び

その項目をドラッグして(左クリックしながら)

好きな場所へ移動するだけです(今回は右へ移動させます)

このとき移動させる項目は、左端をピッタリあわせないで、

少し右にずらします

すると移動した項目に 副項目 と表示されます

以下のようにドラッグして項目を移動させます

□おすすめ
 □デジカメについて  副項目
 □スポーツ      副項目
 □文房具       副項目

写真で説明すると以下のようになります

以上のように配置したら

2、メニューを保存 をクリック

これで、上の例のように

サイトのヘッダーメニューの おすすめ にマウスカーソルを合わせると

下に デジカメについて スポーツ 文房具 という項目が表示されるようになります!

これでプルダウンメニューになりました。

ちなみに以下のように並べると

□おすすめ
 □デジカメについて    副項目
  □スポーツ       副項目
   □文房具       副項目

おすすめ にマウスカーソルを合わせたときに、

下にではなく、右横にメニューが開いていくようになります。

おすすめ にマウスカーソルを合わせると デジカメについて が開き(下に開く)

デジカメについて にマウスカーソルを合わせると スポーツ が開き(右横に開く)

スポーツ にマウスカーソルを合わせると 文房具 が開くようになります(右横に開く)

メニューを元に戻したい場合も項目をドラッグして元の位置に戻すだけです

最後に忘れずに メニューを保存 をクリックします

色々な使い道があるので利用すると便利だと思います!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする