【図解で解説】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属性、クラスの設定ができますが、ここは空欄でＯＫです。
17. 
    最下部に「プレビュー」ボタンがあります。クリックしましょう。
18. 
    設定したボタンが表示されます。思ったボタンではない場合、上の設定に戻り修正しましょう。プレビュー確認でＯＫでしたら「ショートコードを挿入」をクリックします。
19. 
    ショートコードが挿入されました。記事プレビューでボタンを確認しましょう。
20. 
    設定どおりのボタンが表示されていればＯＫです。
21. 
    Shortcodes Ultimateには、一度設定した内容を記憶してくれる「プリセット」という便利な機能があります。「プリセット」をクリック後、「現在の設定をプリセットとして保存」をクリックします。
22. 
    あとからでもわかりやすいプリセット名を記入し、「ＯＫ」をクリックします。
23. 
    プリセットに追加されました。次回からは追加したプリセットを選択すると、同じ設定条件でボタンを作ることができます。お疲れ様でした。

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

【Shortcodes Ultimate】ボタン作成のショートコードをまとめました

WordPressプラグイン「Shortcodes Ultimate」をインストールしているブログで、作りたいボタン作成のコードがあれば、あとはコピーペーストして必要な個所を書き換

2021-07-12 12:28

図解で解説！Shortcodes Ultimateアニメーションの種類と設置方法

WordPressプラグイン「Shortcodes Ultimate」を使うと、文字、画像、ボタンなどに、いろいろな動きを付けることができます。アニメーション設置方法を説明しましょ

2021-07-12 12:29