Class Items

画像を左右に寄せたい

記事内に画像を挿入し、本文の左右に回り込ませたいときなどには.img_Lや.img_Rクラスを使用します。

以下は画像を左によせ、本文を回りこませ対場合の記述例です。
(エントリー、改行変換無しでの投稿時)

<p class="img_L"><img href="" height="100" width="100" alt="photo" /></p>
<p>Text Text Text Text Text Text Text Text Text Text Text Text</p>

以下、表示サンプル

.img_Lクラスの付加した要素は左に寄せられ、続くテキストは反対側へ流し込まれます。 画像を右側に配置したい場合は.img_Rになります。

このクラスは単純なものですが、寄せられた際の余白の調整等細かな部分で調整されています。また、floatプロパティ使用時に起こる不具合もclearFixと呼ばれる指定で解決しています。スタイルを修正したい場合は、2-class.cssの定義を編集してください。

定義リストを横並びにさせたい

記事内でタイトルと概要が対になったリストを横並びに表示させるには、dl.dataクラスを使用します。

以下はdl要素使用時にdt・dd要素を横に並ばせる時の記述例です。
(エントリー、改行変換無しでの投稿時)

<dl class="data">
 <dt>Title</dt>
 <dd>Desctiption</dd>
 <dd>Desctiption</dd>
 <dt>Title</dt>
 <dd>Desctiption</dd>
 <dt>Title</dt>
 <dd>Desctiption</dd>
 <dt>Title</dt>
 <dd>Desctiption</dd>
 <dt>Title</dt>
 <dd>Desctiption</dd>
 <dt>Title</dt>
 <dd>Desctiption</dd>
</dl>

以下、表示サンプル

.dataクラスの付加されたdl要素は、内包するdt・dd要素を横並びに表示します。もし、クラス名が適当ではない文書をこのような表示にしたい場合は、2-class.cssの定義からクラス名を編集してください。
(例: .ircLog または、.headline)

clearFix改

floatプロパティによる寄せと流し込みをクリアする方法にclearFixというテクニックがあります。vicuna.jpで配布している専用スキンでは、この定義も汎用クラスとして2-class.cssに用意してあります。

既にスキン内でこのテクニックを使用している箇所がセレクタに記述されていますので、もし、新たにclearFixを使用したい場合は、セレクタに該当要素(またはクラス)をカンマで区切って追加してください。追加する箇所は3箇所あります。

ul#globalNavi,
div#utilities,
.textBody,
ul.flip,
newElement1 {
 _height: 1px;
 min-height: 1px;
}

ul#globalNavi:after,
div#utilities:after,
.textBody:after,
ul.flip:after,
newElement1:after {
 height: 0;
 visibility: hidden;
 content: ".";
 display: block;
 clear: both;
}

/* for MacIE5 \*//*/
ul#globalNavi,
div#utilities,
.textBody,
ul.flip,
newElement1 {
 height: auto;
 overflow: hidden;
}
/* end */

上記の記述はnewElement1内のfloatを末尾でクリアするための記述です。さまざまなブラウザで同じ結果になるように調整されています。

最初から記述されているセレクタは削除しないでください。削除した場合はスキンの表示が崩れる場合があります。