目次

アメブロにグローバルナビを設置する方法(新CSS対応・旧CSS対応)

アメブロのフリースペースとCSSを使って、アメブロのPC向け画面にグローバルナビ(メニューバー)を設置するカスタマイズ方法を紹介します。

まず最初に、フリースペースへのHTMLタグの追加と、CSSの編集によって、アメブロのPC向け画面上部のアメーバヘッダー(アメーバのキャラクターアイコンのある白いバー)の下に、つまり、ヘッダー画像を表示する位置の上にグローバルナビを表示する方法を紹介します。

そして、それを元にヘッダー画像の下に移動させる方法も紹介します。

当記事で設置するのは、とてもシンプルなグローバルナビですが、ここからデザインや設置位置の変更など様々な応用ができますので、そのあたりに関しても追い追い紹介したいと思います。

なお、当記事の方法でグローバルナビを設置できるのは、新CSS編集用デザイン(初期のプロフィール画像が丸いタイプ)および、旧CSS編集用デザインを使っているアメブロです。

当記事で紹介する方法はInternetExplorer(IE)には対応していません。また、カスタマイズ方法は当サイト独自に考案していますので、他サイトで紹介されている方法とは共存できない可能性があります。

ヘッダー画像の上側にグローバルナビを設置する方法

それでは、ここから実際にグローバルナビを設置する方法を説明していきます。

フリースペースにHTMLタグを追加する

まず、フリースペースに以下のようなグローバルナビ用のHTMLタグを追加します。

<nav id="gnav-main" class="gnav"><ul class="menu">
  <li><a href="#">メニュー項目1</a></li>
  <li><a href="#">メニュー項目2</a></li>
  <li><a href="#">メニュー項目3</a></li>
  <li><a href="#">メニュー項目4</a></li>
  <li><a href="#">メニュー項目5</a></li>
</ul></nav>

ひとまずコピペでフリースペースに貼り付けて、以下を参考に必要な修正を行ってください。

  • li要素がそれぞれ1つのボタンになります。
  • li要素を増やすことでボタンの数も増やすことができます。
  • アメブロに表示時はli要素の並びの上から順に左から右へボタンが並びます。
  • 「#」の位置にはボタンに設定するリンク先のURLを設定して下さい(#を消して)。
  • メニュー項目1~5は、それぞれのボタンに表示する文字列(ラベル)に変更して下さい。
初期状態ではフリースペースがアメブロの画面に表示されない設定になっている場合がありますので、「管理トップ」の左サイドメニューから「設定・管理」→「配置設定」とクリックして表示される「サイドバーの配置設定」という画面でフリースペースをサイドバーに配置して表示させて下さい。

CSSを編集する

次に、以下のようなコードをCSSの編集画面でブログデザインCSSの末尾に追加します。

/*********************************************************
  (1)グローバルナビをページ上部(アメーバヘッダーの下)に表示する
     //matsmoto.jp/ameblo/global-nav/
 *********************************************************/
/* 各種設定 */
.skin-page, .skinBody {
  --gnav-height: 60px; /* メニューバーの高さ */
}
.gnav {
  --w: 1120px; /* メニューバーの横幅 */
  --bg: #69f; /* メニューバーの背景設定 */
  --bd: #fff; /* 枠線の色 */
  --btn-n: 5; /* ボタンの数 */
  --btn-fg: #fff; /* ボタンの文字色 */
  --btn-bg: #69f; /* ボタンの背景設定 */
  --btn-fg-h: #fff; /* ボタンの文字色(ホバー時) */
  --btn-bg-h: #36c; /* ボタンの背景設定(ホバー時) */
}
/* サイドバーの原点をページの左上に設定 */
.skin-page, .skinBody {
  position: relative;
}
.skin-columnA .skin-blogSubA,
.skin-columnB .skin-blogSubA,
.skin-columnC .skin-blogSubA,
.skin-columnC .skin-blogSubB,
.skin-columnD .skin-blogSubA,
.skin-columnD .skin-blogSubB,
.skin-columnE .skin-blogSubA,
.skin-columnE .skin-blogSubB {
  position: static;
}
/* グローバルナビを設置 */
.skin-page, .skinBody {
  padding-top: var(--gnav-height); 
}
.gnav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--bg);
}
.gnav, .gnav * {
  box-sizing: border-box !important;
}
.gnav >br,
.gnav >br~br,
.gnav ul >br,
.gnav li >br,
.gnav ul >br~br,
.gnav li >br~br {
  display: none;
}
.gnav .menu {
  display: flex;
  margin: auto;
  width: var(--w);
  border-right: 1px solid var(--bd);
}
.gnav .menu >li {
  width: calc(100% / var(--btn-n));
  height: var(--gnav-height);
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
}
.gnav .menu li >a,
.gnav .menu li >span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  height: var(--gnav-height);
  text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border-left: 1px solid var(--bd);
}
.gnav .menu li >a:hover,
.gnav .menu li >span:hover {
  opacity: 1.0;
  cursor: pointer;
  color: var(--btn-fg-h);
  background: var(--btn-bg-h);
}

