まだまだ未熟なので「未定」?

地方在住の緩んだ無類のアホ毛アンテナで情報収集してコピペしたり…。
 
 
Javascript ON をお願いします。

ブログタイトル等々募集しております。

*上(別窓)のメールフォームが表示・動作しない場合はこちら

後何かあれば↑までヨロシクです。
最新記事
複眼RSS (1記事前をサムネイル化 )
test
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。

スポンサーサイト 

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

横メニューバーをブログタイトル下に表示する。 

FC2ブログのテンプレート工房様から

横メニューバーをブログタイトル下に表示する。方法をなどを少々。

ここのテンプレート< r_3_standard >作者:77bit[7cc]様のをカスタマイズいたします。




<!--▼ メニューバー ▼-->
<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>
<!--▲ メニューバー ▲-->



まずはメニュー項目を「r_3_standard のHTML編集」のHTMLに以下の下に追加します。
とりあえずそのままコピペしますが、希望にあわせて増減してください。


<!-- ↓↓↓ top -->
<tr>
<td colspan="5">
<div style="margin-top: 10px; margin-bottom: 10px;"><table width="100%" border="0" cellpadding="0" cellspacing="0" id="id_top_line"><tr><td height="5"></td></tr></table></div>

<!-- ここに挿入します。 -->

</td>
</tr>
<!-- ↑↑↑ top -->


次に「r_3_standard のスタイルシート編集」の末尾に次の記述を追加します。

/* ▼メニューバー▼ */
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;
}
/* ▲メニューバー▲ */



あとで、色とかメニューとか書き換えるつもりです。とりあえずここまで。
メモ書きまでに…。

さんくす → 数値実体参照変換

関連記事
スポンサーサイト
コメント















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

トラックバック
 
http://onesevens.blog.fc2.com/tb.php/6-d107087c
時計(オレンジ)
リンク
勝手にリンクさせていただいております。。゚(゚^o^゚)゚。ヤバイ?
カテゴリ
月別アーカイブ
オンラインカウンター
現在の閲覧者数:
アクセスカウンター
検索フォーム
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。