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

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

前回アメブロにヘッダー画像を設置しました。

アメブロにヘッダー画像を設置する方法

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

アメブロにグローバルナビを設置する方法-1

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

CSSが編集できるデザイン(テンプレート)である事が前提なので、CSSデザイン用を使っていない方は事前に用意しておきます。

アメブロのCSS編集用デザインを選ぶ

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

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

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

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

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

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

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

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

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

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

まずはアメブロの「マイページ」⇒「ブログ管理」⇒「設定・管理」⇒「フリースペースの編集」をクリック。

アメブロにグローバルナビを設置する方法-2

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

<div class="nav-wrap"><nav><ul class="nav-body">
<li><a href="#"><span>メニュー1</span></a></li>
<li><a href="#"><span>メニュー2</span></a></li>
<li><a href="#"><span>メニュー3</span></a></li>
<li><a href="#"><span>メニュー4</span></a></li>
<li><a href="#"><span>メニュー5</span></a></li>
</ul></nav></div>

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

アメブロにグローバルナビを設置する方法-3

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

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

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

アメブロにグローバルナビを設置する方法-4

アメブロにグローバルナビを設置する方法-5

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

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

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

アメブロのマイページから「ブログ管理」⇒「デザイン設定」⇒「CSSの編集」をクリック。

アメブロのCSS編集

CSSの一番下に次のコードを追加します。

/* グローバルメニュー(共通) */
.nav-wrap {
position: absolute;
margin: 0;
padding: 0;
}
.skin-blogSubA, .skin-blogSubB {
position: relative;
}
.skin-columnB .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubA .nav-wrap,
.skin-columnE .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubB .nav-wrap {
left: auto;
right: 0;
}
.skin-columnA .skin-blogSubA .nav-wrap,
.skin-columnD .skin-blogSubA .nav-wrap,
.skin-columnC .skin-blogSubB .nav-wrap {
left: 0;
right: auto;
}
.skin-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;
}
.nav-body {
width: 1120px; /* メニューバー横幅 */
background: #FFFFFF; /* メニューバー全体の背景色 */
}
.nav-body li a {
width: 224px; /* ボタンの横幅(ボタン5つの場合) */
line-height: 50px; /* ボタンの高さ */
color: #ffffff; /* 文字の色 */
background: #1F5E73; /* ボタンの色 */
font-weight: bold; /* ナビの文字を太字に */
}
/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding-bottom: 50px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -165px; /* メニューバーの上下位置調整 */
}

ボタンの横幅5つの場合の数値です。ボタン4つにする場合は最初に計算したボタンの幅(280px)にしておいて下さい。

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

以上でアメブロにグローバルナビ設置は完了です。

