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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

調整と確認、保存

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

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

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

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

まとめ

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

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

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

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

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

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

  1. なお より:

    早い回答ありがとうございます。
    変更したら、ちゃんとリンク先に飛びました!
    ありがとうございました!!

    1. 松本 より:

      なおさん
      わざわざご報告いただきましてありがとうございました。

  2. なお より:

    参考にさせていただいています。
    ありがとうございます。
    無事グローバルメニューの設置はできたのですが、
    そのグローバルメニューをクリックしてもリンク先に飛びません。
    「ご指定のページを表示できません。
    ご指定のページは移動、または、削除された可能性がございます。もしくは、ご指定のURLが違う可能性がございます。URLをご確認のうえ再度アクセスお願いいたします。
    サービスに関する情報はスタッフブログ、または、ヘルプにてご確認ください。」
    と、出てきてしまいます。
    解決策があれば教えてください。

    1. 松本 より:

      なおさん
      こんにちは。
      「【」や「】」URLにいりませんので、これも外して下さい。
      href=”【http://honyarara.com】” ではなく
      href=”http://honyarara.com” のようになります。

  3. 元地奈弓 より:

    松本様

    こんにちは!
    貴重な記事をありがとうございます。

    1つ質問です!
    プレビューで出てくるのですが、
    保存しても でてきません。

    更新も何度かしましたが、ダメなようです。
    原因としてどのようなものがあるのでしょうか??

    1. 松本 より:

      元地奈弓さま
      こんにちは。
      拝見しましたが、メニューバーは表示されていましたのでやり方は間違っていません。
      ブログを表示した上で、Ctrl+F5などで再読込してみて下さい。

  4. くま より:

    くまです。
    お世話になってます。
    先ほど背景の記事にメニューのコメントも
    一緒に書いてしてしまったので、
    こちらに改めてコメントさせていただきます。
    先ほどレイアウトを変えてからまたCSSを書き直したら
    背景は無事反映されたのですが、
    メニューがやはりサイドバーのフリースペースのところに表示されてしまいます。
    できればヘッダーの下に表示させたいです。
    原因が分からないのでお聞きできると助かります(*ノωノ)

    1. 松本 より:

      くまさん
      こんにちは。
      こちらの記事の方法で設置されていないようです。
      旧CSS編集用デザイン用で設置されたのではないでしょうか?

    2. くま より:

      盲点でした!!
      早速回答ありがとうございます(>_____<)
      最初のCSS対応のデザインに変更するやり方のところから分からなくて、そこから検索しながらやっていました。
      初心者にも分かりやすくてとても感謝です(/。'(ェ)')
      迅速な対応に感謝です♡(´。•ㅅ•。`)

    3. 松本 より:

      くまさん
      こんにちは。
      わざわざご報告くださりありがとうございました。
      お役に立てたのでしたらよかったです。

  5. phylex より:

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

    1. matsmoto より:

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

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

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

  7. 鈴木洋平 より:

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

コメントを残す

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

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