FC2ブログにグローバルメニューを付ける方法

ホーム > ブログカスタマイズ > HTML・CSS > FC2ブログにグローバルメニューを付ける方法

FC2ブログにグローバルメニューを付ける方法

2014.12.04

CSSを変更するだけ♪色んなサンプルを作ってみた

前回「FC2ブログにパンくずリストを付ける方法」って記事を書いたので同じような内容かな？とも思ったけど... まぁ～いっか♪ｗ
と言う事で、記事タイトルは “パンくずリスト” の部分を “グローバルメニュー” にしただけと言う何とも安易な感じですっ!!ｗ (*￣з￣)ｂ
※ちなみに手抜きじゃないですよ？... これでもバッチリ全力です♪ｗ
さすがに内容まで似たり寄ったりだとアレなので、今回はCSSを変更するだけで済むサンプルをいくつか作ってみました♪

色んなグローバルナビゲーション

1.設置するメリットと基本構造

まずはグローバルナビゲーション（またはグローバルメニュー）とは何か？って事からご説明♪

【グローバルナビゲーションとは】
サイト（ブログ）の主要なコンテンツを表わす為に全ページに共通して表示する案内メニューの事です。

▼こんな感じでページの上部等に表示されてるメニューです♪

このグローバルナビゲーションを設置する事で、サイト（ブログ）内のコンテンツ構成を分かりやすくすると同時に、注目させたいコンテンツ（カテゴリや記事など）を閲覧者さんにアピールする事が出来るので、閲覧者さんが他のページも見てくれる可能性が上がり、ユーザービリティの向上とPV数の増加が期待出来ます♪（アレ？何か前回の記事と同じような... まぁちっちゃい事は気にしないっ!!ｗ(￣▽￣;)ゞ )

と言う感じで、前回のパンくずリスト同様SEO対策にも効果的との事なので、まだ設置してない方は是非設置を検討してみてはいかがでしょうか？(￣ε￣〃)ｂ

▼また今回のグローバルナビゲーションの基本構造は以下のようになってます♪
以下のHTMLソースをコピーし、テンプレートのHTML内の任意の場所（グローバルナビゲーションを表示する場所）に貼り付けて「リンク先URL」と「メニュー○」の部分を変更するだけでOKです♪
（色合い等デザインに関してはスタイルシート（CSS）で設定します。）

<!-- ▼ グローバルナビゲーション ▼ -->
<nav id="global-navi">
<ul>
<li><a href="http://～リンク先URL～">メニュー1</a></li>
<li><a href="http://～リンク先URL～">メニュー2</a></li>
<li><a href="http://～リンク先URL～">メニュー3</a></li>
<li><a href="http://～リンク先URL～">メニュー4</a></li>
<li><a href="http://～リンク先URL～">メニュー5</a></li>
</ul>
</nav>
<!-- ▲ グローバルナビゲーション ▲ -->

※表示するメニューの数は「<li> ～ </li>」を “削除” または “追加” で調整出来ます。
お好みで表示したいメニュー名とリンク先URLを記述して下さい♪

このHTMLの基本構造に対して、以下のようにいくつかCSSのパターンを作ってみました♪
適用させるスタイルシート（CSS）によってデザインを簡単に変更出来ます♪(≧∇≦)b

このページのトップへ

2.シンプルなメニュー

まずは上記にも表示してるシンプルなタイプです。
※サンプルとしてメニュー名とリンク先URLを記述してます。（クリックするとページが変わります）
※HTMLの部分は上記の基本構造と同じでOKです♪

【仕様】
①マウスオーバーで背景色と文字色が変更されます。
②それぞれのメニューに枠線を付けてます。
③メニュー数が５つなので横幅はそれぞれ20％で指定しています。

▼ このメニューのCSS ▼

　← クリックするとソースが表示されます。

