ショートコードでボタンを作る方法

今回はMuromachiのショートコードを使って、簡単にボタンを作る方法を紹介したいと思います。

ボタン用ショートコードの基本的な使い方

Muromachiではbuttonというショートコードを使ってボタンを作ることができます。

まずは基本的な使い方から見ていきましょう。

ボタンの文字を設定する

ボタンの文字を設定するには、buttonショートコードで表示したい文字を囲みます。

[button]詳しくはこちら[/button]

リンク先を設定する

ボタンのショートコードでリンク先を設定するには、hrefオプションを使います。

たとえばGenesis WP Fanにリンクさせたいときには、Genesis WP Fanのアドレスがhttps://gwpfan.infoなので、次のようなショートコードの書き方になります。

[button href="https://gwpfan.info"]詳しくはこちら[/button]

新しいタブで開くときにはnew_tabオプション

新しいタブで開いて欲しいときには、new_tab="true"というオプションを追加します。

[button href="https://gwpfan.info" new_tab="true"]詳しくはこちら[/button]

relを設定するときにはrelオプション

relを設定したいときには、rel="○○"の形で指定します。

[button href="https://gwpfan.info" rel="alternate"]詳しくはこちら[/button]

ボタンの色を変える

では、今度はボタンの色を変えてみましょう。
ボタンの色を変えるには、bgオプションを使います。

たとえば赤いボタンを作りたいときにはbg="red"となり、青いボタンを作りたいときにはbg="blue"と指定します。

[button bg="red"]詳しくはこちら[/button]

ボタンの大きさを変える

ボタンの大きさを変えるには、sizeオプションを使います。

利用可能なサイズは次の4つ。smallがもっとも小さく、fullは横幅いっぱいの大きさになります。

[button size="small"]詳しくはこちら[/button]
[button size="medium"]詳しくはこちら[/button]
[button size="large"]詳しくはこちら[/button]
[button size="full"]詳しくはこちら[/button]

ボタンの前に文字を入れる

ボタンの前に文字を入れるには、before_button_label="○○"の中に文字を記入します。

[button href="#" before_button_label="詳しくはこちらをチェック" size="large"]商品を見てみる[/button]

ボタンを横並びにするには

ボタンを横並びにするには、横並び用のショートコードのsplitやsplit_itemを使います。

[split]
[[split_item align="right"]
[[button href="#"]詳しくはこちら[/button]]
[/split_item]]
[[split_item align="left"]
[[button href="#"]詳しくはこちら[/button]]
[/split_item]]
[/split]

実際の表示がこちら。ここでは両方のボタンを緑色にしていますが、もちろん別の色を設定することもできます。

2020年8月9日ショートコードで横並びのレイアウトを作る方法

いろいろなスタイル

bg=”gray” のとき

[button size="small" href="#" bg="gray" align="center"]詳しくはこちら[/button]
[button href="#" bg="gray" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="gray" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="gray" align="center"]詳しくはこちら[/button]

bg=”red” のとき

[button size="small" href="#" bg="red" align="center"]詳しくはこちら[/button]
[button href="#" bg="red" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="red" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="red" align="center"]詳しくはこちら[/button]

bg=”blue” のとき

[button size="small" href="#" bg="blue" align="center"]詳しくはこちら[/button]
[button href="#" bg="blue" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="blue" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="blue" align="center"]詳しくはこちら[/button]

bg=”orange” のとき

[button size="small" href="#" bg="orange" align="center"]詳しくはこちら[/button]
[button href="#" bg="orange" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="orange" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="orange" align="center"]詳しくはこちら[/button]

bg=”green” のとき

[button size="small" href="#" bg="green" align="center"]詳しくはこちら[/button]
[button href="#" bg="green" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="green" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="green" align="center"]詳しくはこちら[/button]

bg=”pink” のとき

[button size="small" href="#" bg="pink" align="center"]詳しくはこちら[/button]
[button href="#" bg="pink" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="pink" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="pink" align="center"]詳しくはこちら[/button]

bg=”purple” のとき

[button size="small" href="#" bg="purple" align="center"]詳しくはこちら[/button]
[button href="#" bg="purple" align="center"]詳しくはこちら[/button]
[button size="large" href="#" bg="purple" align="center"]詳しくはこちら[/button]
[button size="full" href="#" bg="purple" align="center"]詳しくはこちら[/button]