ショートコードの使い方

section

記事中でセクションを区切ることができるショートコードです。セクションの背景(ウィンドウ横幅いっぱい)に背景色をつけたり、背景画像を設定することができます。title属性が必須で、設定されていない場合は「You need to set title attribute.」が表示されます。

属性 説明
title セクションのタイトル
bgcolor セクションの背景色。#から始まるカラーコードで指定。
id HTMLのid属性
class HTMLのclass属性

サンプル


※コピペして利用する場合は、[ の後のスペースと ] の前のスペースは削除してください。

[ section title="セクションのタイトル" bgcolor="#ffffff" ]

ここに文章などを入力

[ /section ]

row

記事中でカラム分けを行う場合に使用するショートコードです。実際には [ row ][ /row ] の中に col ショートコードを配置してカラムを分割します。詳しくは col ショートコードの説明をご覧ください。[ row ][ /row ] の直下には col ショートコードのみ配置するようにしてください。

col

カラムを分割するショートコードです。row ショートコード内に配置されたときのみカラムを分割できます。

属性 説明
size 分割時のカラム数を指定する。コンテンツ幅いっぱいのときを 12 として、4分割したいときは 3、3分割したいときは 4 などと指定する。スマートフォン時には無効になります。
xs スマートフォンサイズでの分割時のカラム数を指定できます。通常、size 属性で指定したサイズはスマートフォン時には無効になりますが、xs 属性を指定することでスマートフォン表示時にも分割が可能になります。指定方法は size 属性と同様です。
offset カラムの左側の余白サイズを指定できます。スマートフォン時には無効になります。指定方法は size 属性と同様です。

サンプル


※コピペして利用する場合は、[ の後のスペースと ] の前のスペースは削除してください。

[ row ]

[ col size="6" ]

2分割します。

[ /col ]

[ col size="6" ]

2分割します。

[ /col ]

[ /row ]

thumbnail_text

サムネイルおよびタイトル付きのボックスを配置できます。

属性 説明
title タイトル
src サムネイル画像URL
content 説明文
link リンク先がある場合に指定できます。

サンプル

下記コードの既述で、次のように画面で表示されます。


※コピペして利用する場合は、[ の後のスペースと ] の前のスペースは削除してください。

[ thumbnail_text title="タイトル" src="http://www.wp-flat.com/wp-content/uploads/2014/06/cropped-header.jpg" content="ここに文章" link="http://www.nb-a.jp" ]

button

このショートコードは有料プラグインに含まれています

ボタンを表示するためのショートコードです。

属性 説明
title ボタンに表示する文字列
bgcolor ボタンの色。#から始まるカラーコードで指定。
color ボタンの文字色
fontsize フォントサイズ。半角数字で指定(例:16 => 16px で表示される)
href ボタンのリンク先
margin ボタンの文字からボタン左右の端までの余白
target リンクの target 属性。_blank で別ウィンドウで開きます。
style full で横幅いっぱいのボタンになります。

サンプル


※コピペして利用する場合は、[ の後のスペースと ] の前のスペースは削除してください。


[ button title="サンプルボタン" bgcolor="#000" color="#fff" href="http://www.wp-flat.com" target="_blank" ]
サンプルボタン

alert

このショートコードは有料プラグインに含まれています

アラートボックスを表示するためのショートコードです。

属性 説明
type ボタンの種類。

  • info … 一般的な情報のアラート
  • success … 処理完了時などのアラート
  • warning … 注意を促すアラート
  • danger … エラーや要注意のアラート

サンプル


※コピペして利用する場合は、[ の後のスペースと ] の前のスペースは削除してください。


[ alert type="info" ]一般的な情報のアラート[ /alert ]
[ alert type="success" ]処理完了時などのアラート[ /alert ]
[ alert type="warning" ]注意を促すアラート[ /alert ]
[ alert type="danger" ]エラーや要注意のアラート[ /alert ]

一般的な情報のアラート
処理完了時などのアラート
注意を促すアラート
エラーや要注意のアラート