FC2ブログテンプレートカスタマイズはこうやりました。

ねこぎじです。

テンプレートにナビゲーションボタンと呼ばれるリンクボタンを追加しました。

イメージは前回の記事を参照ください。
hyuga16.blog46.fc2.com/blog-entry-199.html

HTMLのソースは下記のとおりです。
(いろいろなサイトを参考にさせて頂きました)

<ul id=”mave_bar”>
<li><a href=”<%url>”>トップページ</a></li>
<li><a href=”<%url>archives.html”>サイトマップ</a></li>
<li><a href=”<%url>blog-entry-186.html”>Zoho CRM目次</a></li>
<li><a href=”<%url>blog-entry-185.html”>Zohoアプリ</a></li>
<li><a href=”<%url>blog-entry-196.html”>HTML/CSS</a></li>
<li><a href=”<%url>blog-entry-197.html”>TOOL</a></li>
<li><a href=”<%url>blog-entry-198.html”>プログラミング</a></li>
</ul>

HTMLのリスト ulを利用しています。

これにスタイルシートを適用させますと、みごとにナビゲーションボタン(メニューボタン)の完成です。

スタイルシートのソースです。
ソースは下記のとおりです。
(いろいろなサイトを参考にさせて頂きました)

/* ナビゲーションボタン */
#mave_bar {
font-size: 80%; /* 文字サイズ */
height:32px; /* ボタンの高さ */
background-color:#999077; /* 背景色の指定 */
border-bottom:4px solid #c0c0c0; /* アンダーラインの指定 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔(マージン) */
margin-bottom:8px; /* 下の間隔 (マージン)*/
}

#mave_bar li {

/* リストは縦に並ぶのですが、下段に記述されている「float:left;」で */
/* 縦のリストが、横に並ぶリストに変化します。 */

list-style-type:none;
float:left; /* floatプロパティの値をleftとし、左から順に回り込ませる */

/* この「回り込ませる」という表現が理解を困難にしていますが、*/
/* floatプロパティは一つ目のliを左寄せにして次のliをその横に表示さてゆきます。 */

line-height:32px; /* 高さ+ */
margin:0px;
padding:0px;

}

#mave_bar li a {
display:block;
text-align:center;
width:100px; /* 1つのメニューボタンの幅 */
border-right:1px solid #c0c0c0; /* 区切り線を1pxの色で表現 */
border-bottom:4px solid #c0c0c0; /* アンダーLineを4pxの色で表現 */
color:white; /* リンク文字の色 */
background-color:#999077; /* メニューボタンの背景色を指定*/
text-decoration:none;
}

#mave_bar li a:hover{
color:white; /* マウスが乗ったときのリンク文字の色を指定 */
background-color:#222; /* マウスが乗ったときの背景色を指定 */
text-decoration:none;
}
/* ナビゲーションボタン */

HTMLはただのリストですが、これにデザインをスタイルシートで指定することでナビゲーションボタン(メニューバー)に変化してしまうのがHTMLの面白さではないでしょうか。

デザイン的な指定はすべてスタイルシートに負わせて記述していくようにしたいものです。

次回は、ここに記述したHTMLとスタイルシートを元のテンプレートに、どの位置に記述するのか?

この点について見ていきたいと思います。

それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。

返信を残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です