FC2ブログ

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とスタイルシートを元のテンプレートに、どの位置に記述するのか?

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

それでは皆様のお仕事が捗ります様にお祈りしています。
ではでは。
関連記事
スポンサーサイト



テーマ : ホームページ・ブログ制作
ジャンル : コンピュータ

コメントの投稿

非公開コメント

最新トラックバック

月別アーカイブ

カテゴリ

PDF (2)
広告
くろック ALL STARS
リンク
全記事表示リンク

全ての記事を表示する⇒ここをクリック頂くと記事リストが表示されます。

フリーエリア
カレンダー
09 | 2019/10 | 11
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
RSSリンクの表示
プロフィール

ねこぎじ

Author:ねこぎじ
FC2ブログへようこそ!

最新記事
最新コメント
メールフォーム

名前:
メール:
件名:
本文:

ねこぎじと申します。Twitterやっています。宜しければフォローください