| トップ |

スタイルシートの小ネタ 

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の場合はパーティション設定ってできないもんなのでしょうか。 

| トップ |