ブログにボタンが簡単に出来る、WordPressプラグイン「Shortcodes Ultimate」のインストール方法

ブログにボタンをつくる方法

何年か、ブログを書いている内にボタンが説明のために必要になって
色々調べている内に・・・・

 

チョー便利な!「WordPressプラグイン・Shortcodes Ultimate」を
発見、使用してみたらボタンだけではなく色々使える。

 

「Shortcodes Ultimate」のインストール方法 とボタンの作り方を
説明します。

 


 

 

WordPressプラグイン「Shortcodes Ultimate」

WordPressプラグイン「Shortcodes Ultimate」は、ボタン作成、
アニメーション、テーブル、カラムなどスタイリッシュな装飾が、
このプラグインひとつで、できちゃいます。

 

これはぜひとも使いこなしたい。

 

スポンサーリンク

 

 

「Shortcodes Ultimate」をインストールの仕方

まずは「Shortcodes Ultimate」をインストールして
あなたのサイトをさらにスタイリッシュに大変身させましょう。

1
スクリーンショット 2018 04 25 20 09 04

 

まずは、ご自分のダッシュボードから・・・
ダッシュボード>「プラグイン」>「新規追加」をクリックします。

2
スクリーンショット 2018 04 25 20 10 19

 

プラグインを追加画面で、キーワードに「Shortcodes Ultimate」を
記載しEnterキーで確定します。

3
スクリーンショット 2018 04 25 20 19 19

 

「Shortcodes Ultimate」が表示されます。
最新のバージョンにも対応していますので
「今すぐインストール」をクリックします。

4
スクリーンショット 2018 04 25 20 22 52

 

「Shortcodes Ultimate」の「有効化」をクリックしまします。

5
スクリーンショット 2018 04 25 20 25 14

 

「Shortcodes Ultimate」が有効化されると、メニューに
「ショートコード」が追加されます。

「ショートコード」の「設定」をクリックします。

6
スクリーンショット 2018 04 25 11 29 42

 

カスタムフォーマッチング、デフォルト値をスキップ等の設定がありますが
ここは、デフォルトのままで問題ありません。

7
スクリーンショット 2018 04 25 20 40 33

 

そして記事投稿画面に「ショートコードを挿入」というボタンが
追加されています。こちらをクリックしましょう。

8
スクリーンショット 2018 04 25 20 43 25

 

40種類以上の装飾メニューが開きます。

 

タイプ別フィルターで「コンテンツ」「ボックス」「メディア」「ギャラリー」
「データ」から設置したいパーツを選択することができます。
 

ブログにボタンが簡単に出来る!WordPressプラグイン「Shortcodes Ultimate」の
インストールとボタンの作り方

「Shortcodes Ultimate」のインストール方法とボタンの作り方アレンジが動画で見れます。
 

 

 

Shortcodes Ultimate ボタンの作り方

プラグイン「Shortcodes Ultimate」でボタンを
作って見ましょう。

 

Shortcodes Ultimate のインストール・有効化が終わったら、
投稿画面からリンクボタンの挿入が可能になります。
 

 

記事内に リンクボタン を挿入する手順

記事内に リンクボタン を挿入する手順です。

リンクボタンを挿入する場合、記事編集画面の
「ショートコードを挿入」をクリックします。

1
スクリーンショット 2018 04 25 20 40 33

 

記事投稿管理画面です。
Shortcodes Ultimateをインストールすると

「ショートコードを挿入」が追加されます。
こちらを、クリックしましょう。

2
スクリーンショット 2018 04 25 13 37 11

 

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

 

設定 ボタンのデザイン・色・大きさなど

設定は・・・「リンク・スタイル・色(背景,テキスト)・アイコン(色)
コンテンツ・出来上がったボタンの保存です。

 

リンク(URL)
ターゲット(新しいタブで開くか)
スタイル(ボタンデザイン)
背景(色)
テキストの色
サイズ(ボタンの大きさ)
流体(レスポンシブにするか)
中央(中央表示にするか)
半径(ボタンの角を丸くする)
アイコン
アイコンの色
テキストの影
説明(ボタンの説明文)
onClick(onClickアクションのためのコード)
rel属性(rel属性に値を追加)
Title attribute(title属性)
クラス(別のCSSクラス)
コンテンツ(ボタン内テキスト)

 

タイプ別フィルター内の「ボタン」をクリックすると・・・?

3
スクリーンショット 2018 04 25 20 52 36

 

ボタン作成管理画面が開きます。最初にボタンのリンク先を設定します。
今回は僕のホームページの URLを設定しました。

4
スクリーンショット 2018 04 25 21 03 57

 

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

5
スクリーンショット 2018 04 25 21 09 04

 

ボタンのスタイル (形やデザイン)を選択します。
プレビュー画面でスタイルを確認することができます。

6
スクリーンショット 2018 04 25 21 12 47

 

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

7
スクリーンショット 2018 04 25 21 17 18

 

テキストの色を指定しても構いません。
カラーコードが分かっている場合はコードを入れても構いません。

ブログに合わせたカスタマイズされたカラーを入れることができます。

「原色大辞典」 色の名前とカラーコードが一目でわかるWEB色見本

8
スクリーンショット 2018 04 25 21 23 28

 

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

9
スクリーンショット 2018 04 25 21 30 08

 

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

