ショートコードでボタンを追加する

ショートコードを使ってボタンを追加します。

この機能は、プラグインであるShortcodes Ultimateをインストールして使用しています。

利点は、難しいコードを知らなくてもその機能が追加できることです。

では、実際にボタンを作成してみます。

 

ショートコード挿入

赤枠の部分の「ショートコードを挿入」をクリックします。

この画面が出てきます。

 

ボタン作成

赤枠の部分、ボタンをクリックします。

 

ボタン作成

まず、リンクするアドレスをコピペします。

アドレスは、間違いをなくすためにできるだけコピペで入れるほうが間違い少ないです。

その下のターゲット

Open in same tab・・・・そのままリンクページに移動します。

Open in new tab・・・・・新しいタブで開く

同じドメインのページならOpen in same tabでいいと思います。

次のスタイルもいろいろ変更して試してください。

 

ボタン作成

背景の色をここで指定します。

 

背景色

左記の画像のように色の選択も簡単です。

カラーコードを直接に設定することも可能です。

マウスで選択して設定する方が簡単です。

カラーコードは、自動で表示されますので・・・・

次にテキストの色ですが、背景に濃色がある場合は白がいいと思います。

こちらも背景同様にカラーピッカーで選択できます。

次にボタンの大きさを選択します。

スライダーを右にやると数値が大きくなります。

 

中央の初期設定は、いいえです。

センタリングしたいときだけにだけクリックするとはいに変更されます。

半径は、ボタンの角をどの程度にまとめるかですね

わからない場合は、そのままOKですよ

次にアイコンですが・・・

慣れてない方にとっては???でしょう。

右図のキャプチャー画像の矢印の部分

実は、これボタンなのです。

画像をそのまま使っているわけではありません。

画像と見分ける場合に文字の部分が選択できないのが画像なのです。

ボタンの場合は、選択できますよ。

前についてるWordPressのマークがありますね

これがアイコンというわけで

正確にはアイコンフォントというものを使用しております。

ボタンサンプル

アイコンピッカー

メディアマネージャーでアイコンを選択することも可能ですが・・・

今回は、アイコンフォントを使用するのでアイコンピッカーをクリックしたところです。

実に様々なアイコンが用意されています。

今回は、お問い合わせのボタンを作ろうと思うのでメールマークのアイコンを選択します。

テキストボックスのアルファベットは、自動的に挿入されますので書き方を覚える必要なしです。

 

ボタンアイコン

ちなみにメディアマネージャーをクリックしてファイル選択するとファイルへのリンクが挿入されています。

 

プレビューでみるとこんな感じです。

一応サンプル的に記載しておきます。

元に戻って

 

ボタン作成

アイコンの色については、テキストの色と同色がオーソドックスです。

コピペで選択してもOKです。

影については、分からない場合はそのままでOK

その下もいろいろと細かい設定ができるのですが今回ははしょります。

 

コンテンツのところに「お問い合わせ」と入れた後に実際にどう表示されるか

見ることができるのでライブプレビューのボタンをクリックします。

 

プレビューが表示されてボタンができました。

これでOKならショートコードを挿入というボタンをクリックして終わりです。

こんな感じでショートコードが挿入されます。

実際にサンプルページを作成していますので比較してみてください。

→ ボタンサンプルページ

ビジュアルでこの感じですが、右側にあるプレビューで見ていただくとちゃんと表示されますので心配無用ですよ。

いかがでしょう。

作成の際に参考になれば幸いです。

 

フォローお願いします!