decortion.cssについて

CDPでも使えるaleviritaオリジナルの汎用CSSサンプル集です。

特徴

特に創作サイト系で活躍しそうな装飾がこれ一つで手に入ります
マルチで活用可能（alevirita以外で配布されているテンプレートとも併用できます、勿論ご自身で作成したサイトでも）
導入法は現在利用しているメインのCSSファイル（style.css）かHTMLファイルを編集するだけ（マルチに使う場合や動作のパフォーマンスを求める場合はHTMLを編集するほうが有利です）

ver.10 Beta

現在、一部の装飾クラス削除と追加、CSS3やメディアクエリを利用した、ver.10ベータ版をCDP用だけ公開しています。

ダウンロード

【CDP用】cdp_decoration.css（ver.10 Beta）

CDPと併用するときはCDP用を、それ以外は汎用をご利用ください。
CDP用は確実に適応されるよう詳細度を高めてあり、またver.10にはPinky:blogやOrderSystem-DX用の汎用CSSも付属しています。

最終更新日：2016-10-12：タイプミス修正・微調整など

ver.9.6のリンクミスがありました申し訳ありません修正しました(2016/10/11)

利用規則

併用するテンプレート（CSS）の規約を尊重する

カスタマイズフリーです、適当に参考にするなり改変するなりご自由に。クレジットいれてくれれば二次配布も別に構わないです。

導入方法

現在使っているメインのCSSファイル（style.css）を編集する方法

HTMLを作成し終わっている場合でもすぐに導入できます。ただしCSSを変える場合毎回CSSファイルを変更しなければなりません。また、一つずつCSSファイルを読み込むので少し遅くなります。

保存したdecoration.cssをstyle.css（現在使っているメインのCSSファイル）と同じフォルダに移動
style.cssを開き、冒頭@charset "Shift_JIS";のすぐ真下に@import url("decoration.css");を挿入
コードサンプル
```
@charset "Shift_JIS"; /* 文字エンコードの設定（削除不可） */
@import url("decoration.css");
```
以上を上書き保存したstyle.cssとdecoration.cssをアップロード

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

必要なページ全てを編集しなければなりません。ただし、一気にCSSファイルを読み込むのでパフォーマンス制は高いです。

保存したdecoration.cssをstyle.css（現在使っているメインのCSSファイル）と同じフォルダに移動

decoration.cssを利用するhtmlファイルを開き、<link rel="stylesheet" type="text/css" href="csstemplate/style.css">の真下に<link rel="stylesheet" type="text/css" href="csstemplate/decoration.css">を挿入

コードサンプル

<!DOCTYPE html ～>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-style-type" content="text/css">
<link rel="stylesheet" type="text/css" href="csstemplate/style.css">
<link rel="stylesheet" type="text/css" href="csstemplate/decoration.css">
<title>サンプル</title>

以上を上書き保存したhtmlファイルとdecoration.cssをアップロード

使い方

htmlを書いている途中で該当の要素にクラスを書き足す方法

<ul class="fix-compact">
  <li><a href="text1.html">タイトル1</a>
  <li><a href="text2.html">タイトル2</a>
</ul>

htmlを書き終わったら該当のセレクタをdecoration.cssに書き足す方法

span.netabare,
div.reply dd,
ul.himitsu_memo,
#KIZI .fix-hidden
{
    backgruound-color: #CCCCCC; color: #CCCCCC;
}