スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/63-8433f6ce

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

No title

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

おおっ「グローバルメニュー」記事にされたんですね(^-^)

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

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

ありがとうございます。


応援ポチ。
  • 2014-12-04 17:31
  • じゅんぴーAさん@管理人
  • 編集

Re: No title

> じゅんぴーAさん

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

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

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


てか... ブログのURLが入ってないですね...w
  • 2014-12-04 18:29
  • あると♪さん@管理人
  • 編集

No title

あると♪さん

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

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

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

応援ポチです!
  • 2014-12-04 20:52
  • T.Oさん@管理人
  • 編集

Re: No title

> T.Oさん

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

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

もっと文章が上手く書けるよう今後も頑張ります♪
  • 2014-12-04 21:17
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-12-04 22:56
  • -さん@管理人
  • 編集

グローバルメニュー

あると♪さん

先程はコメントありがとうございました。
今度はグローバルリストですね。
これ、じゅんぴーAさんが付けていたので
私も付けたいと思っていました。笑
でも、明日は付けません。笑
近々付けます。(本当か?)
  • 2014-12-05 03:29
  • girigiri26さん@管理人
  • 編集

Re: グローバルメニュー

> girigiri26さん

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

是非グローバルメニューもどうですか?ww
「basic_white」なら“記事一覧”の部分を増やせばいいだけなんですがねw
  • 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です♪

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

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

どんな感じになるか楽しみにしてますね^^
  • 2014-12-05 20:36
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

グローバルナビゲーション(Global Navigation) CSSを変更するだけ♪色んなサンプルを作ってみた

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






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


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

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

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

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

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


▼また今回のグローバルナビゲーションの基本構造は以下のようになってます♪
以下の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です♪


【仕様】
①マウスオーバーで背景色と文字色が変更されます。
②それぞれのメニューに枠線を付けてます。
③メニュー数が5つなので横幅はそれぞれ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%;/* 1つのメニューの横幅(メニュー数を変更した場合等は調整が必要) */
}
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です♪


【仕様】
①マウスオーバーで背景色と文字色が変更され、テキストが太字になります。
②メニュー両端の角を丸くしてます。
③メニュー数が5つなので横幅はそれぞれ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%;/* 1つのメニューの横幅(メニュー数を変更した場合等は調整が必要) */
}
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 」を使用
③メニュー数が5つなので横幅はそれぞれ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%;/* 1つのメニューの横幅(メニュー数を変更した場合等は調整が必要) */
}
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.画像を使ったメニュー


せっかく画像を使うので、ちょっとかわいい感じ?にしてみました♪w
※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対策にもなるなんて超お得っ!!( ̄ε ̄〃)b

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


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

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

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


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



【2014年12月5日追記】

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

▼グローバルナビゲーションとパンくずリストを設置したサンプル
サンプル・デモページ用のテストブログ
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-12-04 | HTML・CSS | コメント(9) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/63-8433f6ce

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

- TrackBack -


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

- Comment -

No title

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

おおっ「グローバルメニュー」記事にされたんですね(^-^)

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

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

ありがとうございます。


応援ポチ。
  • 2014-12-04 17:31
  • じゅんぴーAさん@管理人
  • 編集

Re: No title

> じゅんぴーAさん

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

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

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


てか... ブログのURLが入ってないですね...w
  • 2014-12-04 18:29
  • あると♪さん@管理人
  • 編集

No title

あると♪さん

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

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

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

応援ポチです!
  • 2014-12-04 20:52
  • T.Oさん@管理人
  • 編集

Re: No title

> T.Oさん

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

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

もっと文章が上手く書けるよう今後も頑張ります♪
  • 2014-12-04 21:17
  • あると♪さん@管理人
  • 編集

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
  • 2014-12-04 22:56
  • -さん@管理人
  • 編集

グローバルメニュー

あると♪さん

先程はコメントありがとうございました。
今度はグローバルリストですね。
これ、じゅんぴーAさんが付けていたので
私も付けたいと思っていました。笑
でも、明日は付けません。笑
近々付けます。(本当か?)
  • 2014-12-05 03:29
  • girigiri26さん@管理人
  • 編集

Re: グローバルメニュー

> girigiri26さん

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

是非グローバルメニューもどうですか?ww
「basic_white」なら“記事一覧”の部分を増やせばいいだけなんですがねw
  • 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です♪

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

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

どんな感じになるか楽しみにしてますね^^
  • 2014-12-05 20:36
  • あると♪さん@管理人
  • 編集

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

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

White
Black

プロフィールClick

プロフィール画像

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

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

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

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。