nav#global-navi ul{
width:100%;
max-width: 1000px;/* メニュー全体の最大横幅（ブログの横幅に合わせて調整） */
list-style:none;
margin: 0 auto;
padding: 0;
}
nav#global-navi ul li{
display: block;
float: left;
width:20%;/* １つのメニューの横幅（メニュー数を変更した場合等は調整が必要） */
}
nav#global-navi ul li a{
display: block;
text-align: center;
padding: 5px 0;
background: #EEE;/* 背景色 */
color: #333;/* 文字色 */
text-decoration: none;
border-top:1px #AAA solid;/* 枠線上の太さ・色・線の種類 */
border-left:1px #AAA solid;/* 枠線左の太さ・色・線の種類 */
border-bottom:1px #AAA solid;/* 枠線下の太さ・色・線の種類 */
box-sizing: border-box;
}
nav#global-navi ul li:last-child a{
border:1px #AAA solid;/* メニューの一番最後の枠線の太さ・色・線の種類 */
}
nav#global-navi ul li a:hover{
background: #555;/* マウスオーバー時の背景色 */
color: #FFF;/* マウスオーバー時の文字色 */
}
nav#global-navi:after {
content: "";
clear: both;/* 回り込みの解除 */
display: block;
}

このページのトップへ

3.両端が角丸のメニュー

※サンプルとしてメニュー名とリンク先URLを記述してます。（クリックするとページが変わります）
※HTMLの部分は上記の基本構造と同じでOKです♪

【仕様】
①マウスオーバーで背景色と文字色が変更され、テキストが太字になります。
②メニュー両端の角を丸くしてます。
③メニュー数が５つなので横幅はそれぞれ20％で指定しています。

▼ このメニューのCSS ▼

　← クリックするとソースが表示されます。

nav#global-navi ul{
width:100%;
max-width: 1000px;/* メニュー全体の最大横幅（ブログの横幅に合わせて調整） */
list-style:none;
margin: 0 auto;
padding: 0;
}
nav#global-navi ul li{
display: block;
float: left;
width:20%;/* １つのメニューの横幅（メニュー数を変更した場合等は調整が必要） */
}
nav#global-navi ul li a{
display: block;
text-align: center;
padding: 5px 0;
background: #bbe4ff;/* 背景色 */
color: #333;/* 文字色 */
text-decoration: none;
}
nav#global-navi ul li:first-child a{
border-radius:10px 0 0 10px;/* 一番左のメニューの角を丸くしてます */
}
nav#global-navi ul li:last-child a{/* 一番右のメニューの角を丸くしてます */
border-radius:0 10px 10px 0;
}
nav#global-navi ul li a:hover{
background: #09f;/* マウスオーバー時の背景色 */
color: #FFF;/* マウスオーバー時の文字色 */
font-weight:bold;/* マウスオーバー時テキストを太字 */
}
nav#global-navi:after {
content: "";
clear: both;/* 回り込みの解除 */
display: block;
}

このページのトップへ

4.グラデーションを使ったメニュー

※サンプルとしてメニュー名とリンク先URLを記述してます。（クリックするとページが変わります）
※HTMLの部分は上記の基本構造と同じでOKです♪

【仕様】
①マウスオーバーで背景色と文字色が変更されます。
②背景色がグラデーションになってます。「Ultimate CSS Gradient Generator 」を使用
③メニュー数が５つなので横幅はそれぞれ20％で指定しています。

▼ このメニューのCSS ▼

　← クリックするとソースが表示されます。

