« いかんともしがたい Refuse CCCD INDEX | Main | CCCD の再生保証はだれがしてくれる? »

2003.12.17

なんちゃってカテゴリ表示

ここのところいくつか、といっても 2件だけですが、このサイトのあのカテゴリ表示はどーやっているんだ?という記事を読んだので、それについて解説します。

これがなんちゃってカテゴリ表示

解説というか、これってただ単にスタイルシートの背景指定で表示させているだけなので、テクニックでもなんでもないんですよね。

とりあえず、背景にしたい画像を用意します。説明用に↓↓テキトーに作ってみました↓↓。

これを背景画像にします

そうしたら次は本文を書くときに div タグを使ってスタイルシートで背景画像を指定していきます。

<div style="background-image: url(http://背景画像までの絶対アドレス) ;"> ここに本文をかきます。 </div>

これを上の背景画像を使って実際に記述するとこんな感じになります。


こんな感じ。
かなり文字が見難くなってるけど
それは気にしない。

これだと div の範囲内全面に背景画像が表示されてしまうので文章のジャマですよね。そんなわけで背景画像の配置の繰り返しを指定します。

<div style="background-image: url(http://背景画像までの絶対アドレス) ; background-repeat: repeat-y ;"> ここに本文をかきます。 </div>

background-repeat: repeat-y
と記述することによって
タテ方向 ( y 軸 ) にのみ背景画像が繰り返し配置される。

<div style="background-image: url(http://背景画像までの絶対アドレス) ; background-repeat: repeat-x ;"> ここに本文をかきます。 </div>


background-repeat: repeat-x
と記述することによって
ヨコ方向 ( x 軸 ) にのみ背景画像が繰り返し配置される。

<div style="background-image: url(http://背景画像までの絶対アドレス) ; background-repeat: no-repeat ;"> ここに本文をかきます。 </div>


background-repeat: no-repeat
と記述すると
左上から一回のみ配置されます。

あとは、これの応用です。うちの場合、いまのところ 5つのカテゴリがあるのでそれぞれのカテゴリ用に 5つの画像を作りました。さらに、このデザインでは本文の横幅を css ファイルで一定数値に指定しているので、それにあわせて画像を作成してます。

これを背景画像にします

たとえばこんな感じの背景画像を作ります。で、これを background-repeat: no-repeat で一回だけ表示させるとこのようになります。

こういう感じになります。
ちなみにこの背景画像は ヨコ400px タテ20px で、ちょうどこの枠線で囲まれている横幅の 390px よりも心もち長めに作ってあります。

あ、まずい!文字が背景画像とかぶってるな?そんなときは <br /> で改行するのもイイデスガ、padding-top: **px; という手もあります。

<div style="background-image: url(http://背景画像までの絶対アドレス) ; background-repeat: no-repeat ; padding-top: 30px ;"> ここに本文をかきます。 </div>
こういう感じになります。
ちなみにこの背景画像は ヨコ400px タテ20px で、この枠線で囲まれている横幅の 390px よりも心もち長めに作ってあります。

padding-top: 30px ; の数値は背景画像に合わせて気持ちいいところをさがしだしましょう。ちなみに、今回は記事ごとに div にスタイルシートをひとつずつ記述していく方法を説明しましたが、わたしは css ファイルにカテゴリごとに class 属性で指定しています。なので、記事のところに実際に書いているのは

<div class="cccd"> ここに本文を書いてます。 </div>

これだけですね。css ファイルをいじれる人はいろいろとやってみてください。もちろん自己責任でネ。

というか、このなんちゃってカテゴリ表示ってクリックできるわけでもないから実用性はどーなのかと思いますが、とりあえず、わたしは見た目が気に入っているので採用しています。

|

« いかんともしがたい Refuse CCCD INDEX | Main | CCCD の再生保証はだれがしてくれる? »

TrackBack

TrackBack URL for this entry:
http://app.cocolog-nifty.com/t/trackback/1570/30613

Listed below are links to weblogs that reference なんちゃってカテゴリ表示:

» いかんともしがたい: なんちゃってカテゴリ表示 [此処録ANNEX : ココログTIPS]
いかんともしがたい: なんちゃってカテゴリ表示... [Read More]

Tracked on 2003.12.17 at 00:46

» なんちゃってカテゴリ表示をクリッカブルに [ いかんともしがたい]
このカテゴリ表示をクリックできるようにしました(このエントリーのみです)。 なんとなく気合を入れて書いてみたもののまったくといっていいほど活用されることなく忘... [Read More]

Tracked on 2004.01.24 at 00:01

« いかんともしがたい Refuse CCCD INDEX | Main | CCCD の再生保証はだれがしてくれる? »