カラムクラスの使い方【Genesis Framework】

Genesis には、カラムクラス（Column Class）というページ中で段組みができる特殊なクラスがあります。

カラムクラスを使うと投稿や固定ページ以外にも、ホーム画面やサイドバーなど好きな場所で段組みのレイアウトを作ることができます。

カラムクラスの使い方

カラムクラスを使うには、段組のレイアウトを作りたい要素にカラムクラス用のクラス名（①、②）を追加します。

1 段組みの最初に来る要素に .first というクラスを付けます。

2 使いたい段組みのレイアウトに合わせて、以下のクラス名を追加します。

レイアウト	要素に追加するクラス名
1/2	one-half
1/3	one-third
1/4	one-fourth
1/5	one-fifth
1/6	one-sixth

ページを2つに分割する場合なら.one-half というクラスを、3つに分割する場合なら3つの要素に .one-third というクラス名を追加します。

2段のレイアウトを作るとき

下に簡単な使用例を作ってみました。

2段のレイアウトを作る場合、コードは下のようになります。テキストはdivタグで囲みましたが、pタグやimgタグに直接firstやone-thirdなどのカラムクラスを追加することもできます。

<div class="first one-half">

テキスト

</div>
<div class="one-half">

テキスト

</div>

3段のレイアウトを作るとき

<div class="first one-third">

テキスト

</div>
<div class="one-third">

テキスト

</div>
<div class="one-third">

テキスト

</div>

カラムクラスに対応したウィジェットも

Genesis Sandbox Featured Content Widgetのように、ウィジェット（プラグイン）によってはウィジェット内でカラムクラスを使用することもできます。

https://wordpress.org/plugins/genesis-featured-content-widget/

自分でコーディングする場合には、.first や .one-half を自分で追加しなければなりませんが、Genesis Sandbox Featured Content WidgetではColumn Classと書かれた選択メニューからone-halfなどのクラス名を選ぶだけで段組みレイアウトを作ることが出来ます。全てのレビューが星5つという高い評価も納得です。