【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」を使うと、文字、画像、ボタンなどに、いろいろな動きを付けることができます。アニメーション設置方法を説明しましょ
2021-07-12 12:29
【動画解説】Shortcodes Ultimateのアニメーション機能を使った動くボタンの設置方法
記事中で、「公式サイトはこちら」や「詳細はこちら」などのリンクボタンを設置する場面は多くあると思います。ボタンにちょっとした動きを付けることで、注目を集めクリック率の向上にもつなが
2021-07-12 12:29

この記事が気に入ったら
いいね ! しよう


未来派野郎hiro公式メルマガ「プロパガンダ」
メールマガジン『PROPAGANDA:プロパガンダ』は完全無料で登録できます。

もしあなたが、ネットビジネスで「経済的自由」「時間的自由」「場所的自由」を手に入れたいのであれば、このメルマガに登録してください。ネットビジネスに関する最新情報をタイムリーに発信しています。

今なら登録者の方に豪華特典を差し上げています。また、メール内でも随時特典を配布させていただきますので、楽しみにしていただければと思います。

コメントを残す

【OWC】未来派野郎hiro運営コミュニティー

未来派野郎hiro販売商品

ALPHA WordPress Theme
WordPressがはじめてという方でも直感的な操作でプロ顔負けのシックなサイトを作ることができます。
税金対策ストラテジー「NTS」
アフィリエイトに特化した税理士Kが教える確定申告・節税マニュアル。会社設立についても学べます。
YouTube Adds pro
YouTube動画の表現力を最大限に引き出すWordPressプラグイン。未来派製作販売商品です。