カレー記念日

陸マイラー1年生。カレーとマイルで1UPな明日を目指す奮闘記。

【はてなブログ】グローバルメニューの設置方法を素人が0から解説してみた

グローバルメニューの設定方法をカスタマイズ初心者目線で解説します。

 

素人のわたしは普通の人では考えられない初歩的なところで失敗しています。そんな素人目線の記事を読めば、きっと誰でもグローバルメニューを設置できるようになります。責任は持ちません。

 

目次

 

グローバルメニューの設定方法

f:id:currymiler:20170920225629j:plain

グローバルメニューを設置するためには大きく4つの関門があります。わたしが壁にぶつかったのは最後の関門「グローバルメニューのコードをいじる」でした。

 

第一関門 記事のカテゴリーを作る

はてなブログの記事作成画面で、下の赤枠をクリックしてカテゴリーを作ります。

f:id:currymiler:20170920193120p:plain

 

ここでは例として、「マイル」というカテゴリーを作りました。

f:id:currymiler:20170921101614p:plain

 

記事を作成して、自分のブログを開きます。

すると、下の赤枠のようにさきほど作ったカテゴリー名が表示されます。これをクリックします。

f:id:currymiler:20170920193602p:plain

 

すると、ご覧のように「マイル」カテゴリー記事が一覧で表示されます。

f:id:currymiler:20170920193918p:plain

 

ここで、赤枠のURL「http://www.curry-miler.com/archive/category/マイル」をコピーしておいてください。次のステップでとても重要なポイントになります。 わたしはこれに気付くまでに約60日間かかっています(苦笑)

 

これで下準備ができました。

次からいよいよグローバルメニューの作成です。

 

第二関門 グローバルメニューのコードはどうするの?

「グローバルメニュー 設置」で調べると、偉人ブロガーのたくさんの記事が見つかります。

 

繰り返しますが、わたしはド素人です。よって、ここで語れることは一つだけ。好きなグローバルメニューのデザインのコードの記事を見つけて素直にコピーしておきましょう。

 

わたしはこちらの方々の記事を参考にさせて頂きました。 

 

パソコン画面のグローバルメニュー

 

スマホ画面のグローバルメニュー

 

第三関門 グローバルメニューのコードはどこに貼り付ける?

グローバルメニューのコードは手にいれた。

じゃあ、コピーしたコードをどこに貼り付けるのか?

 

まずはパソコン編から。

 

結論から伝えると、「設定画面のヘッダのタイトル下」に貼り付けます。実際にスクリーンショットで確認します。

 

はてなブログのメニュー画面から「設定」をクリックする。

f:id:currymiler:20170920172411p:plain

 

下のレンチマークをクリックする。

f:id:currymiler:20170920172500p:plain

 

「ヘッダ」をクリックする。

f:id:currymiler:20170920172430p:plain

 

グローバルメニューのコードをタイトル下の緑色枠に貼り付けます。

f:id:currymiler:20170920172724p:plain

 

次はスマホの場合

 

スマホもパソコン同様に「設定画面のヘッダのタイトル下」に貼り付けます。

実際のスクリーンショットで確認していきます。

 

はてなブログの設定→スマホマークをクリックします。

f:id:currymiler:20170920203742p:plain

 

「ヘッダ」をクリックします。

f:id:currymiler:20170920203749p:plain

 

タイトル下の緑の枠内にグローバルメニューのコードを貼り付けます。

f:id:currymiler:20170920204233p:plain

  

これで、パソコンとスマホの設定画面へグローバルメニューのコードの貼り付けができました。

 

ちなみに、わたしはこれでグローバルメニュー完成だと思ってました。

嘘でしょと思うかもしれませんが、素人の思考はこんなもんです。しかし、もちろんこれで完成ではありません。

 

実際にブログ表示を確認してみると、グローバルメニューが表示されており完成のように見えますが、

 

f:id:currymiler:20170920213248p:plain

 

「マイル」カテゴリーをクリックしてみると、

 

f:id:currymiler:20170920213334p:plain

ご覧のように「Not found」と該当ページとリンク付されません。

 

 

いったいどうして?

 

ここから先が全く分からず、ずーーーっと悩んでました。実はコードを少しいじる必要があるんです。それが、次に紹介する最後の関門です。

 

最後の関門 グローバルメニューのコードをいじる

 

まず、貼り付けたコードから以下のような部分を探します。

 

f:id:currymiler:20170920200600p:plain

 

ここで、赤のURLには「①記事にカテゴリーを作ろう」でコピーした

http://www.curry-miler.com/archive/category/マイル」を貼り付けます。

 

そして緑色の枠内には作成したいカテゴリー名を書きます。

 

実際にやってみると、こんな感じです。

 

f:id:currymiler:20170920200742p:plain

 

URLが「http://www.curry-miler.com/archive/category/マイル」が以下のように変わっていますが、気にしなくて大丈夫です。

 

http://www.curry-miler.com/archive/category/%E3%83%9E%E3%82%A4%E3%83%AB

 

ここまでが一連の流れです。

これをすることで、初めて各カテゴリーから該当ページへリンク付されるようになります。

 

もしその他にもカテゴリーを作りたければ、同じことを繰り返せば大丈夫です。

 

完成!素人でもグローバルメニューを設置できました。

実際の画面で「マイル」をクリックすると、

f:id:currymiler:20170920203011p:plain

 

 

下の画面のようにカテゴリー分けした記事にちゃんと飛ぶようになります!

 

f:id:currymiler:20170920203125p:plain

 

グローバルメニューの達人気取りで書いてますが、最後の関門「コードをいじる」に気づくまでに延べ60日間かかっています(笑)

 

今回の記事が同じように悩んでいる方の参考になれば幸いです。

 

グローバルメニューの文字、色、サイズを変更することもできますが、その辺のプロフェッショナル的なことはGoogle先生に聞いてもらえれば助かります(全力でお手上げ)。

 

関連記事