fc2ブログ

表の背景にアイコン

Manannan Mac Lir

表の背景にアイコン。下記のテンプレートに設定をしてあります。(クリックしないと反映しません)
http://manannan.blog84.fc2.com/?template=colorfish2&no=247

背景画像は、「Part4」のページからお借りしています。

Part 1 Part 2 Part 3 Part 4


スタイルシート
/* 表の背景に画像 */
.cap{height:25px;width:75px;background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cp0.png);
background-repeat: no-repeat; border:none;padding:0;margin:0;
}
.cap a{display:block;height:25px;width:75px;font-size:12px;text-align:center;padding:4px 0 0 0;margin:0;}
.cap a:link{background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cap1.png);
background-repeat: no-repeat;
color:#ddf;}
.cap a:visited{background-image:url(http://blog-imgs-32.fc2.com/m/a/n/manannan/cap1.png);
background-repeat: no-repeat;
color:#ddf;}
.cap a:hover{background : none !important;
color:#f00;}


HTML
※titleを設定することで、マウスを乗せたときにチップス(小さく解説)が出るようになります。数文字のメニューに解説がつけられると便利かと思ったので、紹介しておきます。
<table>
<tr>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-1/" title="緑と橙">
Part 1
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-2/" title="青とベージュ">
Part 2
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-3/" title="暗灰">
Part 3
</a>
</td>
<td class="cap">
<a href="http://www.bittbox.com/freebies/free-vector-web-page-elements-part-4/" title="青と橙・お借りしました">
Part 4
</a>
</td>
</tr>
</table>
スポンサーサイト



Comment

コメントの投稿


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

Trackback

«  | HOME |  »

ご質問は、できる限りサポートします。(違法ブログを除く)/

BROWSIZE.ORG - 無料アクセス解析









テンプレート デザインテーマ 画像向き Plant  新管理画面 新管理 高速表示設定時広告(アカマイ広告) sky 草木 プラグイン ぶらぼー セッション時間切れ セッション切れ 


テンプレート
デザインテーマ
画像向き
Plant

新管理画面
新管理
高速表示設定時広告(アカマイ広告)
sky
草木
プラグイン
ぶらぼー
セッション時間切れ
セッション切れ


↓のタブ名をクリックすると、枠が表示されます。
div
table
th
td
[F][C]
FAQ・よくある質問 [F][C]
質問・疑問 [F][C]
おかしいと思ったら [F][C]
テンプレート・プラグイン [F][C]
その他ブログパーツ [F][C]
雑談 [F][C]
ブログ宣伝コーナー [F][C]
[過去ログ](~2009.7)






manannan

Author:manannan

Icon:Aon Celtic Art