弊社では、Wordpressのビジュアルエディター上で、自由にレイアウトを行うことができるよう、独自のコラム用ショートコードで機能拡張しています。ショートコードとは、「半角角括弧 ”[ ]”」で括られた定義済みのコードを使用して、実際に出力されるhtmlコードを呼び出すものです。これにより、本格的にhtmlを学習することなく、ビジュアルエディター上に多彩な機能を追加することができます。

[shotcode]
テキストやオブジェクト
[/shortcode]

上のような「囲み型」ショートコードは、始まりのショートコードタグ（[shortcode]）と、スラッシュから始まる、終わりのショートコード（[/shortcode]）があり、1対となって内容を囲むことで機能します。

コラムショートコードの使い方

ビジュアルエディター上で、段組レイアウトを行うために、下記の3種類のショートコードを使用します。

[wrapper][/wrapper]（セクションブロック）

[row][/row]（行）

[column][/column]（列）

wrapperについて

wrapper（セクションブロック）は、コンテンツブロックのマージンを設定する役割と、背景を設定する役割があります。wrapperの中に、row（行）と column（列） のショートコードが入ります。

wrapperショートコードでは、下記の例のようにclass属性を追加することで、背景色をつけるオプションを設定することができます。

[wrapper class="bg-grey"][row][column]
テキストやオブジェクト
[/column][/row][/wrapper]

rowについて

row（行）は、段組ブロックの横幅を設定する役割と行の区切りを設定する役割があります。rowの中には column（列）のショートコードが入ります。rowショートコードでは、下記の例のようにclass属性を追加することで、横幅を狭めるオプションを設定することができます。

[row class="pad-h-20px"][column]
テキストやオブジェクト
[/column][/row]

上記のclass属性(pad-h-20px)は、行の横幅を左右20pxずつ（計40px）狭める設定です。設定値には、pad-h-20px / pad-h-40px / pad-h-60px / pad-h-80px / pad-h-100px があります。

columnについて

column（列）は、段組ブロックの中に、何段の「列」をもたせるかと、その「幅」を設定します。下記のようにclass属性に、横幅を設定したclass名（col-1-2）あたえることで、1行の中に何分割の列をもたせるかを指定します。クラス名の最初の数字が分子の値で、ハイフンで区切られた次の数字が分母の数です。

弊社作成テーマの多くでは、列の分母として2〜12等分までのcolumn設定を用意しています。
(1/2、1/3、1/4、1/5、1/6、1/7、1/8、1/8、1/9、1/10、1/11、1/12)
分子は、分母以下の整数値が設定されています。
(1/12、2/12、3/12、4/12、5/12、6/12、7/12、8/12、9/12、10/12、11/12、12/12)

[row]
[column class="col-1-2"]
列1
[/column]
[column class="col-1-2"]
列2
[/column]
[/row]

[row]
[column class=”col-4–5”]
列1
[/column]
[column class=”col-1–5”]
列2
[/column]
[/row]

[row]
[column class=”col-3–4”]
列1
[/column]
[column class=”col-1–4”]
列2
[/column]
[/row]

[row]
[column class=”col-2-3”]
列1
[/column]
[column class=”col-1-3”]
列2
[/column]
[/row]

[row]
[column class=”col-3-5”]
列1
[/column]
[column class=”col-2-5”]
列2
[/column]
[/row]

[row]
[column class=”col-7-12”]
列1
[/column]
[column class=”col-5-12”]
列2
[/column]
[/row]

[row]
[column class="col-1-3"]
列1
[/column]
[column class="col-1-3"]
列2
[/column]
[column class="col-1-3"]
列3
[/column]
[/row]

[row]
[column class="col-1-4"]
列1
[/column]
[column class="col-1-4"]
列2
[/column]
[column class="col-1-4"]
列3
[/column]
[column class="col-1-4"]
列4
[/column]
[/row]

[row]
[column class=”col-1–5”]
列1
[/column]
[column class=”col-1–5”]
列2
[/column]
[column class=”col-1–5”]
列3
[/column]
[column class=”col-1–5”]
列4
[/column]
[column class=”col-1–5”]
列5
[/column]
[/row]