このままコピペでCSSに貼り付けると、当記事冒頭の画像のような青色のグローバルナビが設置できる内容になっています。

色や大きさなどのいくつかの項目は、簡単に変更できるようにしましたので、コード内の注釈を参考に設定して下さい。

旧CSS編集用デザインを使っている場合、グローバルナビの幅がコンテンツ領域の幅よりもかなり広くなりますので、合わせたい場合は/* メニューバーの横幅 */980pxにするとピッタリになると思います。

また、フリースペースでボタン数を変えた場合は、/* ボタンの数 */に変更後のボタンの数を設定してください。

ここまでできたら、保存して、反映されているかを確認すれば完了です。

ヘッダー画像の下側にグローバルナビを移動させる方法

次に、設置できたグローバルナビを、ヘッダー画像の下(つまり標準のナビゲーションバーの上・新CSS編集用デザインの場合)に移動させてみます。

先ほどCSSに追加したヘッダー画像の上側にグローバルナビを設置するコードの更に下に、以下のようなコードを追加して下さい。

/*********************************************************
  (2)グローバルナビをヘッダー画像の下に表示する/(1)に追加
     //matsmoto.jp/ameblo/global-nav/
 *********************************************************/
/* 各種設定 */
.skin-page, .skinBody {
  --gnav-header-height: 229px; /* ヘッダーの高さ */
}
/* グローバルナビをヘッダー画像の下に移動する */
.skin-page, .skinBody, .skinFrame {
  padding-top: 0;
}
.skin-bgHeader, .skinHeaderFrame {
  margin-bottom: var(--gnav-height);
  height: var(--gnav-header-height);
}
.skinContentsFrame {
  padding-top: 22px;
}
.gnav {
  top: var(--gnav-header-height);
}

/* ヘッダーの高さ */は、新旧CSS、ヘッダー画像の設定状況、タイトルの長さ等によって変わりますので、ご自身のアメブロのヘッダー部の高さをpx単位で設定して下さい。

ちなみに、設定済みの229pxは、僕のPCで新CSS編集用デザインのアメブロを表示したときの初期値です。

標準ナビゲーションバーの下にグロバルナビを移動する

更に、新CSS編集用デザインの場合、標準ナビゲーションバーの下側に移動させることもできます。

先ほどのグローバルナビをヘッダー画像の下側に移動させるコードの更に下に、以下のようなコードを追加して下さい。

/*********************************************************
  (3)グローバルナビを標準ナビの下に表示する/(2)に追加
     //matsmoto.jp/ameblo/global-nav/
 *********************************************************/
/* グローバルナビを標準ナビの下に移動する */
.skin-bgHeader {
  margin-bottom: 0;
}
.skin-blogHeaderNav {
  margin-bottom: var(--gnav-height);
}
.gnav {
  top: calc(var(--gnav-header-height) + 75px);
}

これは、特にこれと言って追加で必要な設定はありません。

その他の応用について

以上で、アメブロに基本的なグローバルナビ(メニューバー)を設置する方法の説明は終わりです。

ここから、デザインを変えたり、サブメニューを追加したり、複数のメニューバーを設置したりといった応用もできますので、今後、そのあたりに関しても紹介していきたいと思います。