Life. Half of the rest ?

人生。残り半分以下?

【超図解】グローバルメニュー(ナビゲーションメニュー)の設置方法

f:id:otherhalf22:20191024142752j:plain

 

こんにちは、じんのんです。

 

「ムフフフフ!」

 

お気付きになられましたでしょうか?

えっ!分からない?

私のプロフィールアイコンに注目!

 

そうです、昨日、皆様のご協力のおかげで、無事にジンベエザメのじんのん君が、弊ブログのメインキャラクターとして誕生致しました~。

 

「パチ、パチ、パチ」

 

投票して頂きました皆様、改めてお礼申し上げます。

 

早速、Twitterのアイコンも変更したところ、各所から続々とお祝いの声が届いておりますよ~。

(と言っても、一件だけですけど) 

 

 

なおキャン🍀4兄弟育ててます (@Naocan15) | Twitter様、お褒めのお言葉、ありがとうございました。

また、投票箱を設置した際には、素敵な紹介文をツイートして下さり、本当にありがとうございました。

 

ということで、本日のメニューはこちら、

 

【注意】本記事は、デザインテーマ「CONTENTS」専用の設定方法です。

 

グローバルメニューの設置

グローバルメニュー(ナビゲーションメニュー)とは

はいはい、今日は気分が良いのでね~、どんどん行きますよ~。

 

更にお気付きになられたでしょうか?

そうです、弊ブログにようやくグローバルメニュー(ナビゲーションメニュー)が設置されました~。

 

「パチ、パチ、パチ」

 

グローバルメニュー(ナビゲーションメニュー)とは、画像の赤丸部のことです。

f:id:otherhalf22:20191024163810p:plain

 

メニューの中身は、 未だに思案中、暫定的に決めました。

暫定的とした理由については、こちらの記事をどうぞ。

 

otherhalf22.hatenablog.com

 

使用しているデザインテーマ

それでは、手順です。

と言いたい所ですが、デザインテーマの説明をしないと手順の説明が出来ません。

なので、おっちゃんが利用させて頂いているデザインテーマを先に紹介します。

 

弊ブログで使用しているデザインテーマはこちら、

blog.hatena.ne.jp

 

テーマストアでもかなりの人気があり、すでに8600以上のインストール実績があるようです。

おっちゃんの描いた海のキャラクターたちとの親和性も良く、おっちゃんはとても気に入っています。

 

テーマの確認方法

ちなみに、他のブロガーさんが使われているテーマが知りたいときは、画面左上のドロップダウンメニューをクリックし、「このブログのテーマを見る」で確認できます。

f:id:otherhalf22:20191024165854p:plain

 

 

 

グローバルメニュー(ナビゲーションメニュー)の設置手順

なんと!弊ブログで利用させて頂いているデザインテーマは、初めからグローバルメニュー(ナビゲーションメニュー)に対応していたようです。

あ~、無知って怖いですね~。

今まで悩んでいたのが、時間が無駄になりました。

人間、いくつになっても勉強あるのみです。

 

具体的な手順

(ア)下記をコピーする。

<div class="navi">
<ul>
<li><a href="リンクURL">表示名</a></li>
<li>
<a href="リンクURL">表示名</a>
</li>
<li>
<a href="リンクURL">表示名</a>
</li>
<li>
<a href="リンクURL">表示名</a>
</li>
<li>
<a href="リンクURL">表示名</a>
</li>
</ul>
</div>

 

コピーしたデータを、手順(ウ)で貼り付けた後、

  • 青文字部("リンクURL")にご自身の表示させたいURLを記述する。
  • 赤文字部(表示名)にリンクに関連した表示面を設定する。

 

参考までに、おっちゃんの設定を載せておきます。

<div class="navi">
<ul>
<li><a href=https://otherhalf22.hatenablog.com/>トップ</a></li>
<li>
<a href=https://otherhalf22.hatenablog.com/archive/category/Web%E9%96%A2%E9%80%A3>web関連</a>
</li>
<li>
<a href=https://otherhalf22.hatenablog.com/entry/2019/09/20/001000>サイトマップ</a>
</li>
<li>
<a href=https://otherhalf22.hatenablog.com/entry/privacy-policy>プライバシーポリシー</a>
</li>
<li>
<a href=https://otherhalf22.hatenablog.com/entry/Contact_Us>お問い合わせ</a>
</li>
</ul>
</div>

 

(イ)はてなブログダッシュボード内を表示し

           → ①デザインをクリック

           → ②スパナアイコンをクリック

           → ③ヘッダをクリック

(画像参照)

f:id:otherhalf22:20191024174917p:plain

 

ウ)データの貼り付け

        (ア)でコピーしたデータを画像赤線部に貼り付ける。

f:id:otherhalf22:20191024175641p:plain

 

 

(エ)リンク先URLと表示名を編集

    (ア)で参考に挙げた、おっちゃんの設定を参考にして編集してください。

各種設定が終わりましたら、必ず「変更を保存する」をクリックして保存して下さい。

 

💡ポイント

リンク先URLの取得方法は、ブラウザで該当するページを表示させ、アドレスバーをコピーするのが早いと思います。

画像赤丸部をコピーし、"リンクURL"に貼り付ける

f:id:otherhalf22:20191024184713p:plain

💡ポイント

グローバルメニュー(ナビゲーションメニュー)のそれぞれに、カテゴリーを入れたいときは、カテゴリー表記させたURLをコピーし貼り付けるといいですよ。

 

画像の①赤四角部で該当するカテゴリーをクリックするとカテゴリーURLになるので、②のアドレスバーをコピーし、"リンクURL"貼り付ける。

f:id:otherhalf22:20191024185831p:plain

 

ご自身のトップページにカテゴリーを表示していない場合は、ここでは説明しませんので、

はてなブログ サイドバー カテゴリー」

などで、検索してみてください。

 

もっと良い方法がありましたら、コメントにてお知らせをお願い致します。

 

サイトマップの作成

おっちゃんは、今回の グローバルメニュー(ナビゲーションメニュー)設置に伴い、サイトマップを手作りで作成しメニューに組み込みました。

 

これがおっちゃんの作ったサイトマップです。

otherhalf22.hatenablog.com

 

💡ポイント

サイトマップを公開する際は、過去の日付に設定して公開した方が良いです。

理由は、プライバシーポリシーやお問い合わせフォームと同じで、新着記事に突然それらが現れると、読者様がびっくりされるからです。

 

なのでおっちゃんは、投稿日をブログの第一記事の前日の日付にし、時間を下記の通り設定して投稿しました。

  • 0:00・・・プライバシーポリシー
  • 0:05・・・お問い合わせフォーム
  • 0:10・・・サイトマップ(手作りですよ~)

(ここまでの説明が必要かは分かりませんが、おっちゃんは神経質なのです)

 

【注意事項】

ブログの設定を変更する前に、必ずバックアップを取っておいて下さい!

具体的には、設定前のHTMLやCSSソースコードをすべてコピーして、テキストソフトなどに貼り付けし保存しておいて下さいね。

万が一の際には、設定前のソースコードを元の位置に貼り付けることで、復元できます。

 

参考にさせて頂いたサイト

JOE (id:dreamark)様、参考にさせて頂き、ありがとうございました。

www.dreamark.tokyo

 

以上、バックアップなどの事前準備を十分に行い、チャレンジしてみてください。

//更新日表示(手動)