Image Replacement

Forum

Home / documents / Image Replacement

Vicunaで配布しているスキンでは、全てのページの上部にサイト名がテキストとして表示されます。この部分のXHTMLは次のような構成です。

<p class="siteName"><a href="http://hoge.com/">サイト名</a></p>

これを環境に無いフォントや、加工・装飾を施した画像に置き換えるには次のような方法があります。

まず、お使いのスキンファイル、3-context.cssを開き、3-1-1付近にサイトタイトルに関しての次の定義を見つけます。

div#header p.siteName a {
.
.
}

この部分を次のように編集します。

div#header p.siteName a {
  display: block;
  width: 200px; /* 画像の幅 */
  text-indent: -9999px; /* textを飛ばす */
  outline: none; /* クリック時の枠線を消す */
  background-image: url(images/hogehoge.gif);
  background-repeat: no-repeat;
  background-position: 0px 0px; /* point 位置調整 */
  border-bottom: none;
  padding-bottom: 10px; /* 画像の高さに合わせて調整 */
}

上記の指定により、a要素内のテキストは表示されなくなり、変わりに背景画像としてサイトタイトルが表示されます。
画像の幅、位置、高さに関するプロパティを編集し、表示を確認しながら正しくサイトのタイトルが表示されるように調整してください。
vicuna.jpの配布サイトでも、同様の方法で画像に置き換えています。