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

今回はアメブロにグローバルナビ(ナビゲーションメニュー)を設置するカスタマイズです。グローバルナビを設置する事によって読んでもらいたい記事に誘導する事もできますし、訪問者への道案内的な使い方ができます。ちなみにこんなやつね。

アメブロナビ-1

グローバルに関してはアメブロカスタマイズの松本様(わざめーば様)の記事で紹介されていたのでほとんど引用にはなりますが、ちょっとだけ位置調整等を追加して紹介しておきます。

それとCSSが編集できるデザイン(テンプレート)である事が前提なので、CSSデザイン用を使っていない方は事前に用意しておきましょう。
アメブロのCSS編集用デザインを選ぶ

ナビゲーションメニュー設置の前準備

一応記事コンテンツの幅やサイドバーの幅のカスタマイズはしていない状態を前提として進めますが、アメブロの場合初期状態でブログの幅が980pxあります。

設置する前にここにいくつのメニューを追加するかをまずは考えておき、設置するメニューのボタンの幅を計算しておく必要があります。

メニューボタンは4つか5つがおすすめです。

4つのメニューを付ける場合

980pxの幅に4つのメニューボタンをつけるので980÷4=245px。つまりボタンの幅は245pxと覚えておきます。

5つのメニューを付ける場合

980pxの幅に5つのメニューボタンを付けるので980÷5=196px。つまりボタンの幅は196pxと覚えておきます。

計算ができたらその数値を覚えておいて、グローバルナビを設置していきます。

グローバルナビ設置の手順

まずはアメブロの「マイページ」の右上のメニューマークをクリックして「フリースペースの編集」をクリック。

アメブロナビ-2

フリースペースに次の記述をします。

<div id="headerMenu"><!--
--><ul class="menu"><!--
--><li><a href="#" target="_blank">メニュー1</a></li><!--
--><li><a href="#" target="_blank">メニュー2</a></li><!--
--><li><a href="#" target="_blank">メニュー3</a></li><!--
--><li><a href="#" target="_blank">メニュー4</a></li><!--
--><li><a href="#" target="_blank">メニュー5</a></li><!--
--></ul><!--
--></div>

「#」の文字の所にはボタンクリック時にジャンプするページのURLを(#を消して)書き込んで下さい。それから「メニュー1」から「メニュー5」には、そのボタンに表示する文字(テキスト)を記入します。

一応メニューを5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOK、4つのメニューボタンを設置する場合は1つ減らしておく事。最初に決めたボタンの数に調整して下さい。

メニューを何にするか決まっていない場合はとりあえず上記コードを追加しておいて設置が完了してから考えてもいいです。記述できたら「保存」。「保存」を忘れないように。

それから「フリースペースの配置設定はこちら」というリンクをクリックしてサイドバーの適当な位置に配置しておきます。

アメブロナビ-3

アメブロナビ-4

配置ができたらここでも「保存」を忘れないように。

CSSを編集してヘッダー下にナビを設置する

ここまでの状態ではまだサイドバーに縦にメニューが並んでいる状態なのでこれをヘッダー下に移動して、メニューを横並びにして配置していきます。CSSの一番下に次のコードを追加します。

/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
/* ▼▼▼ 変更しない */
#wrap,.skinContentsArea{
  position:relative;
}
#headerMenu{
  position:absolute;
  margin:0;
  padding:0;
}
#headerMenu ul.menu{
  margin:0;
  padding:0;
  list-style: none;
}
#headerMenu ul.menu li{
  display:inline;
}
#headerMenu ul.menu li a{
  display:block;
  float:left;
  margin:0;
  padding:0;
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
}
/* ▲▲▲ 変更しない */

さらにこの下に次の記述も追加。

/* ▼▼▼ 位置・サイズ調整 */
#wrap,.skinContentsArea{
  padding-top:40px;             /* メニュー設置用スペース */
}
#headerMenu{
  top:0px;                      /* 上下位置調整 */
  left:0px;                     /* 左右位置調整 */
  width:980px;                  /* メニュー全体の幅 */
}
#headerMenu ul.menu li a{
  width:196px;                  /* ボタンの幅 */
  line-height:35px;             /* ボタンの高さ */
  font-size:14px;               /* ボタンの文字サイズ */
}
/*▲▲▲ 位置・サイズ調整 */

ここで「ボタンの幅」という部分があるのでこの部分を最初に計算した数値に書き換えます。

5つのメニューを設置する場合はこのままでOK。4つのメニューボタンを設置する場合は196pxという部分を245pxに書き換えておきましょう。

ここまできたら今度は背景色や文字色を変更するコードを追加していきます。これもCSSの一番下に追加していきます。

/*▼▼▼ 色・文字装飾・背景など */
#headerMenu ul.menu li a{       /* 通常時 */
  color:#ffffff;                /* 文字色(白) */
  font-weight:bold;           /* 太字*/
  text-decoration:none;         /* 下線(なし) */
  background-color:#1F5E73;     /* 背景色(濃い青) */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
  color:#7a8285;                /* 文字色 */
  font-weight:bold;           /* 太字 */
  text-decoration:underline;    /* 下線(あり) */
  background-color:#1F5E73;     /* 背景色 */
  background-image:url();       /* 背景画像 */
  background-repeat:repeat;     /* 背景画像繰り返し */
}
/*▲▲▲ 色・文字装飾・背景など */

