グリッドレイアウト

4:8の2カラム

固定ページはデフォルトではサイドバーの無しの1カラムです。固定ページの編集画面でテンプレートを「page-sidebar」に指定することでサイドバーつきの2カラムレイアウトに変更できます。ブランクテーマ「Naked WordPress」をベースに作っています。Bootstrap ver2とおなじグリッドシステムが組み込まれています。

Naked WordPress

<div class="row-fluid">
<div class="span4">span4</div>
<div class="span8">span8</div>
</div>
span4
span8

※グリッドをわかりやすくするために背景色を付けていますが、通常は背景色の指定はありません。

8:4の2カラム

<div class="row-fluid">
<div class="span8" style="background-color: yellow">
<p>span8のテキスト Bootstrap Ver2とおなじグリッドシステムです</p>
</div>
<div class="span4">
<img src="" />
<p>span4</p>
</div>
</div>

span8のテキスト Bootstrap Ver2とおなじグリッドシステムです

sampleentry

span4

offsetを使った中央寄せ

<div class="row-fluid">
<div class="span4 offset4">
span4中央寄せ
</div>
</div>;
span4中央寄せ

4:4:4の3カラム

<div class="row-fluid">
        <div class="span4"><h3 class="center">span4</h3>
        <p>span4を3つ並べて3カラムにできます。</p></div>
       <div class="span4"><h3 class="center">span4</h3>
        <p>span4を3つ並べて3カラムにできます。</p></div>
        <div class="span4"><h3 class="center">span4</h3>
        <p>span4を3つ並べて3カラムにできます。</p></div>
</div>

span4

span4を3つ並べて3カラムにできます。

span4

span4を3つ並べて3カラムにできます。

span4

span4を3つ並べて3カラムにできます。

見出しのデザイン

見出しh2

見出しh3

見出しh4

ブログ投稿記事と固定ページでは見出しのデザインを変えています。

<ul class="check">
 	<li>リスト1</li>
 	<li>リスト2</li>
 	<li>リスト3</li>
</ul>
  • リスト1
  • リスト2
  • リスト3

引用

あのイーハトヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎら光る草の波。

コード

.XXX {
width:999px;
height:999px;
}
.propA, .propB, .propC {
width:999px;
height:999px;
}
#YYY {
width:9px;
height:999px;
}

table

項目名 内容がはいります。
項目名 内容がはいります。
項目名 内容がはいります。