ブログタイトル下にメニューバーを設置してみました☆


前々からメニューバーを付けたかったのですが

中途半端な記事が多かったのでなかなか出来ませんでした(^_^;)

やっと設置出来るくらいにはなったのですが、まだ準備中の記事も多いので

おいおい追加していきたいと思います(^_^;) 気長に見守ってやって下さい


毎日記事更新している↓

げん玉MONOWECナビ「クリックくじ」モッピークイズフルーツメールスクラッチ

本日のお役立ち情報」の欄に入っていますのでそちらを見て頂けたらと思います☆

ビンゴ情報や他にもありましたら、そのうちまたちょこちょこと追加変更はしていくつもりです♪


見にくいところとかありましたら、意見を頂けたらと思います☆


メニューバーを付けてみたい方はこちらを参考に~

次の記述を設置したい箇所のHTMLに追加 (赤い部分は各自希望のURL、リンク名に変えてください。)

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事1</a></li>
<li><a href="<%url>blog-entry-2.html">記事2</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ1</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ2</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ3</a></li>
</ul>
<!--▲ メニューバー ▲-->

次の記述をスタイルシートの末尾追加

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

メニューバーを付けてみたい方は、詳しいことが書かれていますので

FC2ブログのテンプレート工房」さんの>>こちら<<を参考にするとイイと思います♪

私も参考にさせて頂きました☆



お小遣い稼ぎについて詳しく知りたい方はこちら↓
>>お小遣い稼ぎの詳しい情報が満載!
>>小遣いブログ 主婦のお小遣い稼ぎ

 タグ
None