サイト運営において文章の段組みはメニューや目次などで頻繁に利用する機会があると思います。
HTMLサイトなどではtableタグを応用し、罫線を消すなどの方法で擬似的に文章の段組みを表現することが出来ますが、WordPressの場合、この罫線が上手く消えなかったり、うっすら残ってしまったりして手こずらされます。
WordPress自体に慣れていないうちはCSSなどをいじくると面倒くさいことになりかねないので避けたい人も多いはず。
そこで、ここでは自分が最も簡単だと思う記事中での段組みの方法について解説します。
コンテンツ部分のボックスをCSSで指定する
ワードプレスの『テーマの編集（エディター）』に行き、CSSの部分に以下の記述を追加してください。（コピペでOK）
#main .top_box{
width:620px;
float:left;
background-repeat:no-repeat;
background-color:#fff;
height:300px;
clear:both;
margin-bottom:20px;
}
width(横幅)やheight(高さ)は各々のページによって違ってくるので適切な数字に変更してください。
記事内でのクラス指定と段組みの方法
<div class="top_box">
<div style="width:300px;float:left;height:300px;background-color:skyblue;">
テキスト
</div>
<div style="width:300px;height:300px;float:right;background-color:skyblue;">
テキスト
</div>
</div>
上記のタグを記事内に直接打ち込むと以下のように表示されます。
（段組みが視覚的に分かりやすいように背景色をつけています。背景色を消したい場合はタグのbackground-color:skyblue;の部分を消去してください。）
この記事内に打ち込むタグのstyle=の後に続くwidthやheightも同様に各々のサイトにあった数値に書き換えてください。
基本的にはheightに関してはCSSの方で指定した数値と同様、widthに関してはCSSで指定した数値を２で割った数よりも少し小さい数値がいいでしょう。
今回の例で言えば、620(CSSでのwidth)÷2=310よりも多少小さい300に設定しています。
半分よりも多少小さい数にする理由については、ブラウザ上の表示で左のボックス(段)と右のボックス(段)の間隔を空けていることを考えればわかると思います。
あとは上のテキスト部分に通常と同じように文章を打ち込んでいけば大丈夫です。
ちなみに、このテキスト部分（文章）を中央揃えにしたい場合は中央揃えにしたい文章全体を＜div align=”center”＞＜/div＞で囲んでください。
⇒
