このページはaleviritaで配布しているcssファイルの詳細ページです。

decoration.css

  1. decoration.cssってなに?
  2. 使うにあたっての規約
  3. 導入方法
  4. cssファイル詳細
  5. 表示サンプル
  6. 更に装飾
  7. バージョンアップ履歴

decortion.cssについて

CDPで使えるaleviritaオリジナルの独自クラスサンプル集。

CDP以外でもセレクタ変更すれば使えます。参考にどうぞ。

特徴
  • 特に創作サイト系で欲しい装飾がこれ一つで手に入ります
  • マルチで活用可能（alevirita以外で配布されているテンプレート（CSS）とも併用できます）
  • 導入法はstyle.cssを編集するだけ。マルチに使うならHTMLを編集する方法も。（導入方法参照）
現行バージョン
バージョン8.5.2
最終更新
2010-07-05

使うにあたっての規約

上記を守ったら、なにをどう使っても自由。クラス名がポンコツなので改編おすすめ。むしろCSS自体がそろそろポンコツ。

導入方法

style.cssを編集する方法

特徴
HTMLを作成し終わっている場合でもすぐに導入できます。ただしCSSを変える場合毎回style.cssを変更しなければなりません。
  1. decoration.cssを保存する。
    • ↑リンクの上で右クリック→リンク先を保存
    • ↑リンクをクリック。ページもしくはテキストソフトが開くので内容を保存
  2. 保存したdecoration.cssをcsstemplateフォルダ内あたりに移動
  3. style.cssを開く
  4. @charset "Shift_Jis";のすぐ真下あたりに@import url("decoration.css");って書き足す。
  5. style.cssを上書き保存
  6. 上書き保存したstyle.cssとdecoration.cssをアップロード

htmlファイルを編集する方法

特徴
必要なページ全てを編集しなければなりません。ただし一回書き換えたら、CSS変更時も楽チンです。
  1. decoration.cssを保存する。（上記参照）
  2. 保存したdecoration.cssをcsstemplateフォルダ内あたりに移動
  3. decoration.cssを利用するhtmlファイルを開く
  4. <link rel="stylesheet" href="csstemplate/style.css" type="text/css">の真下あたりに<link rel="stylesheet" href="csstemplate/decoration.css" type="text/css">って書き足す。
  5. htmlファイルを上書き保存
  6. 上書き保存したhtmlファイルとdecoration.cssをアップロード

cssファイル詳細

ul/ol class="list1"

内容が横並びになります。

<ul class="list1">
 <li>内容</li> 
 <li>内容</li>
</ul>

<ol class="list1">
 <li>内容</li> 
 <li>内容</li>
</ol>

内容と内容の間の隙間の幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分の値を変更します。

#PAGETOP #KIZI div.text ul.list1 li,
#PAGETOP #KIZI div.text ol.list1 li
{
	list-style-type: none;
	display: inline; 
	padding: 0 0.4em 0 0;
}

dl class="imageList"

dtに画像、ddに文章で、文章が画像の左横に回り込みます。

<dl class="imageList">
   <dt><img src="画像パス" alt="画像：タイトル"></dt> 
         <dd>説明説明</dd>
   <dt><img src="画像パス" alt="画像：タイトル"></dt>
         <dd>説明説明</dd>
</dl>

以下のようにすると文章が右横に回り込みます。

<dl class="imageList type2">
   <dt><img src="画像パス" alt="画像：タイトル"></dt> 
         <dd>説明説明</dd>
   <dt><img src="画像パス" alt="画像：タイトル"></dt>
         <dd>説明説明</dd>
</dl>

ul/ol class="imageList"

直下のliブロックが横並びになります。リストの入れ子がイイ感じ。

<ul class="imageList gallery1">
   <li><img src="画像パス" alt="画像：タイトル">
	<ul> 
	 <li>説明説明1</li>
	 <li>説明説明2</li>
	</ul> 
   </li>
   <li><img src="画像パス" alt="画像：タイトル">
	<ul> 
	 <li>説明説明1</li>
	 <li>説明説明2</li>
	</ul> 
   </li>
 </ul>

<ul class="imageList gallery2">
   <li>
	<dl class="imageList">
   	 <dt><img src="画像パス" alt="画像：タイトル"></dt> 
		<dd>説明説明</dd>
	</dl>
   </li>
   <li>
	<dl class="imageList">
   	 <dt><img src="画像パス" alt="画像：タイトル"></dt> 
		<dd>
			<ul> 
			 </li>説明説明1</li>
			 </li>説明説明2</li>
			</ul> 
		</dd>
	</dl>
   </li>
 </ul>

liの横幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分に適当な値をいれます。

#PAGETOP #KIZI div.text ol.gallery1 li,
#PAGETOP #KIZI div.text ul.gallery1 li
{
	width: 110px; /* 好きな幅に */
}

#PAGETOP #KIZI div.text ol.gallery2 li,
#PAGETOP #KIZI div.text ul.gallery2 li
{
	width: 200px; /* 好きな幅に */
}

横幅の違うサンプルがalevirita内にあるために.gallery1・.gallery2なんてクラスつけてるので、もし一つでいいなら、上記は消して、以下のように書き足したほうがスマートです。HTMLもclass="imageList"でOK。

