【外観】⇒【メニュー】設定の流れ

投稿日:

外観(テーマ)の【メニュー】の設定方法です。

メニューとは?

メニューは、サイト(ブログ)にどんなコンテンツがあるのかを示すお品書きです。メニューを適切に配置することで、アクセスしやすいサイト(ブログ)になります。

↓これは、パソコン(タブレット)用ヘッダーメニュー>メインメニュー、グローバルメニューとも言います。

↓スマホでよく見るメニュー>スライドメニュー、ハンバーガーメニューと言います。

テーマによってメニューの種類が変わる

メニューの種類は、有効化しているテーマに寄ります。

Twenty Nineteenで設定できるメニュー

デフォルトテーマ「Twenty Nineteen」は、「メイン」「フッターメニュー」「ソーシャルリンクメニュー」の3つが設定できます。

WING(Affinger5)で設定できるメニュー

有料テーマ 【WING(AFFINGER5)】 は、「ヘッダー用メニュー」「フッター用メニュー」「サイド用メニュー」「ガイドマップメニュー」「ガイドマップメニュー2」「スマートフォン用スライドメニュー」「スマートフォン用ミドルメニュー」「スマートフォンフッター用メニュー」の8つを設定できます。>すべて使う必要は無し。

【メニューの位置】とあるように、メニューによって外観(テーマ)の表示される場所が違います。

最初から複数のメニューが用意されているテーマもあるし、デフォルトテーマ「Twenty Nineteen」のように3つだけのテーマもあります。

メニュー新規作成の流れ

【外観】⇒【メニュー】を開きます。↓まだ何も設定されてない画面。

パソコン用メインメニューの作成

製作中のサイトをサンプルに作成の流れを書きます。メニュー設定画面は、 【WING(AFFINGER5)】 です。テーマによってメニューの種類(メニューの位置の数)が違います。

↓パソコン(タブレット)用ヘッダーメニューを作ります。

①メニュー名を入力して、②【メニュー名を作成】をクリック!

③メニューの位置(テーマによって種類が違う)を選択し、④【メニューを保存】をクリック!

「ヘッダーメニュー」という名のメニューを、「ヘッダー用メニュー」の位置に配置でメニューが設定されました。まだ、この段階では表示されるコンテンツを選択していないので、外観にも表示されません。

「ヘッダーメニュー」が出来たので、左側の【メニュー項目を追加】が選択できるようになりました。

⑤カスタムリンクの【▼】をクリックして開きます。
⑥そのサイト(ブログ)のURLをコピペ。
⑦「ホーム」と入力
⑧【メニューに追加】をクリック!

ヘッダーメニューに追加された!

続けて、⑨カテゴリーの【▼】をクリックし開く。
⑩作ったカテゴリーにチェックをいれる。>他にもカテゴリーを作ってるならチェックを。
⑪メニューに追加

選択したカテゴリーも「ヘッダーメニュー」に追加されたら、⑫最後に【メニューを保存】をクリック!

ヘッダーメニューが更新された。

さぁ!表の画面(外観)はどうなった?外観を確認すると、↓ヘッダーメニューができました!\(^o^)/

続けて、「スマホ用スライドメニュー」を作ります。【新しいメニューを作成しましょう】をクリックすると、メニューの新規作成画面になります。

スマホ用スライドメニューの作成

メニューの作り方は、パソコン用でもスマホ用でも同じです。【メニューの位置】によって、表示する位置が選択できます。

【新しいメニューを作成しましょう】をクリックして、新規のメニュー作成画面にし、上記と同じ用に、①「メニュー名」を入力し、②「メニューの位置」を選択し、③【メニューの保存】をクリック!

④メニュー項目を追加し、⑤【メニューを保存】で、スマホ用スライドメニューも出来た!

外観をスマホサイズにして確認してみると、↓左上にスライドメニューが出てきたら完了です。

テーマに付属している「メニューの位置」の分だけ、新規メニューとして作成していくことが出来ます。

ブログの始めの頃は、カテゴリー数も無いでしょうから、最低限のメニューだけで良いです。

メニュー編集の流れ

カテゴリーを増やしたり、特定のページをメニューに追加したい時や削除したい時、メニューの編集が出来ます。

①編集したいメニューを選んで、②【選択】をクリック!

そのメニューの編集画面になります。「メニュー名」を確認して、メニュー項目を追加したり、削除したら、③【メニューを保存】を忘れずにクリック!

サンプルで使った有料テーマ【Affinger5】はマジ最高!なんですよ。

-ワードプレス, テーマ
-

\ スポンサーリンク /

人気エントリー

タグ

Copyright© ちょこヘル! , 2019 All Rights Reserved.