nav#global-navi ul{
width:100%;
max-width: 1000px;/* メニュー全体の最大横幅（ブログの横幅に合わせて調整） */
list-style:none;
margin: 0 auto;
padding: 0;
}
nav#global-navi ul li{
display: block;
float: left;
width:20%;/* １つのメニューの横幅（メニュー数を変更した場合等は調整が必要） */
}
nav#global-navi ul li a{
display: block;
text-align: center;
text-decoration: none;
padding: 5px 0;
color: #FFF;/* 文字色 */
border-top:1px #888 solid;/* 枠線上の太さ・色・線の種類 */
border-left:1px #888 solid;/* 枠線左の太さ・色・線の種類 */
border-bottom:1px #888 solid;/* 枠線下の太さ・色・線の種類 */
box-sizing: border-box;
background: rgb(102,102,102);/* 背景色 23行目～30行目*/
background: -moz-linear-gradient(top, rgba(102,102,102,1) 0%, rgba(45,45,45,1) 50%, rgba(9,9,9,1) 51%, rgba(54,54,54,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,102,102,1)), color-stop(50%,rgba(45,45,45,1)), color-stop(51%,rgba(9,9,9,1)), color-stop(100%,rgba(54,54,54,1)));
background: -webkit-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(45,45,45,1) 50%,rgba(9,9,9,1) 51%,rgba(54,54,54,1) 100%);
background: -o-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(45,45,45,1) 50%,rgba(9,9,9,1) 51%,rgba(54,54,54,1) 100%);
background: -ms-linear-gradient(top, rgba(102,102,102,1) 0%,rgba(45,45,45,1) 50%,rgba(9,9,9,1) 51%,rgba(54,54,54,1) 100%);
background: linear-gradient(to bottom, rgba(102,102,102,1) 0%,rgba(45,45,45,1) 50%,rgba(9,9,9,1) 51%,rgba(54,54,54,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#666666', endColorstr='#363636',GradientType=0 );
}
nav#global-navi ul li:last-child a{
border:1px #888 solid;/* メニューの一番最後の枠線の太さ・色・線の種類 */
}
nav#global-navi ul li a:hover{
color: #333;/* マウスオーバー時の文字色 */
background: rgb(255,255,255);/* マウスオーバー時の背景色 37行目～44行目*/
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(241,241,241,1) 50%, rgba(225,225,225,1) 51%, rgba(246,246,246,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(241,241,241,1)), color-stop(51%,rgba(225,225,225,1)), color-stop(100%,rgba(246,246,246,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(241,241,241,1) 50%,rgba(225,225,225,1) 51%,rgba(246,246,246,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );
}
nav#global-navi:after {
content: "";
clear: both;/* 回り込みの解除 */
display: block;
}

このページのトップへ

5.画像を使ったメニュー

せっかく画像を使うので、ちょっとかわいい感じ？にしてみました♪ｗ
※CSSスプライトで画像を上にずらし、さらにCSSの「transition」で時間変化を加えてます。
※HTMLの基本構造は上記と同じですがメニューそれぞれに画像を入れてます。

【仕様】
①マウスオーバーで画像が上にずれて “くるんっ♪” って感じになります。
②上記のサンプルとは異なり最後にお問い合わせのメニューを入れてます。「FC2メールフォーム」
③両端のメニュー画像の横幅が少し広いのでそれぞれ調整してます。

▼ このメニューのHTMLとCSS ▼

　← クリックするとソースが表示されます。

<!-- ▼ グローバルナビゲーション ▼ -->
<nav id="global-navi">
<ul>
<li><a href="http://interest2014.blog.fc2.com/">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/sample1.gif" 
alt="トップページ"/></a></li>
<li><a href="http://interest2014.blog.fc2.com/blog-entry-34.html">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/sample2.gif" 
alt="ご案内"/></a></li>
<li><a href="http://interest2014.blog.fc2.com/blog-category-1.html">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/sample3.gif" 
alt="カテゴリ"/></a></li>
<li><a href="http://interest2014.blog.fc2.com/?all">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/sample4.gif" 
alt="全記事一覧"/></a></li>
<li><a href="http://form1.fc2.com/form/?id=935253" class="contact">
<img src="http://blog-imgs-46.fc2.com/i/n/t/interest2014/sample5.gif" 
alt="お問い合わせ"/></a></li>
</ul>
</nav>
<!-- ▲ グローバルナビゲーション ▲ -->

nav#global-navi ul{
width:100%;
max-width: 1000px;/* メニュー全体の最大横幅（ブログの横幅に合わせて調整） */
list-style:none;
margin: 0 auto;
padding: 0;
}
nav#global-navi ul li{
display: block;
float: left;
width:130px;/* 両端以外のメニューの横幅（表示箇所に合わせて調整） */
}
nav#global-navi ul li:first-child,/* 両端のメニューの横幅（ここも調整） */
nav#global-navi ul li:last-child { width:140px; }
nav#global-navi ul li a {
display: block;
text-align:center;
height: 30px;/* メニューの高さ（画像のサイズに合わせて調整） */
overflow: hidden;/* はみ出た部分は非表示 */
}
nav#global-navi ul li a img{
-webkit-transition: 0.2s;/* 時間変化 */
transition: 0.2s;/* 時間変化 */
}
nav#global-navi ul li a img:hover{
margin-top: -30px;/* マウスオーバーで画像を上にずらす */
}
nav#global-navi:after {
content: "";
clear: both;/* 回り込みの解除 */
display: block;
}

