目次

【アメブロカスタマイズ】グローバルナビを設置する方法

新CSS編集用デザイン適用済みのアメブロで、フリースペースとCSSを使ってパソコン・iPad向け画面にグローバルナビ(グローバルメニュー)を設置するカスタマイズ方法を紹介します。

グローバルナビは、グローバルメニュー、ヘッダーメニュー、メニューバーなど、色んな呼ばれ方をしますが、当記事ではグローバルナビと呼ぶことにします。

グローバルナビは、ブログ内の(PC向けの)どのページにも表示されますので、告知記事や、問い合わせ・予約フォーム等のコンタクト手段など、重要なページにリンクして案内することで威力を発揮すると思います。

当記事では、(CSSの内容がシンプルな順に)まずブログタイトルの上側(ヘッダー画像の上側)にグローバルナビを設置する方法をご紹介し、その次に、ブログタイトルの下側(ヘッダー画像の下側)に移動させる方法をご紹介したいと思います。

設置するのは5つボタンのとてもシンプルなグローバルナビですが、ここから工夫していくと、デザインや設置位置の変更など様々な応用ができます。

当記事で紹介する方法はInternetExplorer(IE)には対応していません。また、カスタマイズ方法は当サイト独自に考案していますので、他サイトで紹介されている方法とは共存できない可能性があります。
当記事の手順は、Windows 10とGoogle Chromeを使った場合です。環境が異なる場合は表示や操作が異なる可能性もありますので、ご自身の環境に合わせて読み替えて下さい。

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

フリースペースにグローバルナビ用のHTMLタグを保存する

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

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

フリースペース内のどこに追加するかは特に決まっていませんが、他のタグと混同しないように、先頭か末尾が良いのではないでしょうか。

ひとまず上記のコードをそのままフリースペースにコピペ(コピー&貼り付け)して、以下を参考に必要な修正を行ってください。

  • <li>の行がそれぞれ1つのボタンになります。
  • <li>の行を増やすことでボタンの数も増やすことができます(ただしボタンの数に合わせて後述するCSSの内容を修正する必要があります)。
  • アメブロの画面では、<li>の行が上から順に、それぞれボタンとして左から右へ並んで表示されます。
  • 「#1」~「#5」には(#と数字を消して)それぞれのボタンをクリックした時に移動するリンク先のURLを設定して下さい。
  • 「メニュー項目1」~「メニュー項目5」は、それぞれのボタンに表示したい内容(文字列)に変更して下さい。

なお、フリースペースにHTMLタグを追加しただけではグローバルメニューとしては表示されませんので、必ず次項以降も実施して下さい。

アメブロ登録後の初期状態ではフリースペースがアメブロの画面に表示されない設定になっている場合がありますので、「管理トップ」の左サイドメニューから「設定・管理」→「配置設定」とクリックして表示される「サイドバーの配置設定」という画面でフリースペースをサイドバーに配置して表示させて下さい。

ブログタイトルの上側にグローバルナビを設置する方法

次に、前項のHTMLタグをグローバルナビとして表示するための設定を実施します。

まずはブログタイトルの上側(ヘッダー画像設置済みの場合はその上側)に設置しますが、ブログタイトルの下側(ヘッダー画像の下側)に設置したい場合も、ひとまずこちらをやってから、次項で下側に移動するという手順になります。

CSSの編集にて行いますので、そのやり方がわからない場合は先にチェックしておいて下さい。

では、以下のようなコードをCSSの末尾に追加して下さい。

/*********************************************************
  (1)グローバルナビを設置する
 *********************************************************/
/* 各種設定 */
:root {
  --gnav-h: 60px; /* メニューバーの高さ */
  --gnav-w: 1120px; /* メニューバーの横幅 */
  --gnav-bg: #69f; /* メニューバーの背景設定 */
  --gnav-bd: #fff; /* 枠線の色 */
  --gnav-btn-n: 5; /* ボタンの数 */
  --gnav-btn-fg: #fff; /* ボタンの文字色 */
  --gnav-btn-bg: #69f; /* ボタンの背景設定 */
  --gnav-btn-fg-h: #fff; /* ボタンの文字色(ホバー時) */
  --gnav-btn-bg-h: #36c; /* ボタンの背景設定(ホバー時) */
}
/* 原点をページの左上に設定 */
.skin-page {
  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 {
  padding-top: var(--gnav-h); 
}
#gnav-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--gnav-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(--gnav-w);
  border-right: 1px solid var(--gnav-bd);
}
.gnav .menu >li {
  width: calc(100% / var(--gnav-btn-n));
  height: var(--gnav-h);
  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-h);
  text-decoration: none;
  color: var(--gnav-btn-fg);
  background: var(--gnav-btn-bg);
  border-left: 1px solid var(--gnav-bd);
}
.gnav .menu li >a:hover,
.gnav .menu li >span:hover {
  opacity: 1.0;
  cursor: pointer;
  color: var(--gnav-btn-fg-h);
  background: var(--gnav-btn-bg-h);
}

このままコピペでCSSに貼り付けると、本項冒頭の画像のような青色のグローバルナビがブログタイトルの上側に設置できる内容になっています。

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

また、フリースペースでボタン数を変えた場合は、/* ボタンの数 */に変更後のボタンの数を設定してください(多すぎるとうまく表示できないかもしれません)。

ここまでできたら、保存して反映されるか確認し、問題無ければこれで完了です

ブログタイトルの下側にグローバルナビを移動させる方法

次に、グローバルナビを、ブログタイトルの下側(ヘッダー画像を設置済みの場合はその下側、つまり標準のナビゲーションバーの上側)に移動させます。

前項でCSSに追加したコードに続けて、以下のようなコードを追加して下さい。

/*********************************************************
  (2)グローバルナビをブログタイトル下に変更/(1)に追加
 *********************************************************/
/* 各種設定 */
:root {
  --gnav-header-h: 229px; /* ヘッダーの高さ */
}
/* グローバルナビをブログタイトルの下に移動する */
.skin-page {
  padding-top: 0;
}
.skin-bgHeader {
  margin-bottom: var(--gnav-h);
  height: var(--gnav-header-h);
}
#gnav-main {
  top: var(--gnav-header-h);
}

/* ヘッダーの高さ */は、フォントの種類、タイトルの長さ、ヘッダー画像の設定状況などによって変わりますので、ご自身のアメブロのヘッダー部の高さをpx単位(ピクセル単位)で設定して下さい。

ちなみに、上記コードに設定済みの229pxは、管理人のPCで初期状態のアメブロを表示したときの実測値です。

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

また、頻度は少なそうですが、標準ナビゲーションバーの下側に移動させる可能性もあるかと思いますので、追加でご紹介します。

前項のコードに更に続けて、以下のようなコードを追加して下さい。

/*********************************************************
  (3)グローバルナビを標準ナビの下に変更/(2)に追加
 *********************************************************/
/* グローバルナビを標準ナビの下に移動する */
.skin-bgHeader {
  margin-bottom: 0;
}
.skin-blogHeaderNav {
  margin-bottom: var(--gnav-h);
}
#gnav-main {
  top: calc(var(--gnav-header-h) + 75px);
}

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

まとめ

以上、新CSS編集用デザイン適用済みのアメブロにシンプルなグローバルナビを設置する方法をご紹介しました。

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

関連記事

2022/05/13に新CSS専用で大幅に書き換えました。以前の方法とは互換性がありませんが、ご了承下さい。