レイアウト

mt.Vicunaで使われるレイアウト専用のクラスについて説明します．

single

主に個別記事やアーカイブリストなどで使われるレイアウトです．

サイドバーについては記事等の下の部分に2列に並んで表示されています．

double

通常，メインインデックスやカテゴリーリストなどに使われる2カラムのレイアウトです．

サイドバーについては右側に1列で表示されています．

double-l

doubleのサイドバーが左側に配置された2カラムレイアウトです．

multi

いわゆる3カラムレイアウトの代表的なもので，サイドバーが左右に配置され，記事等が中央に配置されるレイアウトです．

multi2

これも良く見かける3カラムレイアウトです．

サイドバーが2列のまま右側に配置され，記事等が左側に配置されるレイアウトです．

multi2-l

multi2のサイドバーが左側に配置された3カラムレイアウトです

アイキャッチ

画像を使ったアイキャッチ用のクラスについて説明します．

このアイキャッチ，mv.Vicuna 2.2.0 以前ではモジュールとしてそれぞれ別のファイルで管理されていましたが，2.2.1以降ではアイキャッチ用のクラスで区別することによって，切り替えが容易となりました．

これにより，前項のレイアウトクラスとの併用が可能になったため，組み合わせによってはかなり凝ったレイアウトとなります(サンプルページでは，全てdoubleレイアウトで表示しています)．

なお，アイキャッチ画像は1100×180ピクセルのものを使用しています．横は少なくとも1,100ピクセル以上あれば構いませんが，縦については180ピクセル未満のものは使わない方が良いでしょう．

eye-h

グローバルナビゲーションの上の部分(#header)に画像を配置したアイキャッチです．

#headerの高さを180ピクセルで固定し，画像を配置後，内包する要素についてpositionで配置し直しています．

eye-hb

eye-hと全く同じ部分(#header)に画像を配置したアイキャッチですが，サイトタイトル(リンク)やサイトの概要部分が全てなくなっています．ただ，その代わり画像全体にサイトへのハイパーリンクが張られているように見えるアイキャッチです．

実はpositionを使っていないので，微調整の要らない楽なスタイルだったりします．ただしサイトタイトル文字が無いので，サイトタイトル文字の入った画像を使った方が良いのかもしれませんね．

eye-c

グローバルナビゲーションのすぐ下，#headerと隣接する部分(#contentの先頭部分)に画像を配置したアイキャッチです．

通常#content部分は，上部分のmarginやpaddingが無いので，メイン部分やサイドバーとくっついているように見えているのですが，この#contentの上部分に180ピクセルの余白を作り，余白部分に画像を配置しています．そのため，2カラム・3カラムレイアウトの場合はサイドバー部分も180ピクセル分下に移動します．

eye-cは，次項で説明するスペシャルでの組み合わせの一部にほぼ必須のclass名だったりします．

eye-m

#contentの中にある，トピックパスのすぐ上の部分(#mainの先頭部分)に画像を配置したアイキャッチです．

#mainの上部分に180ピクセルの余白を作り，余白部分に画像を配置しています．そのため，eye-cと違ってサイドバー部分には干渉しません．

スペシャル

mt.Vicuna 2.2.1より登場した特殊レイアウトです．

set1

レイアウトに multi を使用し，かつアイキャッチに eye-c を使用している場合にのみ使用することのできるレイアウトです．

通常のeye-cアイキャッチの場合，サイドバー部分が180ピクセル下に移動してしまいますが，set1では左右に別れて配置されているサイドバーのうち，左側だけが下に下がらずグローバルナビゲーション(#header)とくっつきます．

set2

レイアウトに multi2 を使用し，かつアイキャッチに eye-c を使用している場合にのみ使用することのできるレイアウトです．

通常のeye-cアイキャッチの場合，サイドバー部分が180ピクセル下に移動してしまいますが，set2では右側に2列に並んで配置されているサイドバーのうち，一番右側だけが下に下がらずグローバルナビゲーション(#header)とくっつきます．

その他

これもmt.Vicuna 2.2.1より登場した特殊レイアウトです．

もちろん，ここに書いている全てのレイアウト等との併用が可能です．

gt

これはグローバルナビゲーション部分だけをページの一番上に配置するレイアウトです．

al

これは単純明快(？)でして，通常全体の配置は真ん中になっていますが，左側の余白がなくなった状態のレイアウトです．

f800

これは横幅を800ピクセルに固定したレイアウトです．

サンプルではf800のものしか置いていませんが，f850・f900・f950・f1000と50ピクセル刻みで1000ピクセルまで横幅の固定配置が可能です．