※このショートコードは、「ブロックエディタ」に対応済みです。ブロックエディタのほうを使ったほうがラクです。
ボタンのショートコード各種です。
デフォルトのボタン
「url=””」にURLを指定すると、赤い「詳細はこちら」ボタンになります。
コピペ用
[button url="https://www.yahoo.co.jp/"]
属性値の空コード全部入り
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
カラー別
赤
ショートコード内の「color=””」を「color=”red”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
青
ショートコード内の「color=””」を「color=”blue”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="blue" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
ピンク
ショートコード内の「color=””」を「color=”pink”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="pink" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
緑
ショートコード内の「color=””」を「color=”green”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="green" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
オレンジ
ショートコード内の「color=””」を「color=”orange”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="orange" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
薄い緑
ショートコード内の「color=””」を「color=”light-green”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="light-green" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
薄いピンク
ショートコード内の「color=””」を「color=”light-pink”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="light-pink" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
薄い青
ショートコード内の「color=””」を「color=”light-blue”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="light-blue" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
薄いオレンジ
ショートコード内の「color=””」を「color=”light-orange”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="light-orange" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
グレー
ショートコード内の「color=””」を「color=”light-gray”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="light-gray" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
楽天カラー
ショートコード内の「color=””」を「color=”rakuten”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="rakuten" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
Amazonカラー
ショートコード内の「color=””」を「color=”amazon”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="amazon" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
サイズ変更
記事幅いっぱいに広がるワイドボタンにする
ショートコード内の「width=””」→「width=”wide”」に変更
ここにテキストを入れる
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="wide" text_before="" text_after="" animation=""]
幅を指定する
ワイドボタンの「width=”wide”」を「width=”数字”」に変える
400pxの場合
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="400" text_before="" text_after="" animation=""]
テキストを任意の位置で改行する
改行したい箇所に（br）を挿入。( )は「半角」で入れます。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここに(br)テキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
アイコンを付ける
矢印アイコンを付ける
ショートコード内の「icon=””」→「icon=”yajirusi”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="yajirusi" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
三角アイコン
ショートコード内の「icon=””」→「icon=”sankaku”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="sankaku" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
丸三角矢印アイコン
ショートコード内の「icon=””」→「icon=”maru-sankaku”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="maru-sankaku" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
外部リンクアイコンを右側付ける
ショートコード内の「icon=””」→「icon=”gaibu”」に変更
ショートコード内の「icon_align=””」→「icon_align=”right”」に変更
ショートコード内の「target=””」→「target=”blank”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="gaibu" icon_align="right" round="" target="blank" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
アイコンを右側に配置する
ショートコード内の「icon_align=””」→「icon_align=”right”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="maru-sankaku" icon_align="right" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
ワイドボタンのアイコンを左寄せにする
ショートコード内の「icon_align=””」→「icon_align=”left”」に変更
ここにテキストを入れる
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="maru-sankaku" icon_align="left" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="wide" text_before="" text_after="" animation=""]
タイプを変える
フラットデザインにする
ショートコード内の「type=”normal”」を「type=”flat”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="flat" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
角丸にする
ショートコード内の「round=””」を「 round=”on”」に変更
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="on" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
リンク属性をつける
target=”blank”を付ける（別タブで開く）
ショートコード内の「target=””」を「 target=”blank”」に変更（自動で「rel=”noopener”」も付きます）
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="blank" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
noopenerを付ける
ショートコード内の「noopener=””」を「 noopener=”yes”」に変更（「 noopener=”no”」にすると外れます。 「target=”blank”」を追加したときは自動で付きます）
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="yes" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
noreferrerを付ける
ショートコード内の「noreferrer=””」を「 noopener=”yes”」に変更。「 noreferrer=”no”」にすると外れます。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="yes" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
nofollowを付ける
ショートコード内の「nofollow=””」を「 nofollow=”yes”」に変更。「 nofollow=”no”」にすると外れます。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="yes" sponsored="" width="" text_before="" text_after="" animation=""]
ショートコード内の「sponsored=””」を「 sponsored=”yes”」に変更。「 sponsored=”no”」にすると外れます。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="yes" width="" text_before="" text_after="" animation=""]
横並びにする
横並びにする（スマホでも横並び維持）
ワイドボタンを[colmun]～[/colmun]で囲む
コピペ用
[colmun]
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
[/colmun]
テキスト量に応じて幅を変えて横並びにする
通常ボタンを[colmun]～[/colmun]で囲む
コピペ用
[colmun]
[button url="https://www.yahoo.co.jp/" text="テキスト1" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
[button url="https://www.yahoo.co.jp/" text="テキスト2テキスト2" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation=""]
[/colmun]
補足テキストを入れる
上部テキスト
ショートコード内の「text_before=””」を「 text_before=”補足テキスト”」に変更。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="補足テキスト" text_after="" animation=""]
下部テキスト
ショートコード内の「text_after=””」を「 text_after=”補足テキスト”」に変更。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="補足テキスト" animation=""]
アニメーション
デフォルトで sponsoredが付きます。
ジャンプさせる
ショートコード内の「animation=””」を「 animation=”jump”」に変更。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation="jump"]
波紋を広げる
ショートコード内の「animation=””」を「 animation=”ripple”」に変更。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation="ripple"]
拡大させる
ショートコード内の「animation=””」を「 animation=”zoom”」に変更。
コピペ用
[button url="https://www.yahoo.co.jp/" text="ここにテキストを入れる" color="red" type="normal" icon="" icon_align="" round="" target="" noopener="" noreferrer="" nofollow="" sponsored="" width="" text_before="" text_after="" animation="zoom"]
属性値の意味
url=””
飛び先のURLを指定
text=””
ボタンに表示するテキストを指定
color=””
ボタンの色を指定（red、blue、pink、green、orange、light-green、light-pink、light-blue、light-orange、light-gray、rakuten、amazon）
type=””
ボタンのタイプを指定（normal、flat）
icon=””
アイコンの種類を指定（yajirusi、sankaku、maru-sankaku、gaibu）
icon_align=””
アイコンの位置を指定（right）
round=””
角丸の有無を指定（on）
target=””
別タブで開くかを指定（blank）
noopener=””
noopenerを付けるかを指定（yes、no）
noreferrer=””
noreferrerを付けるかを指定（yes、no）
nofollow=””
nofollowを付けるかを指定（yes、no）
sponsored=””
sponsoredを付けるかを指定（yes、no）
width=””
ボタンの幅を指定（wide、数字）
text_before=””
ボタン上部の補足テキストを指定
text_after=””
ボタン下部の補足テキストを指定
animation=””
アニメーションを指定（jump、ripple、zoom）
以上「ボタン」でした。
←般若ビルダー専用ショートコード一覧に戻る
