CMONOS.JP の HTML/CSS カスタマイズ

HTML/CSS カスタマイズ方法の概略について解説します。

CMONOS.JP のデフォルトの XHTML 構造および CSS のライセンス

MITライセンス

本 XHTML 構造および CSS は「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、本 XHTML 構造および CSS に起因または関連し、あるいは本 XHTML 構造および CSS の使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。

CMONOS.JP デフォルトの XHTML の基本構造

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」を指定します。