Home > スポンサー広告 > Customize - Layout

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Home > スポンサー広告 > Customize - Layout

Home > Customize > Customize - Layout

Customize - Layout

  • Posted by: Black vicuna
  • 2010-09-11 Sat 20:11:57
  • Customize

レイアウトの確認

レイアウトの変更手順

  1. Fc2の管理画面 > テンプレートの設定から、テンプレート編集を開きます。
  2. HTML編集のソース中、bodyタグに注目します。(6~8箇所)
  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

Hard Type + Eye catch

Hard type (bazooka,future) テンプレート左上に、スキンと一体化されたアイキャッチが付きます。

class
eye-u
Example
<body class="mainIndex double eye-u">
Link
Eye catch tool - Hard type

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

Home > Customize > Customize - Layout

Tag Cloud
Vicuna

Vicuna CMS

Return to page top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。