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]
グリーン・中央・サイズ２０
[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]
レッド・中央・サイズ２０
[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]
バイオレット・中央・サイズ２０
[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]
イエロー・中央・サイズ２０
[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]
グレー・中央・サイズ２０
[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]
ブラック・中央・サイズ２０
[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色見本原色大辞典
WEB色見本原色大辞典
よく読まれている関連記事
図解で解説！Shortcodes Ultimateアニメーションの種類と設置方法
WordPressプラグイン「Shortcodes Ultimate」を使うと、文字、画像、ボタンなどに、いろいろな動きを付けることができます。アニメーション設置方法を説明しましょ
2021-07-12 12:29
【動画解説】Shortcodes Ultimateのアニメーション機能を使った動くボタンの設置方法
記事中で、「公式サイトはこちら」や「詳細はこちら」などのリンクボタンを設置する場面は多くあると思います。ボタンにちょっとした動きを付けることで、注目を集めクリック率の向上にもつなが
2021-07-12 12:29
