Vicuna > Home > Blog > レイアウトの変更

レイアウトの変更

Vicuna CMSで配布しているスキンは、body要素に付加されるクラス名によってレイアウトが変わる仕組みになっています。Vicuna テーマ・マネージャーを利用することで、wordPressの管理画面からスキンの対応する好みのレイアウトに簡単に変更することができます。

このページでは、純正のスキンが対応しているレイアウトとクラス名を紹介します。

すべてのクラスは複数組み合わせて指定することができます。

Column Layout

Single column

class: single
Example: <body class="mainIndex single">

Double column - Menu on right

class: double
Example: <body class="mainIndex double">

Double column - Menu on left

class: double-l
Example: <body class="mainIndex double-l">

Multi column - Wing menu

class: multi
Example: <body class="mainIndex multi">

Multi column - Double menu

class: multi2
Example: <body class="mainIndex multi2">

Multi column - Double menu on left

class: multi2-l
Example: <body class="mainIndex multi2-l">

Eye Catch Image

Eye catch - Header area

class: eye-h
Example: <body class="mainIndex double eye-h">

Eye catch - Header area (Banner type)

class: eye-hb
Example: <body class="mainIndex double eye-hb">

Eye catch - Contents area

class: eye-c
Example: <body class="mainIndex double eye-c">

Eye catch - Main area

class: eye-m
Example: <body class="mainIndex double eye-m">

Combination

すべてのクラスは半角スペースで区切って組み合わせて指定できます。

ここでは実用的なレイアウトの組み合わせを一部のみ紹介いたします。

Multi column + Eye catch Header

Example: <body class="mainIndex multi eye-h">

Double column + Eye catch Header (Banner Type)

Example: <body class="mainIndex double eye-hb">

Multi column + Eye catch Content

Example: <body class="mainIndex multi eye-c">

Single column + Eye catch Header

Example: <body class="mainIndex single eye-h">

Multi column + Eye catch Main

Example: <body class="mainIndex multi eye-m">

Multi column - Double menu + Eye catch Main

Example: <body class="mainIndex multi2 eye-m">

Special Layout Sets

以下の3つのクラスの組み合わせにより、特別に設計したレイアウトを使用できます。

Special layout 1

Example: <body class="mainIndex multi eye-c set1">

Special layout 2

Example: <body class="mainIndex multi2 eye-c set2">

Others

Navigation on top

グローバルナビゲーションをページ最上部に移動します。

class: gt
Example: <body class="mainIndex double gt">

Left align

中央寄せを解除して全体を左寄せにします。

class: al
Example: <body class="mainIndex double al">

Fixid width

全体を固定幅にします。800px〜1000pxまでの設定が50px刻みで用意してあります。

class: f800, f850, f900, f950, f1000
Example: <body class="mainIndex double f850">

layout.cssの冒頭にある幅の指定を直接編集したほうが細かい設定が可能です。

Vicuna CMS

Return