今回はブログに グローバルナビゲーション（以下、グロバボタン） と言われるボタンを設置する方法の第二弾です♪
グロバボタンは特定の外部サイトや、読者さんに特に読んでほしいブログ記事へ一発で飛べるように設置するボタンのことです。
前回の解説記事では、ボタンの上にマウスを置いたときに、ボタンが少しだけ動く方法を書きました。
http://ameblo.jp/k-style4183/entry-12063998096.html
今回は、ボタンにマウスを置いたときに、ボタンの色や文字の色だけが変化する作り方をご案内します♪
------------------------------------------------------------------------
グロバボタンの設置はアメブロの 「カスタム可能スキン」 の中にある
【CSS編集用デザイン】 を使わないと設置できませんのでご注意を！
------------------------------------------------------------------------
まずはボタンを作ります。
ボタン作成は Photoshop などの画像編集アプリケーションが必要です。
無料の画像ソフトでも作れますが、より厳密なレイアウトができるように
ガイド線が引ける機能を備えたソフトがおすすめです。
まずはボタンを１個作ります。
高さは自由で構いませんが、幅は必ずご自分のブログのヘッダー画像の幅 ÷（ボタンの数）にしてください。
例えばヘッダー画像の幅が980pxで、5つのボタンを並べたい場合は
980÷5=196 なので、1個のボタン幅は196pxで作ればOKです♪
（僕の場合はピグ友さんへの提供ブログはヘッダー幅を1040pxで作っていますので1個のボタン幅は208pxで作る機会が多いです）
1個目のボタンは、マウスを置く前のボタンとして作ります。
そしてマウスを置いたあとのボタンとして2個目を作ります。
そしてボタンを並べるための新規カンバスを作成します。
------------------------------------------
今回はボタン5個の場合での解説となります。
------------------------------------------
この時、カンバスの高さはボタン2個分の高さで作ってください。
Photoshopでは写真のように 「ガイド線」 を引くことができますので便利です♪
ボタンを並べた状態です。
上下・左右のボタン位置が狂わないように、きっちりと正確に並べてください！
たとえ 1px でも位置がずれると…
ブログに設置してマウスを置いたときにボタンが動いてしまいます (;^_^A
それが意図的な表現であればOKですが、そうでない場合は
単に不細工に見えるだけですのでｗ
グロバナビが完成すれば画像としてPCの任意のフォルダに保存します♪
■■ ここからはCSSでの解説です ■■
以下のCSSコードを全てコピーし、CSS編集枠の一番下にペーストしてください。
黄色字の部分と◯◯◯の部分は書き換えてください。
書き換えの内容はピンク色のコメントを参考にしてください。
/* ■■■■■■■■■■ グローバルナビゲーション ■■■■■■■■■■*/
#ameNavi {
top:-◯◯◯px;/*グロバナビの表示位置（上下）*/
left:◯◯◯px;/*グロバナビの表示位置（左右）*/
position:absolute;
width:100%;
}
.freespaceArea #ameNavi ul#ameTopNavi {
height:◯◯px;/*ナビ１行分の高さを指定*/
width:◯◯◯◯px;/*ナビの幅を指定*/
background:url(画像のURL) no-repeat left top;/*画像URLを指定*/
padding:0px 0px 0px 0px;
margin:0 auto;
}
.freespaceArea #ameNavi ul#ameTopNavi li{
height: ◯◯px;/*ナビ１行分の高さを指定*/
list-style: none;
display: block;
margin: 0px;
padding:0px;
float: left;
text-indent: -9999px;
}
.freespaceArea #ameNavi ul#ameTopNavi li a{
height: ◯◯px;/*ナビ１行分の高さを指定*/
background:url(画像のURL) no-repeat left top;/*画像URLを指定*/
display: block;
text-decoration: none;
padding: 0px;
overflow:hidden;
outline:none;
}
.freespaceArea #ameNavi ul#ameTopNavi li#tn1 { width: ◯◯◯px; }/*項目１のボタン幅を設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn2 { width: ◯◯◯px; }/*項目２のボタン幅を設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn3 { width: ◯◯◯px; }/*項目３のボタン幅を設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn4 { width: ◯◯◯px; }/*項目４のボタン幅を設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn5 { width: ◯◯◯px; }/*項目５のボタン幅を設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn1 a { background-position: 0px 0; }
.freespaceArea #ameNavi ul#ameTopNavi li#tn2 a { background-position: -◯◯◯px 0; }/*項目１のボタン幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn3 a { background-position: -◯◯◯px 0; }/*項目１から２の合計ボタン幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn4 a { background-position: -◯◯◯px 0; }/*項目１から３の合計ボタン幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn5 a { background-position: -◯◯◯px 0; }/*項目１から４の合計ボタン幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn1 a:hover { background-position: 0px 100%; }
.freespaceArea #ameNavi ul#ameTopNavi li#tn2 a:hover { background-position: -◯◯◯px 100%; }/*項目１のボタン幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn3 a:hover { background-position: -◯◯◯px 100%; }/*項目１から２の合計幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn4 a:hover { background-position: -◯◯◯px 100%; }/*項目１から３の合計幅をマイナス付けて設定*/
.freespaceArea #ameNavi ul#ameTopNavi li#tn5 a:hover { background-position: -◯◯◯px 100%; }/*項目１から４の合計幅をマイナス付けて設定*/
書き換える場所が多いですが、ほとんど同じ数字を書き入れるだけですので頑張ってくださいｗ
特に最後のほう、わかりにくいと思いますので
1個のボタン幅を208pxで作った場合のCSSの書き込み例がコレです↓↓↓
■■ ここからはHTMLの解説 ■■
グロバボタンはCSSにコードを書いただけではブログに表示されないため
以下のHTMLタグを全てコピーし、アメブロの 「フリースペース」 へ貼り付けてください。
黄色字の部分と◯◯◯の部分は書き換えてください。
※ ◯◯◯の部分は各ボタンに書いた文字と同じでOK。
例：TOP、 プロフィールなど
<div id="ameNavi"><ul id="ameTopNavi"><li id="tn1">
<a href="リンク先URL">◯◯◯</a></li><li id="tn2">
<a href="リンク先URL">◯◯◯</a></li><li id="tn3">
<a href="リンク先URL">◯◯◯</a></li><li id="tn4">
<a href="リンク先URL">◯◯◯</a></li><li id="tn5">
<a href="リンク先URL">◯◯◯</a></li></ul>
<!-- / #ameNavi --></div>
書き換えが終われば改行を消して 「保存」 を押す！
※ 改行を消さないと正しく表示されませんのでご注意を！
これで完了です (●´ω｀●)ゞ
おまけのプロ技として♪
ボタンを押した時に、そのページをブラウザの別タブで開かせるように指定したい場合は
target="_blank" ←このタグを
<a href="リンク先URL"target="_blank">◯◯◯</a></li><li id="tn2">
↑ この場所に追記すればOKです。
以上になります (*ﾟｰﾟ)ゞ