ブログ用 テンプレート このブログについて

FC2ブログ用のテンプレートを配布しています。
ブログ用テンプレートの簡単なカスタマイズの方法も紹介します。

thumbnail cat1

thumbnail cat2

thumbnail cat3

テンプレートの利用に、利用規約のような当サイトからの形式張った注文は特にありません。
FC2ブログ用のテンプレートですから、FC2ブログの「利用規約」に従って下さい。その上で、テンプレートのカスタマイズなどは、どうか自己責任のもと、自由に行って下さい。

« 前のページ | ホーム | 次のページ »
 

スポンサーサイト

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

TITLE:スポンサーサイト |  スポンサー広告 |  PAGE TOP  | HOME

[EDIT]

無料ブログ テンプレート ブログパーツ カスタマイズ SEO対策 :: pulp-studio ::
 

テンプレート一般のカスタマイズ・スタイルシートで実現するナビゲーションメニュー(リンク)

FC2ブログの共有テンプレート「ax-pulp01」などにも組み込んでいる、スタイルシートの設定だけで実現するナビゲーションメニュー(リンク)のソースと概略です。


このサンプル・テンプレートでは、ページのヘッダ部分に、ページナビゲーションとなるメニューを横に並べて設置しています。マウスのカーソルを合わせると個々にメニュー部分の色が変化します。

スタイルシートでの設定次第で、このような縦に並ぶメニューにすることも出来ます。


これらのメニューはスタイルシートの設定だけで実現します。メニューのリンク先に合わせて、変化する色も自由に設定出来ます。
スタイルシートを覚えたての頃は、この程度のことでも楽しくてたまりませんでした。

これらのメニューのHTMLは、以下のように記述しています。
ごく普通に、リンクを並べているだけです。適当なリンク先を、それぞれに指定して下さい。id名やclass名も、重複に気をつけて適当に変更すると良いでしょう。
<div id="headline">
   <div class="head-navi">
   <a class="navi1" href="#">メニュー1</a>
   <a class="navi2" href="#">メニュー2</a>
   <a class="navi3" href="#">メニュー3</a>
   <a class="navi4" href="#">メニュー4</a>
   <a class="navi5" href="#">メニュー5</a>
   <a class="navi6" href="#">メニュー6</a>
   </div>
</div>

横に並ぶメニューは、CSSに以下の要領で設定します。
#headline{
position: relative;
margin: 0px auto;(要素のセンタリング)
border-top: 1px solid #000000;(太さや色は自由に)
border-bottom: 2px solid #111111;(太さや色は自由に)
padding: 0px;
background: #003040;(色は自由に)
text-align: center;(文字と内部要素のセンタリング)
}

.head-navi{
position: relative;
width: 600px;(※A1)
height: 28px;(※B1)
overflow: hidden;(はみ出た部分は隠す)
margin: 0px auto;(要素のセンタリング)
border: 0px;
padding: 0px;
color: #3333cc;(色は自由に)
font-size: 12px;(はみ出ないように文字サイズを調整)
}

.head-navi a{
display: block;(ブロック要素に変更)
float: left;(フロートさせて横に並べる)
width: 99px;(幅を指定※A2)
overflow: hidden;(はみ出た部分は隠す)
margin: 0px 1px 0px 0px;(メニューの間隔を指定※A3)
border-bottom: 4px solid;(色の変化部分の高さ※B2)
border-color: #333333;(色は自由に)
padding: 0px;
color: #cccccc;(色は自由に)
font-weight: bold;(文字の太さは自由に)
line-height: 24px;(改行ピッチ※B3)
text-align: center;(文字のセンタリング)
text-decoration: none;(リンクの下線を出さない)
}

※A2と※A3を合わせた値がメニュー1個分の幅になるので、※A1ではメニュー6個分の幅を確保しています。
※B2と※B3を合わせた値がメニュー欄の高さになり、それを※B1で指定しています。通常、高さはheightで指定するのが正しいのでしょうが、heightをborderやpaddingと同時に指定してしまうと、MS社製のおかしなブラウザが見せる不審な挙動を回避するための設定が何かと面倒なので、ここはline-heightなどと言う怪しげなプロパティと親要素のoverflowを使ってお茶を濁します。

以下より、メニューにカーソルが合った時の変化を指定して行きます。
.head-navi a:hover{
background: #333333;(色は自由に)
color: #ffffff;(色は自由に)
text-decoration: none;(リンクの下線を出さない)
}

以下で、色の変化を指定します。自由に指定して下さい。 a:hover.navi01 { border-color: #0033ff; }
a:hover.navi02 { border-color: #ff0066; }
a:hover.navi03 { border-color: #33ff00; }
a:hover.navi04 { border-color: #ffcc00; }
a:hover.navi05 { border-color: #37f2bc; }
a:hover.navi06 { border-color: #7f19b2; }

縦に並ぶメニューは、この横並びメニューのCSSに少し手を加えるだけです。HTMLは全く同じです。
縦並びメニューのCSSは、後日追加します。

画像などのパーツを別に用意することなく、スタイルシートだけで簡単に実現出来るメニューのリンクなので、 色々試してカスタマイズしながら、ブログなどに付けてみて下さい。

TITLE:テンプレート一般のカスタマイズ・スタイルシートで実現するナビゲーションメニュー(リンク) |  ブログカスタマイズ |  PAGE TOP  | HOME

GENRE:ビジネス  THEME:ビジネス

[EDIT]

無料ブログ テンプレート ブログパーツ カスタマイズ SEO対策 :: pulp-studio ::
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。