このページのトップへ

その他にも色んなエフェクトを付けてみたり、ボタン風のメニューにしてみたり、背景画像だけを切り替えたり等など工夫次第でオリジナルのかっこいいメニューにも、かわいいメニューにも出来るし、閲覧者さんからしても便利で、SEO対策にもなるなんて超お得っ!!(￣ε￣〃)ｂ

また「HTMLとCSSで作るドロップダウンメニュー」の方法を組み合わせる事で、グローバルナビゲーションバーをドロップダウンメニュー（親子カテゴリ対応）にする事も可能なので、たくさんのメニューを表示したいブログにおすすめですっ!!(≧∇≦)b

前回のパンくずリストと同じように、実際に設置する際HTMLのどこを編集すれば良いかが一番の問題になるかと思いますが... パンくずリストの上や、ブログタイトルの下など出来るだけ画面の上部に表示する方が良いと思います♪（テンプレートを編集される際は事前に複製を作りバックアップを取ると安心です）

もし、全然分からぬっ!!って場合は... ご相談下さいｗ(￣▽￣;)

あと、いつもなら「basic_white」のカスタマイズ用ブログの方にサンプルとして設置してみるとこなんですが「basic_white」は最初から画面上部にメニューが用意されてるので... 今回はいいかな～ってｗｗ
（何度も言うけど手抜きじゃないよっ!!ｗｗ）

って事で今回はブロ友 “じゅんぴーAさん” の記事
「「ブログ改造」第一弾　「グローバルメニューボタン」の設置」に影響されて書いた...ｗ
グローバルナビゲーション（グローバルメニュー）についての記事でしたっ!!(￣^￣)ゞ

【2014年12月5日追記】

「設置方法が分からない」「メニューの数を増やしたい（減らしたい）」「色合いを変更したい」
「パンくずリストも一緒に設置したい」等など、お気軽にご相談頂ければ以下のサンプルページのように「ご指定のテンプレート」に合わせて設置場所や色合いの調整など致します♪(￣ε￣〃)ｂ

▼グローバルナビゲーションとパンくずリストを設置したサンプル
「サンプル・デモページ用のテストブログ」

ブログランキングに参加中♪
良かったらポチっとお願いします

この記事にトラックバックする(FC2ブログユーザー) トラックバックって何！？って場合はこちら: http://interest2014.blog.fc2.com/tb.php/63-8433f6ce

「FC2ブログにグローバルメニューを付ける方法」へのトラックバック

- TrackBack -

「FC2ブログにグローバルメニューを付ける方法」へのコメント

- Comment -

No title

あると♪さんこんにちはヽ(^o^)丿

おおっ「グローバルメニュー」記事にされたんですね（＾－＾）

私もあるとさんバージョンに乗り換えようと思いますｄ(^.^)
グラデーションの入ったやつがいいですね。

私が悩んだ末に付けたのは微妙なものだったので
これで解決できます(^o^)

ありがとうございます。

応援ポチ。

2014-12-04 17:31
じゅんぴーAさん@管理人
編集

Re: No title

> じゅんぴーAさん

じゅんぴーAさんの記事に影響されちゃいましたｗ

それぞれ色合いはお好みで調整してみて下さいね♪
グラデーションもホント細かく色んな色に出来るのでイイ感じですよ♪ｄ(≧∀≦)ｂ

応援もありがとうございます♪Σd(≧ω≦*)

てか...　ブログのURLが入ってないですね...ｗ

2014-12-04 18:29
あると♪さん@管理人
編集

No title

あると♪さん

いつも有益な記事更新を影ながら拝見しております。

多くの方々の役に立つ記事には圧巻です！

今後益々のご活躍に期待しております。

応援ポチです！

2014-12-04 20:52
T.Oさん@管理人
編集

Re: No title

> T.Oさん

コメントありがとうございます♪

お役に立ててるかな？ｗｗ
いつもどう説明しようか悩みながらなので...(￣ε￣〃)ゞ

もっと文章が上手く書けるよう今後も頑張ります♪

2014-12-04 21:17
あると♪さん@管理人
編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2014-12-04 22:56
-さん@管理人
編集

グローバルメニュー

