アメブロにグローバルメニュー(メニューバー)を設置するカスタマイズ方法

アメブロにグローバルメニュー(メニューバー、グローバルナビ、ヘッダーメニューなどと呼ばれることもあります)を設置するカスタマイズ方法です。

グローバルメニューは、ブログの全てのページに表示されますので、告知記事や、問い合わせ・予約フォーム等のコンタクト手段などの重要なページの案内に威力を発揮します。

そこで、当記事では、上の画像の赤枠で囲った部分(赤枠は表示しません)のような、シンプルなグローバルメニューの設置方法をご紹介します。

新タイプ(第二世代)のCSS編集用デザインに対応しています。

アメブロにグローバルメニューを設置する

今回は、アメブロの新タイプCSS編集用デザインで、ヘッダー下にある標準ナビゲーションバーの上に表示する方法と、標準ナビゲーションバーの下に表示する方法をご紹介します。

何れも、フリースペースまたはフリープラグインとCSSを使った簡単な5つボタンのグローバルメニューになります。

フリースペースまたはフリープラグインにグローバルメニューのHTMLタグを追加する

まず、アメブロのフリースペース(プロフィールのフリースペースと間違えないよう注意)フリープラグインに、グローバルメニューの本体となるHTMLタグを追加しましょう。

(以下、フリースペースに追加する場合の操作です。フリープラグインに追加した場合もほとんど同じですので読み替えて下さい。)

フリースペースに追加する内容は、グローバルメニューを標準ナビゲーションバーの上に表示する場合も、下に表示する場合も共通です。

タグは、以下のような内容になります。

このタグをフリースペースに追加し、

  1. 「【URL1】」~「【URL5】」に、各ボタンのリンク先URLを設定
  2. 「【ボタンの文字1】」~「【ボタンの文字5】」にボタンに表示する文字を設定

してください。

【URL1】の行が最も左側のボタンの設定で、【URL5】が最も右側のボタンの設定になります。

何れも、「【」や「】」の文字も不要ですので、残さないようご注意下さい。

設定できたら、フリーペースの編集内容を保存しましょう。

フリースペースをブログに表示する

フリースペースに記述したタグを有効にするためには、アメブロのサイドバーにフリースペースを表示する必要があります。

サイドバーの配置設定を開き、もし、フリースペースが「使用しない機能」の方に入っていたら、「使用する機能」へ移動させて「保存」して下さい。

ブログデザインCSSに必要なコードを追加する

次に、グローバルメニューを表示するためにCSSに必要なコードを追加します。

ブログデザインCSSを編集してカスタマイズしますので、もしやり方がわからない場合は、先にマスターしておいて下さい。

CSSに追加する内容は、ヘッダー下にある標準ナビゲーションバーの上に表示する場合と、標準ナビゲーションバーの下に表示する場合で少し違いますので、該当する方のコードを、ブログデザインCSSの末尾に追加して下さい。

標準ナビゲーションバーの上に表示する場合

まず、標準ナビゲーションバーのに表示する場合です。

当記事冒頭の画像の赤枠内のような表示になります(赤枠は付きません)

標準ナビゲーションバーの下に表示する場合

次は、標準ナビゲーションバーのに表示する場合です。

以下の画像の赤枠内のような表示になります(赤枠は付きません)

調整と確認、保存

なお、ブログのデザインやカスタマイズ状況により、色の変更や位置の調整が必要になったりすると思います。

コード内には、注釈コメント(「/*」と「*/」で挟まれている部分)でいくつか説明を書いてありますので、参考にしていただければと思います。

貼り付け・修正が完了し、表示確認できたら、CSSの内容を保存しましょう。

保存後は、実際のブログ画面での確認もお忘れなく。

まとめ

以上、アメブロにグローバルメニュー(メニューバー)を設置・表示する方法をご紹介しました。

できるだけ簡単に設置できるようコードを工夫してみましたので、ぜひ挑戦してみてくださいね。

なお、今回は、ごくシンプルなグローバルメニューの設置方法でしたが、これを応用して、ボタン数を変えたり、画像を使った凝ったグローバルメニューなども作れます。

その辺りについても、また別の機会に紹介させていただこうと思います。

よろしければフォローお願いします

アメブロにグローバルメニュー(メニューバー)を設置するカスタマイズ方法” に対して 4 件のコメントがあります

  1. 鈴木洋平 より:

    こんにちは。はじめまして。自分は、東日本大震災で被災した鈴木と申します。
    松本さん、CSSを保存しても右側に表示されるんですが、なぜでしょうか?
    あと、ほかのカスタマイズでもうまくいきません。原因を教えていただければ幸いです。

  2. コットンテイル より:

    松本様
    新cssのカスタマイズの情報があまりない中、とても参考になります。
    グローバルメニューを記事の通り設置するとトップページでは問題ないのですが、個別記事のページになるとスクロールするとグローバルメニューだけがずれて残ってしまいます。
    何か解決方法がございましたらご教示いただけると幸いです。

  3. phylex より:

    初めまして、アメブロの初心者なのでとても参考にさせていただいてます。
    ありがとうございます。
    質問なのですが、グローバルメニューを画像にしたい場合はどのようにcssを書いたらいいのでしょうか?
    background:urlでうまくいきません。通常時一枚、マウスオーバー時一枚、の指定の仕方を教えていただけたら嬉しいです。よろしくお願いいたします。

    1. hinako より:

      コメントありがとうございます。
      また時間の取れた時に記事に書きたいと思います。

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。