備忘録_20 / Cocoon_03
ヘッダーメニュー、またグローバルメニューと言われることもありますが、その作成方法です。
[図_1] 赤枠の部分
ブログ初日よりはかなり見栄えの良くなってきた私のブログのスクリーンショットです。
この様にメニューが欲しいです！！
■ ヘッダーメニューとは何か？
● 一般的にヘッダーメニューが必要な理由【模範解答例】
どこの企業のwebサイトでもページのトップにはメニューが付いています。その理由は１ページの中に全ての企業情報を書き切れないからです。複数ページに分けて書かれてあります。また、ページを閲覧にやって来たユーザーも全ての情報を必要としているとは限りません。「会社所在地だけを知りたい」「新商品について知りたい」など部分的な情報を必要としている場合もあります。
HTMLはその設計理念からして項目ごとにページを分けて使う事を想定しています。基本的にウェブサイトは入り口となるトップページが存在します。サイトを訪れたユーザーはそこから各々知りたい情報の書かれたページへ散らばって行くわけです。
ヘッダーメニューはサイト全体の目次であり、ユーザーがサイト内で迷子になった時の非常口でもあります。また、ユーザーの利用頻度が高いため、webサイトの個性を表現する一つの見せ場でもあり、凝った演出を入れるなどメニュー作りに力を入れるサイトが多いのも特徴です。
● 個人的にヘッダーメニューが欲しい理由【悪い解答例】
私が自身のサイトに、何故この様なヘッダーメニューが欲しいかと言いますと、それなりの理由があります。
- みんな付けているし、あったら見栄えが良くてカッコイイ！
- もしかしたら、サイト内の別の投稿記事を読んでくれる人がいるかもしれない。
- とりま無いよりあった方が箔が付くじゃん？
■ ヘッダーメニューの作り方
1⃣ メニュー名を入力する
[図_2]
WordPress管理メニューより、
[外観] → [メニュー]と開きます。
メニュー名を入力して、
[メニューを作成] をクリッ…？？
しくじった…、
メニュー名を考えていなかった！
昨日のうちに考えておけば良かった。見える部分でなし、ここは無難に＂ヘッダーメニュー＂でいいか…。
・もう一度説明します。メニュー名に＂ヘッダーメニュー＂と入力して [メニューを作成] をクリックします。
【ひとりごと】
このサイトは開設からまだ１カ月にも満たない新米ブログサイトです。投稿記事も今回が記念すべき通算２０本目となりました。開設初日の仮想サーバーの立ち上げより始め、その一つ一つの手順について順を追ってブログの投稿記事にしております。勿論、立ち上がり次第他の記事も書く予定ッスよ！
「一般的にヘッダーメニューが必要な理由」で述べられているように、膨大な投稿記事を見やすく整理するためにヘッダーメニューが必要になります。ですが、実はまだメニューを使うほどの情報量が無い、…悲しい現実です。
でも、僕も、私も、同じ同じ！始めたばかりという方も多いのではないでしょうか？
既に大量のブログ記事を投稿しました。改めて考えてみたらメニューが必要だと気が付いた！…と、言う方も中にはおられると思いますが、今から遡って全ての記事を整理することは大変ですよ。千里の道も一歩から、少ないうちからマメに記事を整理して、一緒にちまちまとサイトをグレードアップしていきましょう！
と、その前に、このページはわいひら先生書かれたマニュアルを参考にしております。（モロパクリ疑惑再燃）
グローバルナビのメニューを設定する方法 | Cocoon
2⃣ メニュー項目を作成する
[図_2]
・ ①：[固定ページ] より順番に、
→ ②：[すべて表示]
→ ③：[☑ホーム]に✔を付けます。
最後に④：[メニューに追加] をクリックします。
[表_1]
①～④を順番に進めると[メニュー構造]と書かれた右側カラムの下、
⑤の場所に[ホーム]という新たな項目が追加されます。
これが一つ目のメニューです。
そんなこと聞いてないぞ！と言う方は、この回も併せてご覧ください。
3⃣ メニュー項目を構成する
[図_3]
・ ①：[カテゴリー] より順番に、
→ ②：[すべて表示]
→ ③：[☑メインカテゴリー2]
[☑メインカテゴリー3]
[☑メインカテゴリー4]
[☑備忘録]
４つの項目に✔を付けます。
最後に④：[メニューに追加] をクリックします。
・ ⑤の場所に先ほどの、ホームと合わせて以下の５つのメニューが作成されました。
- 「ホーム カスタムリンク▼」
- 「備忘録 カテゴリー▼」
- 「メインカテゴリー2 カテゴリー▼」
- 「メインカテゴリー3 カテゴリー▼」
- 「メインカテゴリー4 カテゴリー▼」
[表_2]
↑
｜また、これらの項目はマウスで
｜ドラッグして順番を入れ替える
｜事が可能です。現在の主力
｜備忘録を上に持ってきました。
↓
4⃣ メニュー設定と編集の保存
[図_4]
メニュー設定の
①：[☑ヘッダーメニュー]
に✔を付けます。
②： [メニューを保存]
をクリックします。
ここまで来たら、あともう少しです。
5⃣ メニューの表示位置を決める
[図_5]
①：[位置を管理]
に✔を付けます。
②：[ヘッダーメニュー]
を選択します。
③： [変更を保存]
をクリックします。
■ ヘッダーメニューの完成
ヘッダーメニューが完成しました。こちらが現在のサイトの画面です。どうでしょうか？
気が付いたことをもう一点、私の「最近の投稿」を見ていて思った事ですが、備忘録しか投稿してませんね…。もう、ブログの主力コンテンツが備忘録になってしまっております。もういっそこの際、ブログサイトのタイトルを「私の備忘録（仮）」にしてしまいました。
投稿が見つかりませんでした。
[表_3]
[表_3]
今回、メニューに使ったダミーカテゴリーの「メインカテゴリー2」をクリックしますとエラーメッセージが表示されます。
もともとデーターが未入力ですので当然見つかりません。
以上のような手順でメニュー項目はいつでも増やせますし、取りあえず設定したい項目が決まるまで「ダミーメニュー」は表示させなくても良いかもしれません。
今回は以上です。
| 2020/11/12 |
| 2021/03/18 |
| 2021/10/20 |
EyeCatch画像：Prasad Ganapule,StockSnap/Pixabay