文字色や背景色は好きな色に変更しておいて下さい。

最後にナビの位置調整をする

設置してみるとサイドバーのタイトルや記事本文部分のコンテンツとくっついてしまっていますよね。

アメブロナビ-5

これを解消するためにサイドバーとコンテンツ部分をちょっと下にずらしてみます。CSSにさらに追加。

.columnC .skinMainArea {
margin-top: 40px;
}
.columnC .skinSubA {
margin-top: 40px;
}

.columnC .skinSubB {
margin-top: 40px;
}

40px下にずらしてみました。これでグローバルナビの下にスペースができて調整できているハズです。

アメブロナビ-6

以上でアメブロにグローバルナビ設置は完了。次回はヘッダーに画像を設置するカスタマイズを紹介していきます。

アメブロにグローバルナビを設置するカスタマイズ”に48件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. しげぞう 投稿作成者

    うどんこ様

    コメントありがとうございます。原因として考えられるのはスタイルシートCSSでの記述ミスだと思うのですが、ナビのコード以外のコードが原因の場合もあるので、もし良かったらブログのURLを教えてもらえると助かります。コメント公開時にはURLは削除しますので、どうぞよろしくお願い致します。

  2. うどんこ

    すいません。何度設定してもナビゲーションバーが右端の方へずれて表示されてしまいます。
    プロフィール画像の上から始まっている感じです。
    どこをいじればいいのかわからなくて…これで半日潰れちゃった><
    ご教示宜しくお願いします。

  3. しげぞう 投稿作成者

    結月様

    反映されて良かったです。また何か分からない部分があればコメント下さいませ。今後もどうぞよろしくお願い致します。

  4. 結月

    なかなか四苦八苦しましたが、なんとかはずすことができました。
    文字を表示できない状態にしていたのに気づかなくて、ヘッダーが真っ白になってあせりました。
    ありがとうございます。
    またなにかありましたらご相談させてくださいね

  5. 結月

    しげぞうさん。お忙しい中ありがとうございます。
    教えていただいたとおり、ブログデザインヘッダ・背景用画像の追加 のところを削除し、

    /* (3-2) ブログヘッダー
    ——————————————–*/

    /* skinHeaderArea ブログヘッダー980pxエリア */
    .skinHeaderArea{
    width: 980px;
    height: 300px;}/* ←ブログヘッダーに背景画像を敷きたいとき */

    このようにしたのですが、はずれません。

    300px を 150 にしても変わりませんでした。

    なにが悪いのでしょうか。困っています。

    教えてください

  6. しげぞう 投稿作成者

    結月様

    久しぶりですね!コメントありがとうございます。早速ですが、まずはCSSの記述を全部コピーしてWindowsなどのメモ帳に貼り付けて保存しておいて下さい。失敗しても元に戻せるようにしておくと良いと思います。

    ヘッダー画像に関してですが、CSSに追加しているコードを探して削除もしくは変更をしますが、似たような記述があるかもしれませんので、確認して下さい。現在使用されているヘッダー画像のURLの末尾は「●●●●-k-shiro1403699365222.jpg」みたいなURLになっていると思います。これを探してみるといいかもしれません。

    .skinHeaderArea {
        background-image: url(画像のURL);  /* 削除 */
        background-repeat: no-repeat;  /* 削除 */
        background-position: center top;  /* 削除 */
        width: 980px;  /* ヘッダーの幅(変更なし) */
        height: 300px; /* ヘッダーの高さ(変更する) */
    }

    「削除」と書いている部分は削除して下さい。変更するのはヘッダーの高さです。今、設置しているヘッダーの高さが300pxになってますので、150pxくらいにして様子を見てから数値を変更し調整すると良いと思います。

    後、グローバルナビを外す場合には「フリースペース」に追加した記述(それぞれの記事のURL)を全部削除します。その後CSSに追加したナビのCSSを全部削除すればOKです。グローバルナビの設置用コードにはコメント(グローバルナビ設置みたいな)が書いてあると思いますのでそれで探して削除してみて下さい。

    また何か分からない部分があればコメント下さいませ。

  7. 結月

    しげぞうさん お久しぶりです。
    またブログについて質問させてください。

    今使っているヘッダーはまるごとはめ込んだものなのですが、ブログタイトルを変えるため外してしまおうと思います。
    グローバルナビも外そうと思っています。

    その場合、どのような手順で外したらいいのでしょうか。

    教えてください。

    よろしくお願いいたします

  8. しげぞう 投稿作成者

    >アイコ様

    報告ありがとうございます!よかった!反映されて自分の事のように嬉しいです。今回は私も1つ勉強になりました。ブログも見せて頂きましたが、画像の使い方がすごくスタイリッシュでいい感じですね!こんな感じになるなら私も別のブログでやってみようかと思っています(笑)。また何かあればコメント下さい。私も勉強しながら必要であれば新しく記事を作成したり、既存の記事を修正していきますのでどうぞよろしくお願い致します。