外観(テーマ)の【メニュー】の設定方法です。
メニューとは?
メニューは、サイト(ブログ)にどんなコンテンツがあるのかを示すお品書きです。メニューを適切に配置することで、アクセスしやすいサイト(ブログ)になります。
↓これは、パソコン(タブレット)用ヘッダーメニュー>メインメニュー、グローバルメニューとも言います。
↓スマホでよく見るメニュー>スライドメニュー、ハンバーガーメニューと言います。
テーマによってメニューの種類が変わる
メニューの種類は、有効化しているテーマに寄ります。
Twenty Nineteenで設定できるメニュー
デフォルトテーマ「Twenty Nineteen」は、「メイン」「フッターメニュー」「ソーシャルリンクメニュー」の3つが設定できます。
WING(Affinger5)で設定できるメニュー
有料テーマ
【WING(AFFINGER5)】
は、「ヘッダー用メニュー」「フッター用メニュー」「サイド用メニュー」「ガイドマップメニュー」「ガイドマップメニュー2」「スマートフォン用スライドメニュー」「スマートフォン用ミドルメニュー」「スマートフォンフッター用メニュー」の8つを設定できます。>すべて使う必要は無し。
【メニューの位置】とあるように、メニューによって外観(テーマ)の表示される場所が違います。
最初から複数のメニューが用意されているテーマもあるし、デフォルトテーマ「Twenty Nineteen」のように3つだけのテーマもあります。
メニュー新規作成の流れ
【外観】⇒【メニュー】を開きます。↓まだ何も設定されてない画面。
パソコン用メインメニューの作成
製作中のサイトをサンプルに作成の流れを書きます。メニュー設定画面は、
【WING(AFFINGER5)】
です。テーマによってメニューの種類(メニューの位置の数)が違います。
↓パソコン(タブレット)用ヘッダーメニューを作ります。
①メニュー名を入力して、②【メニュー名を作成】をクリック!
③メニューの位置(テーマによって種類が違う)を選択し、④【メニューを保存】をクリック!
「ヘッダーメニュー」という名のメニューを、「ヘッダー用メニュー」の位置に配置でメニューが設定されました。まだ、この段階では表示されるコンテンツを選択していないので、外観にも表示されません。
「ヘッダーメニュー」が出来たので、左側の【メニュー項目を追加】が選択できるようになりました。
⑤カスタムリンクの【▼】をクリックして開きます。
⑥そのサイト(ブログ)のURLをコピペ。
⑦「ホーム」と入力
⑧【メニューに追加】をクリック!
ヘッダーメニューに追加された!
続けて、⑨カテゴリーの【▼】をクリックし開く。
⑩作ったカテゴリーにチェックをいれる。>他にもカテゴリーを作ってるならチェックを。
⑪メニューに追加
選択したカテゴリーも「ヘッダーメニュー」に追加されたら、⑫最後に【メニューを保存】をクリック!
ヘッダーメニューが更新された。
さぁ!表の画面(外観)はどうなった?外観を確認すると、↓ヘッダーメニューができました!\(^o^)/
続けて、「スマホ用スライドメニュー」を作ります。【新しいメニューを作成しましょう】をクリックすると、メニューの新規作成画面になります。
スマホ用スライドメニューの作成
メニューの作り方は、パソコン用でもスマホ用でも同じです。【メニューの位置】によって、表示する位置が選択できます。
【新しいメニューを作成しましょう】をクリックして、新規のメニュー作成画面にし、上記と同じ用に、①「メニュー名」を入力し、②「メニューの位置」を選択し、③【メニューの保存】をクリック!
④メニュー項目を追加し、⑤【メニューを保存】で、スマホ用スライドメニューも出来た!
外観をスマホサイズにして確認してみると、↓左上にスライドメニューが出てきたら完了です。
テーマに付属している「メニューの位置」の分だけ、新規メニューとして作成していくことが出来ます。
ブログの始めの頃は、カテゴリー数も無いでしょうから、最低限のメニューだけで良いです。
メニュー編集の流れ
カテゴリーを増やしたり、特定のページをメニューに追加したい時や削除したい時、メニューの編集が出来ます。
①編集したいメニューを選んで、②【選択】をクリック!
そのメニューの編集画面になります。「メニュー名」を確認して、メニュー項目を追加したり、削除したら、③【メニューを保存】を忘れずにクリック!