飛人のメディア工房

これから自分や会社のWEBサイトやメディアを作ってみよう!というブログです。

【はてなブログ】ナビゲーションメニュー(グローバルメニュー)を設定する

~専門ブログを作る!vol.9~

シリーズ記事

「ナビゲーションメニュー」は「グローバルメニュー」や「メニューバー」とも言われるもので、ホームページ全体の大きな目次です。

目的のページが探しやすくなるように設定します。

はてなブログにナビゲーションメニューを設定する

ポイント
  1. テーマがナビゲーションメニューに対応しているか調べる
  2. 配布されているメニューをカスタマイズする
  3. テーマのタイトル下に貼り付ける

まず、自分のテーマがナビゲーションメニューに対応しているか調べます。

「はてな」でインストールしているテーマ

はてなにログインしてテーマストアに行くと、自分がインストールしているテーマがわかるので、調べてみましょう。

※自分のブログテーマに、グローバルメニューが用意されていない場合は

www.yukihy.com

Yukihy Lifeさんの記事が、とっても参考になります。

ブログテーマ「Minimalism」のグローバルメニューカスタマイズ

1.グローバルメニューの内容を決める

 はてなブログテーマ「Minimalism」はコピペでグローバルメニューを設定できます。

hitsuzi.hatenablog.com

「Minimalism」に用意されているコードには6つの項目があり、

「ひつじの雑記帳」さんが公開してくれているCSSコードは以下の通り。

HOME

ABOUT

TIPS

STUDY

DESIGN

CONTACT

これを

HOME

  ABOUT

専門ブログ

ワードプレス

ツール

CONTACT

に、カスタマイズしたいと思います。

2.メニューのアイコンを変更する(無くてもOK)

 メニューの文字の先頭にアイコンを付けたい場合は

「Font Awesome」というサイトを利用します。

※登録方法や使い方はこちら↓ ナビゲーションメニューのことも書きました。

www.dreamweaver.work

「Font Awesome」を使い、ナビゲーションメニューを作ったものがこちら

※「URL」の部分は、自身のブログやサイトのメニューに合わせて変更してください。

3.カスタマイズしたメニューを貼り付ける

カスタマイズする場所:

ダッシュボード >>デザイン

 

>>カスタマイズ >>ヘッダ

 

>>タイトル下

ここに、ナビゲーションメニュー(グローバルメニュー)のHTMLを書き込みます。

 実際に貼り付けたものがこちら↓

このブログの場合は

  • HOME=「トップページ」へのリンク
  • ABOUT=「はじめに」記事へのリンク
  • 専門ブログ=「専門ブログ作り」カテゴリへのリンク
  • ワードプレス=「ワードプレス」カテゴリへのリンク
  • ツール=「ツール」カテゴリへのリンク
  • CONTACT=ツイッターへのリンク

にしてみました。