前回アメブロにヘッダー画像を設置しました。
今回はヘッダー画像の下にグローバルナビ（ナビゲーションメニュー）を設置するカスタマイズです。グローバルナビを設置する事によって読んでもらいたい記事に誘導する事もできますし、訪問者への道案内的な使い方ができます。ちなみにこんなやつ。
グローバルに関してはアメブロカスタマイズ専科のまつもと様の記事で紹介されていたのでほとんど引用にはなりますが、ちょっとだけ位置調整等を追加して紹介しておきます。
CSSが編集できるデザイン（テンプレート）である事が前提なので、CSSデザイン用を使っていない方は事前に用意しておきます。
ナビゲーションメニュー設置の前準備
一応記事コンテンツの幅やサイドバーの幅のカスタマイズはしていない状態を前提として進めますが、アメブロの場合初期状態でブログの幅が1120pxあります。
設置する前にここにいくつのメニューを追加するかをまずは考えておき、設置するメニューのボタンの幅を計算しておく必要があります。
メニューボタンは4つか5つがおすすめです。
■4つのメニューを付ける場合
1120pxの幅に4つのメニューボタンをつけるので1120÷4＝280px。つまりボタンの幅は280pxと覚えておきます。
■5つのメニューを付ける場合
1120pxの幅に5つのメニューボタンを付けるので1120÷5＝224px。つまりボタンの幅は224pxと覚えておきます。
計算ができたらその数値を覚えておいて、グローバルナビを設置していきます。
グローバルナビ設置の手順
まずはアメブロの「マイページ」⇒「ブログ管理」⇒「設定・管理」⇒「フリースペースの編集」をクリック。
フリースペースに次の記述をします。
<div class="nav-wrap"><nav><ul class="nav-body"> <li><a href="#"><span>メニュー１</span></a></li> <li><a href="#"><span>メニュー２</span></a></li> <li><a href="#"><span>メニュー３</span></a></li> <li><a href="#"><span>メニュー４</span></a></li> <li><a href="#"><span>メニュー５</span></a></li> </ul></nav></div>
「#」の文字の所にはボタンクリック時にジャンプするページのURLを(#を消して)書き込んで下さい。それから「メニュー１」から「メニュー５」には、そのボタンに表示する文字（テキスト）を記入します。
一応メニューを5つ書いておきましたが同じように「li」と「/li」で囲んで追加してもOKです。4つのメニューボタンを設置する場合は1つ減らしておく事。最初に決めたボタンの数に調整して下さい。
メニューを何にするか決まっていない場合はとりあえず上記コードを追加しておいて設置が完了してから考えてもいいです。記述できたら「保存」。「保存」を忘れないように。
それから「フリースペースの配置設定はこちら」というリンクをクリックしてサイドバーの適当な位置に配置しておきます。
配置ができたらここでも「保存」を忘れないように。
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; /* ボタンの横幅（ボタン５つの場合） */
line-height: 50px; /* ボタンの高さ */
color: #ffffff; /* 文字の色 */
background: #1F5E73; /* ボタンの色 */
font-weight: bold; /* ナビの文字を太字に */
}
/* 標準ナビの上にグローバルメニューを表示 */
.skin-bgHeader {
padding-bottom: 50px; /* メニューバーの表示場所確保 */
}
.nav-wrap {
top: -165px; /* メニューバーの上下位置調整 */
}ボタンの横幅5つの場合の数値です。ボタン4つにする場合は最初に計算したボタンの幅（280px）にしておいて下さい。
また文字色や背景色は好きな色に変更しておいて下さい。
以上でアメブロにグローバルナビ設置は完了です。
コメント
しげぞうさん！！
ありがとうございました！！
すべてご指示いただいた通りにやってみたら、一発で大成功でした( ´▽｀)
ここ数日悩んでいたのはなんだったの〜〜〜と、嬉し泣き（T T）
素敵すぎます♪
一箇所だけ、これはおそらく私のやり方がおかしかったのだと思うのですが、
設置できたナビ画像の上に、もともとの文字が重なって表示されてしまい、
CSSの 「位置・サイズ調整」内にあるfont-sizeを、
無謀にも0pxにしてみたりしたのですが…消えず（汗）
結局、たまたま検索した方法で、
font-size:12px; /* ボタンの文字サイズ */
の下に、
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
を入れたら、文字が消えてスッキリしました（^ ^）！
ほんとうにご丁寧に教えていただきありがとうございました！！
今後ともよろしくお願いいたします。
＞アイコ様
お待たせしました。アメブロのナビで個別の画像設定ですが、一応やってみました。現時点のCSSなどはメモ帳にコピペしておき、いつでも元に戻せるようにしておいてから試して見てください。
※事前に利用する画像はアップロードしておいてそれぞれのパス（画像URL）をメモ帳などに貼り付けておきます。
まずはとりあえず記事通りに通常のナビを設置するコードを追加して下さい。追加できてブログの表示を確認してナビが表示されていることを確認しておいて下さい。
確認できたらフリースペースに追加したコードを少し書き換えます。１つ１つの「li」タグに対してそれぞれクラス名を個別に付けます。こんな感じに変更して下さい。
これで一度「保存」しておきます。
続いて今度はスタイルシート（CSS）の最後にそれぞれのクラス名に対応した画像パスを入れていきます。
/* 通常時の画像 */ .menu1 a{ background-image:url(http://●●) !important; /* 背景画像 */ background-repeat:no-repeat; /* 繰り返しなし */ } .menu2 a{ background-image:url(http://●●) !important; /* 背景画像 */ background-repeat:no-repeat; }こんな感じで実際は「.menu1」から「.menu5」までそれぞれURLの部分に画像パスを入れていきます。これが通常時に表示される画像です。もし上手く画像がはまらないという場合でも気にせず追加して下さい。後で対応策を書きます。
次にカーソルを載せた時の画像を設定していきます。スタイルシート（CSS）にさらに追加して下さい。
/* カーソルが乗った時の画像 */ .menu1 a:hover { background-image:url(●●) !important; /* 背景画像 */ background-repeat:no-repeat; } .menu2 a:hover { background-image:url(●●) !important; /* 背景画像 */ background-repeat:no-repeat; }これも先ほどと同じように「.menu1」から「.menu5」までそれぞれの画像パスを入れていきます。
以上できたら保存して表示を確認しておきます。
もし画像が上手くはまっていない（高さとか）という場合にはナビを設置した時の追加コード（CSS）に「height」を追加して下さい。この部分です。
#headerMenu ul.menu li a{ width:196px; /* ボタンの幅 */ line-height:90px; /* ボタンの高さ */ height:90px /* ここに追加 */ font-size:14px; /* ボタンの文字サイズ */ }高さが90pxという事だったので、ここの「line-height」と「height」をどちらも90pxにして下さい。
とりあえずこれで試してみて再度コメント頂けると助かります。よろしくお願い致します。
しげぞうさん！
早々に検証していただけるとのこと、ありがとうございます！
お時間、ご無理のない範囲で結構です(> <)！
どうぞよろしくお願いいたします。
＞アイコ様
コメントありがとうございます。内容は了解しました。ちょっと検証してから再度返信しますね。明日は用事があるため返信は週明けになると思います。月曜か火曜には返信できると思いますのでもうしばらく待って頂けると助かります。どうぞよろしくお願い致します。
初めまして。グローバルナビについて、大変分かりやすく参考になります！！
質問なのですが、
メニュー１メニュー２メニュー３メニュー４メニュー５
上記のように「それぞれのボタンの幅も変えられる」ということは、
「画像もそれぞれメニュー１〜5によって割り当てることができる」ということでしょうか？
その場合のCSSはどのようになりますか？
各メニューに、それぞれ個別の画像（幅は196px 高さは90px 共通・リピートをしないでデザインは違うもの）を設置。
ロールオン時にも画像を変えたいので、合計10種類の画像を用意しているのですが、
CSSがわからず行き詰まっております。。(T ^ T)
よろしくお願いいたします！
＞ヨシオ様
わざわざ返信ありがとうございます。設定できて良かったです！私自身も勉強させてもらう事が多いのでまた何かありましたらコメント頂けるとありがたいです。こちらこそよろしくお願い致します。
こんばんわ＾＾
何度も失礼します。
上手に設置できました。
まだナビボタンの画像を用意していないので
設置には少し時間かかりますが
頑張って作成します。
この度は本当に有難うございました。
前々から悩んでいたのですが
こちらのサイトでこんなに早く解決できるとは＾＾
もっと早くこのサイトを見つければ良かったです。
今後も何かありましたら
宜しくお願い致します＾＾
早速の回答有難うございました。
クラス分けして名前付けしたものを
CSSに加える
なるほど良く判りました（*^_^*）
ボタンによっては
字数が多い場合があり
少ない字数のボタンは
幅を狭めたいと思いまして
本当に有難うございます。
試して出来ましたら
また報告の方伺いますm(__)m
※しげぞうさんの回答記事
(2014/09/17 PM1:55)に書かれている
設定で作成しています。
/* ヘッダー下にグローバルナビ(グローバルメニュー)を設置する */
の下のどの部分に先ほど教えて頂いたCSSタグを
埋め込めば良いんでしょうか
忙しくない時で構いませんので
教えて頂ければ有り難いです
＞ヨシオ様
コメントありがとうございます。面白い視点ですね、実際に私もやってみました。一応複雑になる部分があるので、先にコード自体は全部コピペしておいた方がいいと思います。
それでまずはフリースペースのメニュー部分の「li」タグに全てクラス名前を付けてみました。こんな感じです。
それぞれ「menu1」から「menu5」というクラス名を付けておきます。それで後はCSSでそれぞれの幅をしてあげるコードを追加する事にしました。
.menu1 a{width:100px !important;} .menu2 a{width:150px !important;} .menu3 a{width:230px !important;} .menu4 a{width:270px !important;} .menu5 a{width:230px !important;}これで幅をそれぞれ指定してあげる事ができました。「!important」はこのCSSを優先させる時に使う物です。これを付けないと反映されなかったで、一応付けてます。もっとスマートな方法があると思いますが、ちょっと複雑になるのでこれでOKかと思います。一度試してみてまたできない場合や分からない場合はコメント下さい。
980の幅で設定する場合
5つの場合はボタンの幅196と言う事は判りました
例えば５つをそれぞれ違うサイズに設定したいんですが
どうすれば良いんでしょうか？
例えばコチラのサイトでしたら
まとめページ 幅100
アフィリエイト初心者講座 幅150
おすすめの無料ツール 幅230
色々な副業を紹介 幅270
よくある質問 幅230
（計980）
こう言う感じで設定する場合のタグを
教えてください ヨロシクお願いします。
しげぞうさん 何度もありがとうございました
またわからないことがあったら教えてくださいね
よろしくお願いいたします
＞結月様
コメントありがとうございます。背景色ですが、CSSに追加したこのような部分を探して下さい。
/*▼▼▼ 色・文字装飾・背景など */ #headerMenu ul.menu li a{ /* 通常時 */ color:#ffffff; /* 文字色(白) */ font-weight:bold; /* 太字*/ text-decoration:none; /* 下線(なし) */ background-color:#1F5E73; /* 背景色(濃い青) */ background-image:url(); /* 背景画像 */ background-repeat:repeat; /* 背景画像繰り返し */ } となっている部分の背景色「background-color:」の「#1F5E73;」部分を好きな色の番号に変更したらOKです。前回はピンク「#ff99ff;」にしましたよね。この部分は好きな色を探して変更してみて下さいね。しげぞうさん
何度もありがとうございました
なんとか
できたのですが、
グローバルナビの色を変えるにはどうしたらいいのでしょうか。
緑はちょっと合わないように思うので変えたいのですが
教えてください。
よろしくお願いいたします
＞結月様
コメントありがとうございます。ホームページのjimdoの方は私は利用したことがないので、仕組みがよく分かっていないため、このjimdoのカスタマイズについてはちょっと回答できません。本当に申し訳ありません。その代わりアメブロの方ですが、これは確認したらナビはついてますね。２つの項目もきちんと表示されていますが、文字が途中で切れてます。このナビの１つ１つの幅は196pxですので、それ以上を超えると文字が隠れてしまいます。なのでもう少しコンパクトなメニュー名にする必要があります。
メニュー名をちょっとコンパクトに（短く）して再度F5を押してリロードして確かめて見てください。
しげぞうさん
ちゃんとできました。いつもありがとうございます
ところでまたいっぱい質問があるのですが
HPのことですが
現在もってるHPは
ですが、新しいHPも形的にはこういう風にしたいのですが、jimdo のサイトをみても同じようなのがないように思うのですがあるのでしょうか。こういうシンプルなのでいいのですが。
それからヘッダー画像を変えようと思ったのですが、
左上のちっちゃいカップの写真をヘッダーにしたいのですが、どうしていいのかわかりません。グローバルナビのつけ方も教えていただけると助かります。
ブログについての質問はグローバルナビの設置ができません
まだ２つしか枠を決めていないのであとは空白になりますが、グローバルナビの設置ができません。どこが間違っているか教えてください。
毎日申し訳ありませんが よろしくお願いいたします
＞結月様
コメントありがとうございます。他の方のCSS編集画面には入れないので推測なのですが、おそらく画像を指定する部分で記述ミスだと思います。background-image:urlの後に（）をつけて（）の中に画像のURLを入れます。こんな感じにしてみてください。
background-image: url(ここに画像のURL);
これで試してみて表示されるか確かめて見てください。
それからナビを５つ入れる場合ですが、このブログの横幅はデフォルトのままの980pxになっていると思いますので、メニューそれぞれの幅は980÷5で196pxになります。この「グローバルナビを設置するカスタマイズ」の記事通りにCSSを追加して、widthの部分だけを196pxに変更すれば行けると思います。
また分かりにくい部分や出来ない部分があればコメント頂けると助かります。
いつもお世話になりありがとうございます。
ブログにヘッダーをつけようと思ったのですが、なかなかうまくいかないです。調べてやっているのですが、なぜできないのでしょうか。
に
これをつけたいのですが、ここまで終わっていてつくはずなのにつかないのです。
教えてください。
また同ブログにグローバルナビを５つつけたいのですが、どうしたらいいのでしょうか
合わせて教えてください。
よろしくお願いいたします
＞結月様
コメントありがとうございます。新しくHP作成されるんですね！HPも拝見させて頂きましたが、ヘッダー部分もきれいなレイアウトになっていると思います。このヘッダー画像を変更したいということでしょうか？おそらく利用されているのが無料のホームページだと思いますが、私自身この無料ホームページサービスは利用したことがないのでちょっと詳しくは分かりませんが、もしヘッダー画像を変更したいというのであればおそらくHTMLから「emotionder-img」という部分を探してURLを変更する必要があると思います。CSSの記述に「emotion-header-img」の記述がないようなのでおそらくHTMLに書かれているのではないかと推測しています。
実際使った事がないので推測で申し訳ないのですが、先にバックアップをしておき、使い方画像をアップロード、そしてHTMLからこの「emotionder-img」を探して「src=”http://～”」となっている部分のURLを画像のURLに変更してみて試してみるといいかもしれません。
こんばんは
お久しぶりです。
申し訳ありませんが、また質問させてください。
新たにもう一つブログとHPを作成することになり、現ブログも内容を変えたいと思っていますので、いろいろと教えていただけますでしょうか。
まず、ブログやHPに載せるヘッダーを自分で気にいったデザインのを載せたいのですが、以前うまく調整できずそのままになっています。（HPの方ですが）
どのように載せたらいいのか教えてください。
ちなみに ブログは
HPは
です。HPのヘッダーは変えたいと思っていて、ブログは新ブログで新しいのを入れたいと思っています。
よろしくご指導ください
＞結月様
わざわざありがとうございます。私のほうこそ勉強にもなりますので助かります。こちらこそよろしくお願い致します。