10
スクリーンショット 2018 04 25 21 39 41 1

 

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

11
スクリーンショット 2018 04 25 21 44 42

 

ボタンの角のデザインを選択できます。
「自動」は小さな角丸
「ラウンド」は両サイド半円、正方形は丸めなしです。

5,10,20pxは各角丸めの半径指定です。

12

 

アイコンを設定できます。
「メディアマネージャー」クリックでメディアライブラリーにある
イラストを指定できます。

「アイコンピッカー」クリックでフィルタアイコン一覧が
表示されます。
ここでお好きなアイコンを指定できます。

13
スクリーンショット 2018 04 25 21 50 18

 

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

14
スクリーンショット 2018 04 25 21 52 34

 

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

15
スクリーンショット 2018 04 25 21 55 51

 

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

16
スクリーンショット 2018 04 25 21 59 42

 

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

17

 

コンテンツはボタン内に入れる言葉です。

 

最下部に「プレビュー」ボタンがあります。クリックしましょう。
ライブプレビューをクリックすると作成したボタンを見ることができます。

18
スクリーンショット 2018 04 25 22 10 45 1

 

設定したボタンが表示されます。
思ったボタンではない場合、上の設定に戻り修正しましょう。

アイコンピッカーで選んだアイコンも、小さな説明文も
希望したものは全部入りました。

プレビュー確認でOKでしたら「ショートコードを挿入」を
クリックします。

19
スクリーンショット 2018 04 25 22 19 14

 

ショートコードが挿入されました。ビジュアル記事投稿画面このように
表示されますが、記事プレビューでボタンを確認すると作成したボタンが
表示されます。心配いりません。

20
スクリーンショット 2018 04 25 22 22 29

 

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

ボタンと文章のミックスです。
21

スクリーンショット 2018 04 25 22 32 22

 

ボタンとボタンの間や、最後に文章を入れることができて
色々な使い道があります。
 

 

Shortcodes Ultimateの、プリセット機能

Shortcodes Ultimateには、一度設定した内容を記憶してくれる「プリセット」
機能があります。

1
スクリーンショット 2018 04 25 22 39 13

 

「プリセット」をクリック後、「現在の設定をプリセットとして保存」を
クリックします。

2
スクリーンショット 2018 04 25 22 37 28

 

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

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

 

アイコンボタン表示見本

ボタンカラー

 
Click top Click top Click top Click top Click top Click top Click top Click top Click top Click top Click top Click Top

 

アイコンの形は「自動」アイコンの背景カラーはカラーピッカーから選び
影は黒です。表示位置は左寄せ、コンテンツは「Click Top」です。

 

ボタンスタイル

Click Top Click Top Click Top Click Top Click Top Click Top Click Top Click Top Click Top

 

ボタンの角の丸さ変更

Click Top Click Top Click Top Click Top Click Top Click Top

 

ボタンアイコン

ボタンアイコンにアイコンを付けることができます。

Click Top Click Top Click Top Click Top Click Top Click Top

 

ボタンの大きさ

ボタンの大きさを変えることができます。

自動の角3大 正方形 6大 ラウンド 8大 10pxの角10大 ゴースト透明 14大

これらをミックスすると、ありとあらゆるボタン作成が可能になります。

 

 

スポンサーリンク

この記事を読んだなら、以下記事もおすすめ!

   

ー 商品 リンク ー

健康に良い食材商品リンク
完全無欠朝食バター コーヒーで使用 健康に良い 食用油オイル 体に良いハチミツ 食品に関する 書籍
HARIO (ハリオ) ハリオール ブライト コーヒー & ティー フレンチ プレス 4杯用 THJ-4SV

バージンココナッツ オイル

マヌカハニーMGO400+ 500g ジョコビッチの生まれ変わる食事
HARIO (ハリオ) ミルク 泡立て器 クリーマーゼット CZ-1  ブラウンシュガーファースト 有機エキストラバージンココナッツオイル  マヌカハニー バイオアクティブ 20+(UMF20+) 500g マヌカドクター【海外直送】 (1個) [並行輸入品] シリコンバレー式 最強の食事
業務用5kg フォンテラ社グラスフェッドバター バージン オリーブオイル エキストラバージン オリーブオイル 酸度0.3%以下 250ml ココナッツ癒しパワー 健康で、美く
ニュージランド産 グラスフェットバター無塩1kg 冷凍 安全ですばらしい 亜麻仁油 フジッコ カスピ海 ヨーグルト 「腸の力」であなたは変わる: 一生病気にならない、脳と体が強くなる食事法 (単行本)
ギー・イージー 100g  MCTオイル グルテンフリー食品 はじめてのオーガニック手帖
コーヒー豆 プレミアムブレンド 100g レインフォレスト  ココナッツオイル100% ココヤシの泉 ナチュレオ 912g 【生活科学研究会】 オーガニック ココナッツ&ギー(グラスフェッドバター)325ml混ぜるだけでバターコーヒー(完全無欠コーヒー)にEU有機認証 

からだの中から若返るグリーンスムージー健康法

携帯出来る MCTオイル (20g×10包)  グルテンフリーパン 

あなたは半年前に食べたものでできている 実践編

 マウントハーゲン オーガニック フェアトレード インスタントコーヒー100g 携帯用日本製粉 アマニ油 ミニパック 5g 30袋  グルテンフリーパスタ