ブログにボタンが簡単に出来る、WordPressプラグイン「Shortcodes Ultimate」のインストール方法
ブログにボタンをつくる方法
何年か、ブログを書いている内にボタンが説明のために必要になって
色々調べている内に・・・・
チョー便利な！「WordPressプラグイン・Shortcodes Ultimate」を
発見、使用してみたらボタンだけではなく色々使える。
「Shortcodes Ultimate」のインストール方法 とボタンの作り方を
説明します。
目次
WordPressプラグイン「Shortcodes Ultimate」
WordPressプラグイン「Shortcodes Ultimate」は、ボタン作成、
アニメーション、テーブル、カラムなどスタイリッシュな装飾が、
このプラグインひとつで、できちゃいます。
これはぜひとも使いこなしたい。
スポンサーリンク
「Shortcodes Ultimate」をインストールの仕方
まずは「Shortcodes Ultimate」をインストールして
あなたのサイトをさらにスタイリッシュに大変身させましょう。
まずは、ご自分のダッシュボードから・・・
ダッシュボード＞「プラグイン」＞「新規追加」をクリックします。
プラグインを追加画面で、キーワードに「Shortcodes Ultimate」を
記載しEnterキーで確定します。
「Shortcodes Ultimate」が表示されます。
最新のバージョンにも対応していますので
「今すぐインストール」をクリックします。
「Shortcodes Ultimate」の「有効化」をクリックしまします。
5
「Shortcodes Ultimate」が有効化されると、メニューに
「ショートコード」が追加されます。
「ショートコード」の「設定」をクリックします。
6
カスタムフォーマッチング、デフォルト値をスキップ等の設定がありますが
ここは、デフォルトのままで問題ありません。
そして記事投稿画面に「ショートコードを挿入」というボタンが
追加されています。こちらをクリックしましょう。
40種類以上の装飾メニューが開きます。
タイプ別フィルターで「コンテンツ」「ボックス」「メディア」「ギャラリー」
「データ」から設置したいパーツを選択することができます。
ブログにボタンが簡単に出来る！WordPressプラグイン「Shortcodes Ultimate」の
インストールとボタンの作り方
「Shortcodes Ultimate」のインストール方法とボタンの作り方アレンジが動画で見れます。
Shortcodes Ultimate ボタンの作り方
プラグイン「Shortcodes Ultimate」でボタンを
作って見ましょう。
Shortcodes Ultimate のインストール・有効化が終わったら、
投稿画面からリンクボタンの挿入が可能になります。
記事内に リンクボタン を挿入する手順
記事内に リンクボタン を挿入する手順です。
リンクボタンを挿入する場合、記事編集画面の
「ショートコードを挿入」をクリックします。
記事投稿管理画面です。
Shortcodes Ultimateをインストールすると
「ショートコードを挿入」が追加されます。
こちらを、クリックしましょう。
Shortcodes Ultimateの機能一覧が開きます。
タイプ別フィルター内の「ボタン」をクリックします。
設定 ボタンのデザイン・色・大きさなど
設定は・・・「リンク・スタイル・色（背景,テキスト）・アイコン（色）
コンテンツ・出来上がったボタンの保存です。
ターゲット（新しいタブで開くか）
スタイル（ボタンデザイン）
背景（色）
テキストの色
サイズ（ボタンの大きさ）
流体（レスポンシブにするか）
中央（中央表示にするか）
半径（ボタンの角を丸くする）
アイコン
アイコンの色
テキストの影
説明（ボタンの説明文）
onClick（onClickアクションのためのコード）
rel属性（rel属性に値を追加）
Title attribute（title属性）
クラス（別のCSSクラス）
コンテンツ（ボタン内テキスト）
タイプ別フィルター内の「ボタン」をクリックすると・・・？
3
ボタン作成管理画面が開きます。最初にボタンのリンク先を設定します。
今回は僕のホームページの URLを設定しました。
リンク先を同じタブで開くか、新しいタブで開くか選択します。
5
ボタンのスタイル （形やデザイン）を選択します。
プレビュー画面でスタイルを確認することができます。
ボタンの背景色を指定します。
カラーコード部分をクリックするとカラーピッカーが開きます。
好きな色を選択しましょう。
テキストの色を指定しても構いません。
カラーコードが分かっている場合はコードを入れても構いません。
ブログに合わせたカスタマイズされたカラーを入れることができます。
「原色大辞典」 色の名前とカラーコードが一目でわかるWEB色見本
サイズを指定できます。〇を左右にドラックして
サイズを決定してください。
ボタンの幅を指定します。
「いいえ」選択でカラム内100％幅で表示されます。
「はい」選択では文字数に合わせた幅で表示されます。
ボタンの位置を指定します。「いいえ」選択で左寄せ
「はい」選択で中央寄せになります。
ボタンの角のデザインを選択できます。
「自動」は小さな角丸
「ラウンド」は両サイド半円、正方形は丸めなしです。
5,10,20pxは各角丸めの半径指定です。
12
アイコンを設定できます。
「メディアマネージャー」クリックでメディアライブラリーにある
イラストを指定できます。
「アイコンピッカー」クリックでフィルタアイコン一覧が
表示されます。
ここでお好きなアイコンを指定できます。
アイコンの色を指定します。カラーコード部分を
クリックするとカラーピッカーが開きます。
好きな色を選択しましょう。
テキストの影を指定できます。
水平、垂直のオフセット、ぼかしをpx単位で指定できます。
またカラーコード部分をクリックして影の色を指定できます。
ボタン内下部の説明文を挿入できます。小さい文字サイズで表示されます。
16
onClick、rel属性、title属性、クラスの設定ができますが、ここは空欄でＯＫです。
17
コンテンツはボタン内に入れる言葉です。
最下部に「プレビュー」ボタンがあります。クリックしましょう。
ライブプレビューをクリックすると作成したボタンを見ることができます。
設定したボタンが表示されます。
思ったボタンではない場合、上の設定に戻り修正しましょう。
アイコンピッカーで選んだアイコンも、小さな説明文も
希望したものは全部入りました。
プレビュー確認でＯＫでしたら「ショートコードを挿入」を
クリックします。
ショートコードが挿入されました。ビジュアル記事投稿画面このように
表示されますが、記事プレビューでボタンを確認すると作成したボタンが
表示されます。心配いりません。
設定どおりのボタンが表示されていればＯＫです。
ボタンと文章のミックスです。
21
ボタンとボタンの間や、最後に文章を入れることができて
色々な使い道があります。
Shortcodes Ultimateの、プリセット機能
Shortcodes Ultimateには、一度設定した内容を記憶してくれる「プリセット」
機能があります。
「プリセット」をクリック後、「現在の設定をプリセットとして保存」を
クリックします。
あとからでもわかりやすいプリセット名を記入し
「ＯＫ」をクリックします。
プリセットに追加されました。
次回からは追加したプリセットを選択すると同じ設定条件で
ボタンを作ることができます。
アイコンボタン表示見本
ボタンカラー
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大これらをミックスすると、ありとあらゆるボタン作成が可能になります。
スポンサーリンク
ー 商品 リンク ー