#PAGETOP #KIZI div.text ol.imageList li,
#PAGETOP #KIZI div.text ul.imageList li
{
	width: 200px;
	display: inline-block;
	margin:0 0.3em 0.4em 0;
	padding: 5px 0;
	vertical-align: top;
}

ボーダーや背景つける場合は継承に気を付けて。

dl class="textList"

ddの文章がdtの文章の左横にきます。

<dl class="textList">
   <dt>文字</dt> 
         <dd>説明説明</dd>
   <dt>文字</dt> 
         <dd>説明説明</dd>
</dl>

dtの横幅は、decoration.cssを編集すれば変えられます。次のコードの強調部分に同じ値をいれます。

#PAGETOP #KIZI div.text dl.textList dt
{
	float: left;
	width: 8em; /* 横幅 */
	padding: 0.15em 0;
	clear: left;
}

#PAGETOP #KIZI div.text dl.textList dd{	
	margin-left: 8em; /* dtの横幅と同じで */
	padding: 0.15em 0 0.15em 0.8em;
}

ins class="new"

ins末尾にUPアイコンを（背景として）つけます。また、ins内のaのカラーを変えます。（更新履歴の最新に利用するとよさげ）

<ins class="new"><a href="img22.html">◎×をUPしました！</a></ins>

表示するアイコンは自由です。デフォでは、imgフォルダ内のup.gifを仮定してます。この画像→[画像]使用画像サンプルを保存して使って構いません。次のコードの強調部分を変更でファイル名やファイルの横幅分の余白を変えられます。

/*アイコン*/
#PAGETOP #KIZI div.text ins.new
{
	padding-right: 13px;
	background: url("img/up.gif") no-repeat 100% 50%;
}

リンクの色も自由です。次のコードの強調部分を好きなカラーコードにしてください。

/*リンク色*/
#PAGETOP #KIZI div.text ins.new a:link
{
	color: red;
}

どっちかの装飾だけでいい場合はいらん方を削除してください。

* class="more"

決められた高さ（※デフォでは5em）以上になったらスクロールバー出ます。例はdivだが、overflowできる要素なら、<p>も<ul>も<dd>も<blockquote>もOK。

<div class="more">
   <p>内容<br>内容<br>内容<br>内容<br>内容<br>内容</p>
</div>

overflowする高さは、decoration.cssを編集すれば変えられます。次のコードの強調部分の値を変更します。

#PAGETOP #KIZI div.text *.more
{
	padding-right: 0.5em;
	height: 5em !important; /*好きな高さ*/
	overflow: auto;
}

場合によっては高さはHTML側で処理する方法もあります。

<p class="more" style="height:200px">style属性を使う</p>

* class="hidden" / * class="small"

文字と背景色を同じにしたり（class="hidden"）、文字色を薄くしたり（class="small"）。どんな要素でもOK。

<ul><li class="hidden">見えない</li></ul>
<p>文章の一部を<span class="small">薄くしたり</span></p>

文字色と背景色を変える場合はdecoration.cssの以下の強調部分の値を変更。（背景色と文字色は必ずどちらも指定するように）

#PAGETOP #KIZI div.text .hidden
{
	background: #999;
	color: #999;
}

#PAGETOP #KIZI div.text .small
{
	background: #DDD;
	color: #AAA;
}

* class="text(1/2/3）"

文章が右よせとか中央とか左とかそういうの。ブロック要素なら何でもOK。

<ul><li class="text1">中央寄せ</li></ul>
<p class="text2">右寄せ</p>
<div class="text3"><p>左寄せ</p></div>

表示サンプル

弊サイトのCDP表示サンプルのsample3のページで使用例として確認することができます。

更に装飾

ボーダーや背景をつけててみてもいいでしょう。

バージョンアップ履歴

2010.07.05.01:39:00
decoration.css ver.8.5.2
  • dl.imageListに追加と修正 
    
#PAGETOP #KIZI div.text dl.imageList dt
{
	clear: both;
	margin-top: 0.5em/*←これを削除*/
	line-height: 0;/*←これを追加*/
}

	/*以下を追加 */
	#PAGETOP #KIZI div.text dl.imageList dt ins
	{
		display: inline;
		marign: 0;
		padding: 0;
	}
  • *.hidddenと.smallに追加 
    #PAGETOP #KIZI div.text .hidden
{
	background: #999;
	color: #999;
	text-shadow: none;/*コレを追加*/
}

#PAGETOP #KIZI div.text .small
{
	background: #DDD;
	color: #AAA;
	text-shadow: none;/*コレを追加*/
}
2010.05.21.01:42:00
decoration.css ver.8.5.1
  • resetにpositionのリセット追加。 
    /*============================================================
    reset
============================================================*/

#PAGETOP #KIZI div.text ul.list1,
（中略）
#PAGETOP #KIZI div.text dl.textList dd
{
	position: static;
	display: block;
...
2010.04.11.01:53:00
decoration.css ver.8.5
  • 記述を整理しました。
2010.02.07.02:11:00
decoration.css ver.8.2
  • dl.imageListおよびdl.textListのIE6においてのfloat解除。 
    * html body #PAGETOP #KIZI div.text dl.imageList{
	height: 1%;
}

* html body #PAGETOP #KIZI div.text dl.textList{
	height: 1%;
}
もっと昔の履歴

アドレス

このページはaleviritaの一部です。
制作者への連絡は、メールフォームを利用してください。
  1. サイトINDEX
  2. 配布おまけ一覧