あると♪さん

先程はコメントありがとうございました。
今度はグローバルリストですね。
これ、じゅんぴーAさんが付けていたので
私も付けたいと思っていました。笑
でも、明日は付けません。笑
近々付けます。（本当か？）

2014-12-05 03:29
girigiri26さん@管理人
編集

Re: グローバルメニュー

> girigiri26さん

いえいえ♪ｗ
こちらこそ、ありがとうございました♪

是非グローバルメニューもどうですか？ｗｗ
「basic_white」なら“記事一覧”の部分を増やせばいいだけなんですがねｗ

2014-12-05 08:24
あると♪さん@管理人
編集

No title

めっちゃタイムリーな記事です(*´▽｀*)
グラデーションのかっこいい！！
けど、私のテンプレートとテイストが違いすぎるというジレンマ。。。
「画像を使ったメニュー」に近いグローバルナビゲーションを作ってみます。近々　笑

2014-12-05 20:18
ひーさんさん@管理人
編集

Re: No title

> ひーさんさん

ありがとうございます♪

記事中のメニューはあくまでもサンプルなので、
グラデーションの色合いはジェネレーターを使えば簡単に好みの色に変更出来ます♪

■Ultimate CSS Gradient Generator
http://www.colorzilla.com/gradient-editor/

上記のサイトで好きなグラデーションを作り、画面右側のCSSのソースをコピーして
グローバルメニューのCSSソース内の「background:」の部分に貼り付けるだけでOKです♪

よく分からないって場合は、ひーさんさんのブログのベースカラーに合わせて
グラデーションを作りますのでお気軽にご相談下さいｗ(￣ε￣〃)ｂ

また、もちろん画像を使ったパターンでも良いと思います♪ｗ

どんな感じになるか楽しみにしてますね^^

2014-12-05 20:36
あると♪さん@管理人
編集

コメントの投稿

- Post a Comment -

▼クリックすると配色が変更されます　
このボタンの設置方法はこちら♪

White

Black

プロフィールClick

Author：あると♪
ブログ開始：日目
公開記事数：件

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

【当ブログのご案内は こちら♪ 】

カテゴリClick

つぶやき(12)

ブログカスタマイズ(45)

テスト的な感じ(1)

テスト的な感じ2(0)
のカテゴリをクリックでツリー表示します

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

いつもチェックしてるブログ＆便利なツールやサービス

- Link -

Font Awesome
便利なアイコン型Webフォント
ブログ内の参考記事はこちら
Stripe Generator
色んなストライプ柄を簡単作成
ブログ内の参考記事はこちら
Gyazo
スクリーンショットを簡単に共有
ブログ内の参考記事はこちら
0to255
指定した色のグラデーションを表示
Ultimate CSS Gradient Generator
CSSのグラデーションを簡単作成
Css Text Shadow
text-shadowを使って文字を装飾

INTEREST

FC2ブログにグローバルメニューを付ける方法

色んなグローバルナビゲーション

1.設置するメリットと基本構造

2.シンプルなメニュー

3.両端が角丸のメニュー

4.グラデーションを使ったメニュー

5.画像を使ったメニュー

「FC2ブログにグローバルメニューを付ける方法」へのトラックバック

「FC2ブログにグローバルメニューを付ける方法」へのコメント

No title

Re: No title

No title

Re: No title

管理人のみ閲覧できます

グローバルメニュー

Re: グローバルメニュー

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ＆便利なツールやサービス

INTEREST

FC2ブログにグローバルメニューを付ける方法

色んなグローバルナビゲーション

1.設置するメリットと基本構造

2.シンプルなメニュー

3.両端が角丸のメニュー

4.グラデーションを使ったメニュー

5.画像を使ったメニュー

「FC2ブログにグローバルメニューを付ける方法」へのトラックバック

「FC2ブログにグローバルメニューを付ける方法」へのコメント

No title

Re: No title

No title

Re: No title

管理人のみ閲覧できます

グローバルメニュー

Re: グローバルメニュー

No title

Re: No title

コメントの投稿

プロフィールClick

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

スポンサーリンクClick

このページの目次Click

人気ランキングClick

いつもチェックしてるブログ ＆ 便利なツールやサービス

いつもチェックしてるブログ＆便利なツールやサービス