WordPress > Customize > Layout

Switch

Vicunaで配布しているスキンは、HTMLのbodyタグのclass属性値を編集することで数十通りのレイアウトに簡単に変更できる設計になっています。

レイアウトの変更手順

  1. wp.Vicunaのテーマフォルダを開き、
    編集したいページのphpファイルを開きます。
    • インデックスページ - index.php
    • カテゴリーページ - category.php
    • 個別記事ページ - page.php, single.php
  2. ソース中、bodyタグに注目します。
  3. bodyのclass属性の値には、ページの種類を識別する値とレイアウトを決定する値が設定されています。例: <body class="ページ識別名 double">
  4. このページで紹介するレイアウトに対応したclassの値を指定し、ファイルをアップロードします。

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

Column Layout

Single column

  • Single column
class
single
Example
<body class="mainIndex single">

Double column - Menu on right

  • Single column
class
double
Example
<body class="mainIndex double">

Double column - Menu on left

  • Single column
class
double-l
Example
<body class="mainIndex double-l">

Multi column - Wing menu

  • Single column
class
multi
Example
<body class="mainIndex multi">

Multi column - Double menu

  • Single column
class
multi2
Example
<body class="mainIndex multi2">

Multi column - Double menu on left

  • Single column
class
multi2-l
Example
<body class="mainIndex multi2-l">

Eye Catch Image

Eye catch - Header area

  • Single column
class
eye-h
Example
<body class="mainIndex double eye-h">

Eye catch - Header area (Banner type)

  • Single column
class
eye-hb
Example
<body class="mainIndex double eye-hb">

Eye catch - Contents area

  • Single column
class
eye-c
Example
<body class="mainIndex double eye-c">

Eye catch - Main area

  • Single column
class
eye-m
Example
<body class="mainIndex double eye-m">

Combination

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

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

Multi column + Eye catch Header

  • Single column
Example
<body class="mainIndex multi eye-h">

Double column + Eye catch Header (Banner Type)

  • Single column
Example
<body class="mainIndex double eye-hb">

Multi column + Eye catch Content

  • Single column
Example
<body class="mainIndex multi eye-c">

Single column + Eye catch Header

  • Single column
Example
<body class="mainIndex single eye-h">

Multi column + Eye catch Main

  • Single column
Example
<body class="mainIndex multi eye-m">

Multi column - Double menu + Eye catch Main

  • Single column
Example
<body class="mainIndex multi2 eye-m">

Special Layout Sets

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

Special layout 1

  • Single column
Example
<body class="mainIndex multi eye-c set1">

Special layout 2

  • Single column
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の冒頭にある幅の指定を直接編集したほうが細かい設定が可能です。

Page Top