CMONOS.JP の HTML/CSS カスタマイズ
HTML/CSS カスタマイズ方法の概略について解説します。
CMONOS.JP のデフォルトの XHTML 構造および CSS のライセンス
MITライセンス
本 XHTML 構造および CSS は「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、本 XHTML 構造および CSS に起因または関連し、あるいは本 XHTML 構造および CSS の使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。
CMONOS.JP デフォルトの XHTML の基本構造
- body [.ordinary]
- div#header | div#site-navi (ヘッダ・ナビゲーション)
- div#container
- ul#topicpath (トピックパス)
- div#gallery
- div#content [.single .double .triple .col-2 / golden-ratio .two-to-one / .ordinary / .gallery .entries .categories]
- div#main [.pillars]
- h1
- div.section [.grid [.square | .aspect4-3 | .aspect3-4 | liquid | multi-column]]
- div#sub
- h1 =非表示
- div.section [.separated .split]
- div#aside [.double]
- h1 =非表示
- div.section [.colspan-2 .colspan-3]
- div#footer (フッタ) [.double]
- div.section
- p#copyright
- ul#footer-nav
CMONOS.JP のデフォルトの XHTML に対応したスキンが利用する画像
styleStationery のヘッダ画像やフッタ画像は "/lib/image/style-stationery" フォルダにあります。Fireworks 形式の素材画像をダウンロードして加工することもできます。他のサイトテンプレートでも、"/lib/image/[サイトテンプレート(スキン)名]" フォルダに画像類が格納されています。
カラム数を変更する
div#content の class 名を指定することでメインコンテンツのカラム数を変更することができます。
- 無指定
- div#aside(幅200px/220px) div#main(幅695px/737px) の2カラム
- golden-ratio
- div#aside(幅346px/366px) div#main(幅555px/591px) の2カラム
- two-to-one
- div#aside(幅299px/319px) div#main(幅602px/638px) の2カラム
- single
- カラムなし(幅928px/958px)
- triple
- div#aside(幅200px/220px) div#main(幅460px/516px) div#sub(幅200px/220px) の3カラム
- col-2
- div#main(幅447px/479px) div#sub(幅447px/479px) の等幅2カラム
- col-3
- div#main(幅288/320px) div#sub(幅286px/318px) div#aside(幅286px/318px) の等幅3カラム
- ordinary
- 無指定 および .triple, golden-ratio, two-to-one と同時に指定(body に設定することを推奨)して main sub aside の順でカラムを並べる。
下記は「styleNaturalWood」および「styleStationery」の場合。
- 無指定
- div#aside(幅200px/220px) div#main(幅695px/725px) の2カラム
- golden-ratio
- div#aside(幅340px/360px) div#main(幅555px/585px) の2カラム
- two-to-one
- div#aside(幅293px/313px) div#main(幅602px/632px) の2カラム
- single
- カラムなし(幅928px/958px)
- triple
- div#aside(幅200px/220px) div#main(幅460px/490px) div#sub(幅200px/220px) の3カラム
- col-2
- div#main(幅442px/472px) div#sub(幅442px/472px) の等幅2カラム
- col-3
- div#main(幅280/310px) div#sub(幅290px/310px) div#aside(幅290px/310px) の等幅3カラム
- ordinary
- 無指定 および .triple, golden-ratio, two-to-one と同時に指定(body に設定することを推奨)して main sub aside の順でカラムを並べる。
インデックスをタイル状に並べる
div#main>div.section の class 名を追加することで div#main>div.section>ul.index をタイル状に並べることができます。
例) <div class="square grid section">
- grid
- ul.index>li を float:left。
- square grid
- インデックスを正方形タイル状に並べる
- aspect4-3 grid
- 横と縦の比率が 4:3 の長方形タイル状に並べる
- aspect3-4 grid
- 横と縦の比率が 3:4 の長方形タイル状に並べる
- liquid grid
- 高さが可変でタイル状に並べる
- liquid grid multi-column
- 高さが可変でタイル状に並べる+可能な場合はマルチカラム状に並べる
カテゴリーごとにインデックスを縦に並べる
div#main の class 名を追加することで div#main>div.section をカラム状に並べることができます。
- div.double>div.pillars>div.section
- カテゴリーインデックスを3列に並べる
- div.single>div.pillars>div.section
- カテゴリーインデックスを4列に並べる
セクションごとに区切り線を入れる
div#main>div.section の class 名を追加することで div#main>div.section をタイル状に並べることができます。
例) <div class="separated section">
- separated
- 上端に区切り線を入れる(強)
- split
- 上端に区切り線を入れる(弱)
関連情報のカラム幅を変える
div.single>div#aside のとき、div#aside>div.section は横4列に並びます。div#aside>div.section の class 名を追加することでその div.section のカラム幅を変更することができます。
- colspan-2
- 2カラム分の幅にする
- colspan-3
- 3カラム分の幅にする
また、div#aside の class 名を追加することでその div#aside>div#about のカラム幅を変更することができます。
- triple
- div.single>div#aside>div#about のカラム幅を2カラム分の幅にする
- double
- div.single>div#aside>div#about のカラム幅を3カラム分の幅にする
- single
- div.single>div#aside>div.section の float を解除しカラム表示しない
- フッタの記述を変更する
- 「外部ファイル編集(共通)」で「footer.ssi」を開き内容を変更して「保存」します。
- p#copyright と ul#footer-nav を並べて表示したい
- div#footer の class 名に「double」を指定します。