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

スポンサーリンク

The following two tabs change content below.

ゆーすけ

ブログに加え、デザイン、カメラマン、執筆をこなすサラリーマン。通称パラレルブロガー。のんびりしてそうでホントにのんびり屋。プロフィールはこちら。運営サイト:サインを作るならご署名ネット。クラシックミニ専門サイトの32miniドットコム

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

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”はおすすめです。
難しい知識も必要なく項目を埋めるだけでサクサク進めることができます。

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

スポンサーリンク

スタイリッシュなサイン、作ります!

世界に1つだけのあなたのオリジナルサインをゆーすけが作成します。

ローマ字、日本語、カタカナ、芸能人のようなサインまで多種多様な用途に応じて作ります。

サービス開始から半年たらずで100件以上のオーダーをいただいています。

サインは1件3000円。納品時には書き方のコツ資料、書き順動画、サイン練習帳もお送りします。

クレジットカードや書類にビシッとかっこいいサインが書けたら素敵ですね!