decortion.cssについて

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

特徴

ver.10 Beta

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

ダウンロード

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

最終更新日::タイプミス修正・微調整など

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

利用規則

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

導入方法

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

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

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

  1. 保存したdecoration.cssstyle.css(現在使っているメインのCSSファイル)と同じフォルダに移動
  2. 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>
    
  3. 以上を上書き保存した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;
}

履歴