アメブロにグローバルナビを設置・表示するカスタマイズ方法

  • アメブロ
  • このエントリーをはてなブックマークに追加

アメブロのヘッダー下(コンテンツ最上部)にグローバルナビゲーションメニュー(以下、グローバルナビ)(ナビ、ナビゲーション、ヘッダーメニューなどと呼ばれることもあります)を設置・表示するカスタマイズ方法です。

グローバルナビを設置すると、設置したアメブロの全てのページの目立つ位置に表示させることができますので、訪問者にぜひ告知したい記事や、問い合わせ・予約フォーム等のコンタクト手段の案内などに威力を発揮してくれます。

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

シンプルなグローバルナビの設置例

フリースペースとCSSを使って簡単に設置できる5つボタンのグローバルナビになります。

よかったらやってみてください。

(紹介するコードは「3カラム・右メニュー」以外の、2カラム及び3カラムのレイアウトに対応しています)

フリースペースにグロバルメニューのHTMLタグを追加する

まず、アメブロのフリースペース(プロフィールのフリースペースと間違えないよう注意)に、グローバルナビの内容を定義するHTMLタグを追加しましょう。

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

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="【URL1】"><span>【ボタンの文字1】</span></a></li>
<li><a href="【URL2】"><span>【ボタンの文字2】</span></a></li>
<li><a href="【URL3】"><span>【ボタンの文字3】</span></a></li>
<li><a href="【URL4】"><span>【ボタンの文字4】</span></a></li>
<li><a href="【URL5】"><span>【ボタンの文字5】</span></a></li>
</ul></nav></div>

このコードをフリースペースに追加し、【URL1】~【URL5】と【ボタンの文字1】~【ボタンの文字5】を適切に設定して保存して下さい。

【URL1】~【URL5】について

【URL1】~【URL5】は、各ボタンをクリックした際にジャンプするリンク先のURLに置き換えてください。

「【」や「】」の文字も残さないようご注意下さい。

【URL1】が最も左側のボタンのリンク先で、【URL5】が最も右側のボタンのリンク先になります。

【ボタンの文字1】~【ボタンの文字5】について

【ボタンの文字1】~【ボタンの文字5】の位置には、各ボタンに表示する文字を設定して下さい。

これも【ボタンの文字1】が最も左側のボタンに表示される文字で、【ボタンの文字5】が最も右側のボタンに表示される文字になります。

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

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

フリースペースを使用する機能へ移動してアメブロに表示されるようにする

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

ブログデザインCSSにグローバルナビのためのCSSを追加する

次に、グローバルナビを表示するためのCSSを用意しましょう。

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

今回は、CSS編集用デザインを適用したアメブロに上記画像のグローバルナビを設置したCSSをご紹介します。

CSS編集用デザインを適用後、全くカスタマイズしていない状態のアメブロでしたらそのまま使える内容です。

では、以下のコードをブログデザインCSSの末尾に追加して保存して下さい。

/* グローバルナビゲーションメニュー */
.nav-wrap {
  position: absolute;
  margin: 0;
  padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
  position: relative;
}
[amb-layout="columnB"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubA .nav-wrap,
[amb-layout="columnE"] .skin-blogSubA .nav-wrap,
[amb-layout="columnB"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: 0;
}
[amb-layout="columnA"] .skin-blogSubA .nav-wrap,
[amb-layout="columnD"] .skin-blogSubA .nav-wrap,
[amb-layout="columnC"] .skin-blogSubB .nav-wrap {
  left: 0;
  right: auto;
}
[amb-layout="columnE"] .skin-blogSubB .nav-wrap {
  left: auto;
  right: -360px;
}
.nav-body {
  margin: 0;
  padding: 0;
}
.nav-body:after {
  display: block;
  clear: both;
  content: " ";
  height: 0;
  visibility: hidden;
}
.nav-body>br {
  display: none;
}
.nav-body li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
.nav-body li a {
  display: block;
  text-decoration: none;
}
.skin-blogBodyInner {
  padding-top: 90px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
  top: -90px; /* メニューバーの上下位置調整 */
}
.nav-body {
  width: 1120px; /* メニューバー横幅 */
  background: #FFFFFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
  width: 224px; /* ボタンの横幅 */
  line-height: 50px; /* ボタンの高さ */
  color: #fff; /* 文字の色 */
  background: #505050; /* ボタンの色 */
}

コード内には、いくつか説明を書いてありますので、ここから更にカスタマイズする際に参考にしていただければと思います。

ある程度CSSに慣れている方でしたら、この説明だけで色や大きさなどをお好みで変更できるしょう。

なお、この辺りの意味と詳しい使い方に関しては、別の機会に紹介させて頂きたいと思います。

まとめ

以上が、アメブロにグローバルナビを設置・表示する方法です。

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

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

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

関連記事

  • アメブロ
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメント

  1. 黒猫 より:

    大変参考になりました!ステキな記事をありがとうございます。
    友人にアメブロのカスタマイズを頼まれていたのですが、正直言うと苦手な分野だったので本当に助かりました。どこよりも詳しく丁寧に書かれていたので感謝しています。これからも参考にさせていただきます!

  2. みさお より:

    こんにちは
    こちらのブログを参考にグローバルナビゲーションメニュー
    をセットしたのですが
    「表示で確認する」ではメニュバーを確認できるのですが
    保存し ブログで確認するとメニューバーが表示されません。

    表示では確認できるけれど 保存してもブログでは確認できない状態です。
    ブログでも反映するようにするには どのようにすればよろしいでしょうか?

    よろしくお願いします。

    1. 松本章次 より:

      みさおさん
      コメントありがとうございます。
      ブログを表示したときに、WindowsでしたらF5ボタン、MacでしたらCommand+Rを押してみてください。

コメントを残す