コメント

  1. 結月 より:

    昨年大変お世話になりました結月です。
    本当にありがとうございました。
    もしよろしければ今年もいろいろと教えてください。
    よろしくお願いいたします

  2. 結月 より:

    しげぞうさんへ

    お返事遅れて申し訳ありません。

    今回は本当にありがとうございました。

    ブログを充実させたいのですがなかなか疎くて前にすすまないことが多いです。

    また何度もご質問させていただくかと思いますが、今後ともよろしくお願いいたします

  3. しげぞう より:

    >結月様

    文字の大きさ変更反映されて良かったです。もちろん他の部分の質問でも構いませんし、私自身も勉強になりますので大歓迎です。時々調べてもできない事もありますが、私に分かる範囲であればできる限り答えていきたいと思っていますのでいつでもコメントして下さい。

  4. 結月 より:

    ありがとうございました。
    とても助かりました。

    今ブログの見直しをいろいろやっているのですが、できなかったらほかのことでもご質問させていただいてもよろしいでしょうか。

  5. しげぞう より:

    >結月様

    良かった!私も確認してみましたがきちんと反映されてますね。ナビの文字を大きくするには追加したコードのこの部分を探して下さい。

    /*▼▼▼ 色・文字装飾・背景など */
    #headerMenu ul.menu li a{ /* 通常時 */

    という部分の{ }の間に文字色や、背景色を書きましたよね。この中に文字サイズを指定するコードを入れます。{ }内であればどこでもOKなので次のような一文を追加して下さい。

    font-size: 18px;

    サイズはお好みで数値を変更してみて下さいね。これで文字の大きさを調整できると思います。

  6. 結月 より:

    すごい!できました。

    しげぞうさん、ご丁寧に教えてくださって本当にありがとうございました。

    もう少し目立つように文字の大きさを大きくしたいと思ったらどうしたらいいのでしょうか。

    申し訳ありませんが、教えてください。

    よろしくお願いします

  7. しげぞう より:

    >結月様

    返信ありがとうございます。ブログも確認させて頂きました。早速やってみます。まずは現在のCSSを全部コピーしてPCのメモ帳等に貼り付けて保存しておいて下さい。上手く反映されなかった時にまた元に戻せるように準備しておきます。

    コピーして保存したら、グローバルナビを設置するために書いたコードを一度全部消してみます。メニューは現在3つ利用されてますので、1つ増やして4つにしましょうか。増やす項目は「読者登録ページ」が良いと思います。

    フリースペースに現在メニューが書いてあると思いますので項目を4つに増やして記述して「保存」をします。メニューは4つなのでフリースペースには4つの項目を記入してください。ここは本文参照でお願いします。

    それぞれ#の部分に飛ばしたいURLを記述(#は消して)、そしてテキスト部分(メニュー1~4)の部分にはそれぞれ好きなテキストを入れます。これは現在反映されているので大丈夫かと思います。

    続きまして今度はCSSの編集です。グローバルナビのコードは全部消しておいたと思いますので、1からコードを追加します。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:245px; /* ボタンの幅 */
    line-height:35px; /* ボタンの高さ */
    font-size:14px; /* ボタンの文字サイズ */
    }
    ブログ全体の幅が980pxでボタンが4つなので、980÷4=245pxなのでここのボタンの幅は「245px」にしています。

    いよいよボタンの背景色や文字色を決める部分が下記のコードです。

    /*▼▼▼ 色・文字装飾・背景など */
    #headerMenu ul.menu li a{ /* 通常時 */
    color:#ffffff; /* 文字色(白) */
    font-weight:bold; /* 太字*/
    text-decoration:none; /* 下線(なし) */
    background-color:#ff99ff;; /* 背景色 */
    background-image:url(); /* 背景画像 */
    background-repeat:repeat; /* 背景画像繰り返し */
    }
    一応どの色にするか迷ったのですが、文字色を白(#ffffff)、背景色を薄いピンク系の色(#ff99ff)にしてみました。それから「font-weight」の部分で太字(bold)にしておりますのでまずはこのまま追加して下さい。背景色や文字色を変更したい場合はこの部分を変更して下さい。

    次にナビの部分にカーソルが乗った時の色を指定していきます。このコードを追加。

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

    一応これもカーソルが乗った時の背景色を薄い紫(#cc66ff)に変更してみましたが設置ができた後にお好みで変更して下さい。アンダーライン(text-decoration) も無し(none)に変更してます。

    以上でグローバルナビの設置はできると思いますので試してみて下さい。それから、余談ですが、グローバルナビと下のコンテンツ(サイドバーや本文が表示される部分)が現在くっついています。グローバルナビの下に少しスペースを作るのであれば次のコードも追加して下さい。

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

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

    これでグローバルナビの下に40pxのスペースができます。数字はお好みで変更して下さいね。

  8. 結月 より:

    しげぞうさんへ

    お忙しい中、お返事いただきありがとうございます。
    ブログは、

    です。使うメニューは3つなのですが、4つか5つの方が都合がいいと書かれていたので、4つにして3つだけ使っている状態です。

    背景色は正直どんな色がいいか決めかねていて、カラー一覧のサイトを見つけたので、合わせながら調整しようと思っていました。

    ダメでしょうか。

    また不都合でしたらお返事ください。

    お手数をおかけして申し訳ないですが、よろしくお願いします

  9. しげぞう より:

    >結月様

    コメントありがとうございます。グローバルナビも書き方が少し違うだけで反映されない場合もあります。色々なマニュアルを参考にしたという事なので色々違うやり方の要素が混じっているのかも知れませんね。もしよければ使っている「ブログのURL」と「設置したいメニュー数」「使いたい背景色のカラーコード」の3つを教えてもらえないでしょうか?ブログのURLはコメント公開の前に削除しますし、それを元に私もコードを作成してみます。

  10. 結月 より:

    はじめまして。質問させてください。
    私のブログにグローバルメニューを設定しようと思い、なんとかできたのはできたのですが、
    太字にできない
    背景色を変えられない
    文字の色も変えられない
    ため、せっかく設定したのに目だたないままで困っています。
    いろんなマニュアルを参考にしてそのとおりにしたのですが、どうしても変えられません。
    非常に申し訳ありませんが、私にもわかるように教えていただけますでしょうか。

    よろしくお願いします

  11. ありがとうございます。 より:

    ブログ見ていただいたんですね
    ありがとうございます。
    お誕生日メッセージもありがとうございます。
    素敵な1年になりそうですヽ(*´∀`)ノ

  12. しげぞう より:

    >チアリー様

    やった!!!ブログも確認させて頂きました。きっちり反映されていて嬉しく思います。とても感じのいいブログですね。私自身も勉強になりました、ありがとうございます。これからも質問があれば私の分かる範囲ですが回答させて頂きますね。自分の勉強にもなるので大歓迎です。今後ともよろしくお願い致します。あ、それからお誕生日おめでとうございます。ちょっと遅れましたが(笑)。

  13. 出来ました!! より:

    すごいです!!
    出来ました!
    どこを削除したらいいかわからず、まずはしげぞうさんの記述をそのまま貼り付けました。
    それではダメで、わからないなりに重複してそうな数行を削除しましたら一気に解決しました。
    感動です。
    本当にありがとうございました。

    私のブログがお分かりになるようでしたら是非確認してみてください。

    今度はヘッダーの写真を変更してみようと思います。

    またわからないことがありましたらコメントしてもよろしいでしょうか?

    本当に本当にありがとうございました。

  14. しげぞう より:

    >チアリー様

    なんとなく分かってきました。この横幅の1100pxというのが反映されていないのでは?ヘッダー画像も980pxになっています。もし良かったらCSSを元に戻せるようにメモ帳等にコピーしておいて、横幅を広げるために追加したコードと、グローバルナビのコード、ヘッダー画像の高さを変えた記述を一度削除してみて下さい。一度元に戻して改めて1つ1つ付けたしてみます。私のブログでブログの幅を1100pxに変更してナビまで付けてみました。私のブログではこれで反映されたのでおそらく大丈夫だと思います。まずはフリースペースの記述は大丈夫ですよね。ボタンは4つなので4つのメニューを書いてあると思います。

    その後にCSSの一番下に次の記述を書きます。

    .skinHeaderArea,.skinContentsArea{
    width: 1100px; /* 全体の幅 */
    }
    .columnA .skinSubA,.columnB .skinSubA,
    .columnC .skinSubA,.columnD .skinSubA,
    .columnE .skinSubA{
    width: 300px; /* (太い)サイドバーAの横幅 */
    }
    .columnC .skinSubB,.columnD .skinSubB,
    .columnE .skinSubB{
    width: 200px; /* (細い)サイドバーBの横幅 */
    }
    .columnC .skinMainArea,.columnD .skinMainArea,
    .columnE .skinMainArea{
    width: 570px; /* 3カラム時のメインカラムの横幅 */
    }

    .columnC .layoutContentsA,.columnD .layoutContentsA {
    width: 885px; /* メイン&サイドAを囲う領域 */
    }

    これで全体の幅を1100pxに調整する事ができます。狭い方のサイドバーの幅も若干変更してますがこれは数値を変更する事で変える事ができます。一応このままでやってみて下さい。次にヘッダーの高さを変更します。ヘッダー画像は横幅1100pxで高さ400pxという事なので、そのサイズの画像を用意して下さい。

    /* アメブロヘッダー画像設定 */
    .skinHeaderArea{
    height:400px;
    background-image:url(画像のパスURL);
    background-repeat:no-repeat;
    background-position:center top;
    }

    ここでヘッダー画像の高さを調整、画像のパスURLという部分に画像のURLを入れて下さい。最後にナビのコードを入れます。一応4つのボタンになるようにボタンの横幅を調整してありますので、ボタンの背景色などはお好みで変更して下さい。

    /* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
    /* ▼▼▼ 変更しない */
    #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:1100px; /* メニュー全体の幅 */
    }
    #headerMenu ul.menu li a{
    width:275px; /* ボタンの幅 */
    line-height:35px; /* ボタンの高さ */
    font-size:14px; /* ボタンの文字サイズ */
    }

    /*▼▼▼ 色・文字装飾・背景など */
    #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; /* 背景画像繰り返し */
    }
    /*▲▲▲ 色・文字装飾・背景など */

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

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

    一応変更して「F5」を押してリロード(再読み込み)して反映されているか見てみて下さいね。

    それとおそらくチアリー様のブログのURLは公開したくないと思いますのでコメントにあったURLは削除しておきますね。

  15. ありがとうございます より:

    ご迷惑おかけして申し訳ありません。

    3カラムでボタンは4つです。
    横幅は1100です。

    ちなみに私のブログを見てみてください。

    いろいろサイドバーに盛り込みすぎだからでしょうか(>ω<)

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

  16. しげぞう より:

    >チアリー様

    返信ありがとうございます。ちょっと私も挑戦してみたいと思いますので、もしよければカラム数(2カラム、3カラム)を教えて下さい。ブログ全体の幅は1100pxですよね。おそらく全体の幅に合うように調整してコードを書けると思います。あ、ついでにメニューに設置するボタンの数まで教えて頂けると助かります。

  17. たびたび申し訳ありません より:

    ヘッダーの高さを変更すると画面上すぐに反映されるのですが、しげぞうさんの「サイドバーとコンテンツ部分をちょっと下にずらしてみる」を追加しましたが、こちらは反映されませんでした。
    ヘッダーとぴったりくっついてしまっているようです。

  18. ご回答ありがとうございます。 より:

    ヘッダーの画像をどかしてみたのですがメニューはありませんでした。
    サイドバーにメニューが文字だけ残されたままです。
    指示が上手くいかないということでしょうか?
    他に思い当たりそうなことがございましたら是非教えてください。
    よろしくお願いいたします。

    チアリー

  19. しげぞう より:

    >始めまして様

    コメントありがとうございます。ブログの幅を広げてからナビが表示されないという事ですが、もしかするとナビ自体は表示されていて、ヘッダーの画像の下にもぐりこんでいるという事もあるかもしれませんね、一度元に戻せるようにCSS等をメモ帳にコピーしておいて、一度ヘッダーの画像を外して確認してみるといいかも知れません。もし下のもぐりこんでいるのであれば「/* ▼▼▼ 位置・サイズ調整 */」の部分の数値を変更する事でナビ自体をもっと下に下げてみると表示できるのではないかと思います。

  20. 初めまして より:

    いろいろ検索していてこちらのブログにたどり着きました。
    以前はおそらくわざめーばさんのblogの通りにしてグローバルナビをヘッダーの下に表示させることができたのですが、最近ブログ全体の幅を広げたりして980×300を1100×400にしています。
    そのせいかどうかわかりませんがナビがなくなってしまい、どう修正しても表示島くなってしまいました。
    大きさを変えたことが影響しますか?

    どうかアドバイスをお願いいたします。

タイトルとURLをコピーしました