記事にボタンを追加できるプラグイン “Shortcodes Ultimates” が便利

こんにちは、ゆーすけ()です。

Plug

今回は久しぶりにワードプレスのプラグインのお話。
記事の中にかんたんにおしゃれなボタンを追加できるお手軽プラグイン “Shortcodes Ultimate” を使ってみました。

カスタマイズ性が高く便利なプラグインですよ。

 

 

プラグイン導入の経緯

僕のブログはもう少しで開設からまる1年を迎えるわけですが、スタートした当初は本当に右も左もわからずCSS(スタイルシート)も適当にいじっていました。

おそらくそれが原因になり、ちょっとここカスタマイズしたいなぁと思ってCSSに変更を加えてもなぜか反映されないことが多くなりました。

見た目にもキレイなボタンを追加してクリック率を上げたいところなんですがこれじゃあカスタマイズできない!
というわけで今回の “Shortcodes Ultimates” というプラグインを見つけたわけです。

 

Shortcodes Ultimatesでボタンを追加

このプラグインを使うとこんな感じでボタンを追加することができます。
ボタンクリックでこのページの一番上に移動します。 

ボタン例

複雑なコードやCSSの変更の必要もなく簡単に仕上げることができます。
もちろん色や見た目のカスタマイズもできるため、ブログテーマに沿った形に仕上げることができます。

 

Shortcodes Ultimatesの使い方

まずはプラグインを追加しましょう。
ワードプレスのプラグイン検索から “Shortcodes Ultimates”を検索してインストール→有効化まで進めます。

Shortcodes

するとワードプレス投稿画面に「ショートコードを挿入」ボタンが増えていることがわかりますね。

Ex

そこから進むとこのプラグインでできるカスタマイズ一覧がズラズラっと表示されますが、この中から「ボタン」をクリックします。

Bottun

とにかく多機能なプラグインですが、今回はボタン挿入のみ紹介しますね。

ボタンをクリックするとどういうスタイルに仕上げるか細かくカスタマイズすることができます。

Kinou  1

リンク先の設定、ボタンの見た目、色、文字の色、アイコンの追加など自由に設定することができます。

見た目は次の9種類から選ぶことができます。
カーソルをボタンに乗せた時の動き方が違うことがわかります。

デフォルト
デフォルト 

フラット
フラット

ゴースト
ゴースト

ソフト
ソフト

ガラス
ガラス


ノイズ
ノイズ

撫でる
撫でる

3D
3D

色々あって使い勝手がよさそうです。

設定の一番下にはプレビューで確認できる機能があるので嬉しいですね。

Setting

 

ショートコードを貼り付けるだけ

全ての設定を終えて「ショートコードを挿入」をクリックすると次のような文字が入力されていることがわかります。

「su_button url=”http://#” style=”3d” background=”#f59a0b” color=”#ffffff” size=”6″ icon=”icon: forward” text_shadow=”1px 3px 5px #000000”」3D「/su_button」

うぉっ!?バグった!?と一瞬思うかもしれませんがこれで大丈夫です。ワードプレスのプレビュー画面を見るとちゃんとボタンに反映されています。

全文をコピペすれば文中の好きな箇所にボタンを挿入できるので試してみて下さい。

 

便利なプリセット機能

さっきの設定画面右下にプリセットという項目があります。

Setting2

自分が設定したボタンスタイルや色、文字の大きさなどを登録してプリセットとして使うことができる便利機能です。

プリセット数は複数OKなので用途に応じて作っておけば簡単にプリセットを切り替えることも可能!

 

CSSを使ってボタンを作成

でもこれ、本当はCSSでボタンを作ることもできます。
というか本来だとCSSでやるほうがいいんです。
プラグイン使うと動作が重たくなることがあるし、他のプラグインと干渉して不具合が起きる可能性も高くなりますし。

でも今の僕にはごちゃごちゃになってしまったCSSを修復するだけの力はないのでプラグインに頼るしかありません。

もっと勉強しないと・・・

 

 

まとめ

お手軽にオシャレボタンを追加できる “Shortcodes Ultimates”はおすすめです。
難しい知識も必要なく項目を埋めるだけでサクサク進めることができます。

無料プラグインということもあるのでぜひ導入してみましょう! 

ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼複業で立ち上げたご署名ネットではこれまで1,600人以上、11,000点以上の作成実績。TV, ラジオ, 雑誌など出てます。▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします

FOLLOW

カテゴリー:
関連記事