【図解で解説】Shortcodes Ultimateのボタンの種類と作成手順

WordPressプラグイン「Shortcodes Ultimate」の優れた機能のひとつ「ボタン」の作り方を説明しましょう。サイズ・カラー・スタイル・アイコンまで各種自由に選択することができます。

ボタンは大事なパーツですね!

Shortcodes Ultimateボタンサンプルをご覧ください

まずはShortcodes Ultimateでどのようなボタンを作ることができるのか、ボタンサンプルをご覧ください。きっとあなたの思い通りのボタンを作ることができますよ。

ボタンサイズ

Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Unlimited sizes!

ボタンカラー

Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me Click me

ボタンスタイル

Click me Click me Click me Click me Click me Click me Click me Click me Click me

ボタン角丸め

Click me Click me Click me Click me

ボタンアイコン

Click me Click me Click me Click me Click me Click me

Shortcodes Ultimateボタンの作り方

それではShortcodes Ultimateでボタンを作成する手順を説明しましょう。


  1. 記事投稿管理画面です。Shortcodes Ultimateをインストールすると「ショートコードを挿入」が追加されます。クリックしましょう。

  2. Shortcodes Ultimateの機能一覧が開きます。タイプ別フィルター内の「ボタン」をクリックします。

  3. ボタン作成管理画面が開きます。最初にボタンのリンク先を設定します。

  4. リンク先を同じタブで開くか、新しいタブで開くか選択します。

  5. ボタンのスタイルを選択します。プレビュー画面でスタイルを確認することができます。

  6. ボタンの背景色を指定します。カラーコード部分をクリックするとカラーピッカーが開きます。好きな色を選択しましょう。

  7. テキストの色を指定します。カラーコード部分をクリックするとカラーピッカーが開きます。好きな色を選択しましょう。

  8. サイズを指定できます。〇を左右にドラックしてサイズを決定してください。

  9. ボタンの幅を指定します。「いいえ」選択でカラム内100%幅で表示されます。「はい」選択では文字数に合わせた幅で表示されます。

  10. ボタンの位置を指定します。「いいえ」選択で左寄せ、「はい」選択で中央寄せになります。

  11. ボタンの角のデザインを選択できます。「自動」は小さな角丸、「ラウンド」は両サイド半円、正方形は丸めなし、5,10,20pxは各角丸めの半径指定です。

  12. アイコンを設定できます。「メディアマネージャー」クリックでメディアライブラリーにあるイラストを指定できます。「アイコンピッカー」クリックでフィルタアイコン一覧が表示されます。ここでお好きなアイコンを指定できます。

  13. アイコンの色を指定します。カラーコード部分をクリックするとカラーピッカーが開きます。好きな色を選択しましょう。

  14. テキストの影を指定できます。水平、垂直のオフセット、ぼかしをpx単位で指定できます。またカラーコード部分をクリックして影の色を指定できます。

  15. ボタン内下部の説明文を挿入できます。小さい文字サイズで表示されます。

  16. onClick、rel属性、title属性、クラスの設定ができますが、ここは空欄でOKです。

  17. 最下部に「プレビュー」ボタンがあります。クリックしましょう。

  18. 設定したボタンが表示されます。思ったボタンではない場合、上の設定に戻り修正しましょう。プレビュー確認でOKでしたら「ショートコードを挿入」をクリックします。

  19. ショートコードが挿入されました。記事プレビューでボタンを確認しましょう。

  20. 設定どおりのボタンが表示されていればOKです。

  21. Shortcodes Ultimateには、一度設定した内容を記憶してくれる「プリセット」という便利な機能があります。「プリセット」をクリック後、「現在の設定をプリセットとして保存」をクリックします。

  22. あとからでもわかりやすいプリセット名を記入し、「OK」をクリックします。

  23. プリセットに追加されました。次回からは追加したプリセットを選択すると、同じ設定条件でボタンを作ることができます。お疲れ様でした。

よく読まれている関連記事

【Shortcodes Ultimate】ボタン作成のショートコードをまとめました
WordPressプラグイン「Shortcodes Ultimate」をインストールしているブログで、作りたいボタン作成のコードがあれば、あとはコピーペーストして必要な個所を書き換
2021-07-12 12:28
図解で解説!Shortcodes Ultimateアニメーションの種類と設置方法
WordPressプラグイン「Shortcodes Ultimate」を使うと、文字、画像、ボタンなどに、いろいろな動きを付けることができます。アニメーション設置方法を説明しましょ
2021-07-12 12:29

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


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

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

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

コメントを残す

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

未来派野郎hiro販売商品

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