blog-customize

超初心者がはてなブログでグローバルメニューをつくってみました

2018-05-09

※当サイトはアフィリエイト広告やPRを利用しています。

この記事の内容

  • プログラミングの知識がない初心者が「グローバルメニュー」を設定するまでの道のりをまとめとみました。

f:id:monteverde-aroma:20200411155825p:plain

グローバルメニュー

グローバルメニューとは、ブログの記事の上にある「これ」です。

f:id:monteverde-aroma:20180509150445j:image

なんていうのかも分からないのに、他の方のブログを拝見して「私もこれやりたい!!」と、初心者なのに挑戦することにしました。

こだわったのは、次の2つです。

  • メニューが見えているもの
  • レスポンシブデザインモード

ブログの内容が1つのテーマに特化していないので、「アロマ」「旅行記」など、何を書いているのかが分かるようなメニューにしたいと思いました。

※現在は、英語での表示に変更してあります。

レスポンシブデザインだと、PCの設定がそのままスマホでも反映されるので、楽かな⁉と思ったからです。

参考にさせていただいたのは、

見せたいメニューのみ表示して残りをドロップダウンにするレスポンシブナビゲーション(追記あり) - Hatena Blog Theme Custom

Minimal Green さんが、HTMLコードなどをアップして下さっていたので、そのまま使わせて頂くことにしました(その後、文字の前にWebアイコンを加え、メニューの文字を細くするカスタマイズをしました)。

memo

Google AdSense で広告を貼っている場合は、ドロップダウンした部分が広告を隠さないように注意します。

初心者のつまづき

下の画面の「リンク1」「リンク2」にリンク名(私の場合「アロマ「や「旅行記」など)を入れ、その前の ”#” の部分に、リンクさせたい自分のブログのURLを入れていきます。

f:id:monteverde-aroma:20180509180922p:plain

あれっ?最初の記事1つしかリンクされない (´;ω;`)ウッ…

しばらく壁にぶつかった状態で放置・・・。次にいきます。
momoka
momoka

 

カテゴリー分け

次に興味を持ったのは、他の方のブログについている「これ」です。

f:id:monteverde-aroma:20180509182340p:plain

「これ」はどうやったら、表示されるのだろう?いろいろ検索したら、これは「カテゴリー」と言うらしい、と分かりました。

「はてな・カテゴリー」で検索をかけると、やり方が分かりました。ほっ。分かれば簡単でした。

f:id:monteverde-aroma:20180509170016p:plain

ブログの本文の右にある   をクリックします。すると「カテゴリー」が出てくるので、入力します。

f:id:monteverde-aroma:20180509172513p:plain

空欄に「カテゴリー」を書きます。例として、「カナダ」を記入しました。

f:id:monteverde-aroma:20180509172530p:plain

PCの「Enterキー」を押すと、新しいカテゴリー「カナダ」が追加されました。

f:id:monteverde-aroma:20180509173954p:plain

プレビューで確認したら、きちんと表示されていました。

カテゴリーの変更・削除

現在は、カテゴリーを日本語から英語に変えています。変えるためには、

ダッシュボード > カテゴリー > カテゴリ-一覧 で行います。

f:id:monteverde-aroma:20200412160926p:plain

上の画面の「編集」で書き直しすると、すべてのブログ記事の「カテゴリー」が書き直されました。

このカテゴリーが、グローバルメニューに繋がるのではないか?
momoka
momoka

そこで、はた!と気づきました。

記事をカテゴリーに分けることで、グローバルメニューの「リンク」や「サブメニュー」の全ての記事がリンクされるようになりました。

最初の壁の原因は、私が記事をカテゴリーに分けていなかったから、グローバルメニューには最初に入れたURLの記事一つにしかリンクしていなかったことでした。

まとめ

グローバルメニューを作るときに必要なのは「カテゴリ分け」です。

また、リンク名は英語(ローマ字)にしておくと、後々便利です(私は日本語にしていたので、変換に苦労しました)。カスタマイズにあたって、はてなブログ初心者が「これを先にやっておけば良かった」など、失敗を元に学んだことを忘却禄も兼ねてまとめてみました。

先人の方の力を借りて、これからも自分のブログを育てていきたいと思っています。同じようなことで???な方のお役に立ちましたら幸いです。

最後までご覧いただきありがとうございます。

-blog-customize