WordPressプラグイン「Shortcodes Ultimate」ボタンショートコードまとめ

WordPressプラグイン「Shortcodes Ultimate」をインストールしているブログで、作りたいボタン作成のコードがあれば、あとはコピーペーストして必要な個所を書き換えるだけでスタイリッシュなボタンを設置することが可能です。ここではShortcodes Ultimateで作成できる基本的ボタンのショートコードを紹介します。

Shortcodes Ultimate:ボタンサイズ別ショートコード

グリーン・中央・サイズ10

[su_button url="http://miraiha.info/web/401/" target="blank" background="#4a9530" size="10" center="yes" icon="icon: arrow-circle-o-right" text_shadow="0px 0px 0px #000000"]ご購入はこちら[/su_button]

グリーン・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#4a9530" size="15" center="yes" icon="icon: arrow-circle-o-right" text_shadow="0px 0px 0px #000000"]ご購入はこちら[/su_button]

グリーン・中央・サイズ30

[su_button url="http://miraiha.info/web/401/" target="blank" background="#4a9530" size="30" center="yes" icon="icon: arrow-circle-o-right" text_shadow="0px 0px 0px #000000"]ご購入はこちら[/su_button]

Shortcodes Ultimate:ボタンカラー別ショートコード

ブルー・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

グリーン・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#359942" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

レッド・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#dc1c35" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

バイオレット・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#88319d" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

イエロー・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#e4e928" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

グレー・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#848389" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブラック・中央・サイズ20

[su_button url="http://miraiha.info/web/401/" target="blank" background="#000000" size="20" center="yes" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

Shortcodes Ultimate:ボタンスタイル別ショートコード

ブルー・中央・サイズ20・デフォルト

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・フラット

[su_button url="http://miraiha.info/web/401/" target="blank" style="flat" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・ゴースト

[su_button url="http://miraiha.info/web/401/" target="blank" style="ghost" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・ソフト

[su_button url="http://miraiha.info/web/401/" target="blank" style="soft" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・ガラス

[su_button url="http://miraiha.info/web/401/" target="blank" style="glass" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・泡

[su_button url="http://miraiha.info/web/401/" target="blank" style="bubbles" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・ノイズ

[su_button url="http://miraiha.info/web/401/" target="blank" style="noise" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・撫でる

[su_button url="http://miraiha.info/web/401/" target="blank" style="stroked" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・3D

[su_button url="http://miraiha.info/web/401/" target="blank" style="3d" size="20" center="yes" radius="10" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

Shortcodes Ultimate:ボタン角丸め別ショートコード

ブルー・中央・サイズ20・ラウンド

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" radius="round" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・正方形

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" radius="0" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・半径5px

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" radius="5" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

ブルー・中央・サイズ20・半径20px

[su_button url="http://miraiha.info/web/401/" target="blank" size="20" center="yes" radius="20" icon="icon: arrow-circle-o-right" text_shadow="2px 2px 2px #000000"]ご購入はこちら[/su_button]

色選びならこちらのサイトを参考に

ボタンの背景色はカラーピッカーで選択することができますが、こちらのカラーコード一覧で色を決めてカラーコードの番号を記入する方法もあります。参考にしてください。
WEB色見本原色大辞典

「Shortcodes Ultimate」ボタンショートコード関連記事

図解で解説!WordPressプラグイン「Shortcodes Ultimate」ボタンの作り方

当ブログはWordPressテンプレートALPHAを使用しています

コメントは受け付けていません。