スタイルシートの小ネタ
backgroundを使って,リンクテキストの背景に画像を入れるというものです。
まずは実例から。
J's
Garageごらんのように,リンクテキストの左側に矢印の画像が表示されています。これは,スタイルシートを使っています。
/* 背景に→ */
.allow {
padding-left: 20px;
background: url(http://homepage.mac.com/jsgarage/image/allow.png) 0px 2px no-repeat;
}
テキストの左側に20pxの余白をつくり,背景画像の矢印を表示させているというわけです。
使う時は,Aタグのうしろに,class="allow"とつけたしてやるだけです。
最近,職場のサイト内にブログをつくることになり,ppBlogを使い始めました。MovableType等のブログツールは,データベースが使えないとダメですが,このppBlogはPHPだけで動作するというフリーウェアのブログツールです。
ppBlog1.5このppBlogのデフォルトのスタイルシートでは,サイドバーのリンクに背景画像が使われているので,これをパクらせていただいたと言う訳です。
試しに,.MacにppBlogを入れてみましたが,残念ながら動作しませんでした。動作する以前にパーティションの設定ができなかったのですが,WebDAVの場合はパーティション設定ってできないもんなのでしょうか。
Wed - November 9, 2005 |
|