このブログでは、ヘッダーの下にリンクがいくつかありますよね。
これはグローバルメニューと言うのですが、今日はこのヘッダー下のリンクを設置する方法を解説していきます。
まず、下記の画像をご覧になってください。
わけのわからない数字が入っていて頭が痛くなるかもしれませんがそこは気にしなくていいです。
これから具体的に理解できると思います。
まず、こちらで画像を作成したので下記からダウンロードしていってください。
>> 画像１のダウンロードはコチラ
>> 画像２のダウンロードはコチラ
>> 画像３のダウンロードはコチラ
そうしたら、画像をアップロードして下記のタグをＣＳＳの一番下に張りＵＲＬを貼り付けてください。
/* ヘッダー下にグローバルメニューを設置する方法 */
/*▼▼▼ 変更しない ▼▼▼*/
#frame{ position:relative; } /* おまじない */
div#headerMenu{
position:absolute;
margin:0;
padding:0;
}
div#headerMenu ul.menu{
margin:0;
padding:0;
list-style: none;
}
div#headerMenu ul.menu li{
display:inline;
}
div#headerMenu ul.menu li a{
display:block;
float:left;
margin:0;
padding:0;
white-space:nowrap;
overflow:hidden;
text-align:center;
}
/*▲▲▲ 変更しない ▲▲▲*/
/*▼▼▼ サイズ・位置など ▼▼▼*/
#overHeader{
height:252px; /* ヘッダーの高さ */
}
div#headerMenu{
top:252px; /* 上下位置調整 */
left:0px; /* 左右位置調整 */
width:900px; /* メニューの幅 */
background-image:url(画像１（ボタンの背景）); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
div#headerMenu ul.menu li a{
width:160px; /* ボタンの幅 */
font-size:14px; /* ボタンの文字サイズ */
padding-top:18px; /* ボタンの文字の縦位置調整 */
height:31px; /* ボタン高さ - 文字縦位置 */
}
/*▲▲▲ サイズ・位置など ▲▲▲*/
/*▼▼▼ ボタンの色・文字装飾・背景など ▼▼▼*/
div#headerMenu ul.menu li a{ /* 通常時 */
color:#336699; /* 文字色(青) */
font-weight:bold; /* 太字(なし) */
text-decoration:none; /* 下線(なし) */
background-color:#ffffff; /* 背景色*/
background-image:url(画像２（ボタン通常時）); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
div#headerMenu ul.menu li a:hover{ /* カーソルが乗った時 */
color:#ffffff; /* 文字色(白) */
font-weight:bold; /* 太字(あり) */
text-decoration:none; /* 下線(あり) */
background-color:#cc0033; /* 背景色 */
background-image:url画像３（マウスが上に来たとき）); /* 背景画像 */
background-repeat:repeat; /* 背景画像繰り返し */
}
/*▲▲▲ ボタンの色・背景など ▲▲▲*/
|
そうしたら、次は最初に横幅をあわせていきます。
ここでご紹介しているテンプレートは900pxで設定されておりますので、
ブログの横幅を変えていない場合は900pxの部分を740pxに変更してください。
そうしたら次に、
ボタンの高さがあっていないと思うので
252pxという数字が入っている部分が２つあると思うのでこれの高さをあせてください。
表示を確認しながら数字を調整していけば確実です。
そして次、
次はテキストの色を変更していきます。
赤色のテキストの部分に「#336699」というのが２つあるのですがここでテキストの色を設定していきます。
＞＞コチラをクリック
するとカラーを選べるので#から英数字まで好きな色を選んで変更してください。
それが終わりましたら、
デザイン → サイドバーの設定 → フリースペースに
<div id="headerMenu"><!----><ul class="menu"><!----><li><a href="サイトＵＲＬ１">リンクの名前１</a></li><!----><li><a href="サイトＵＲＬ２">リンクの名前２</a></li><!----><li><a href="サイトＵＲＬ３">リンクの名前３</a></li><!----><li><a href="サイトＵＲＬ４">サイトの名前４</a></li>
<!----></ul></div>
|
これだけできれば十分です。
もっと詳しくは動画のほうで解説しておりますのでそちらからご覧になってください。
>>動画版はコチラからご覧ください。（アメンバー登録が必要です。）
