今日はWEB上で無料で使える人気サイト『ボタンメーカー』でボタン(バナー)を生成し、Wordpressにアップロードする方法を説明します。
非常に簡単ですので実践しながら覚えてしまいましょう。

今日完成したボタン(バナー)

ボタン


ボタンメーカーでボタンを自動生成する設定方法

ボタンメーカー
サイズ

ボタンやバナーのサイズを設定します。

ボタンであれば、横:縦で「200pix:50pix」程度、バナーであれば「700pix:70pix」程度を目安に作成すると良いでしょう。

背景色

背景色はクリックして好きな色を選べばよいでしょう。

枠線

枠線は背景色が掲載するWEBサイトと似ている際に使用すると良いでしょう。

また派手なボタンにしたい際には使用しても構いませんし、無くても構いません。

太い枠線が良ければ2pix、細い枠線が良ければ1pixで設定しましょう。

背景ライン

背景ラインは無くても構いません。

使用したいなら好きな模様パターンを選択し濃さを設定してください。

テキスト1

テキスト1はメインとなる誘導文句です。

「無料請求はコチラ!」や「詳しく見る」や「購入する。」などです。

テキスト2

テキスト2はサブとなる誘導文句です。無くても構いません。

「今だけキャンペーン中!」や「3月までの限定販売!」や「今やらなきゃいつやるの!?」などです。

丸い角

設定しなければボタンやバナーは角のある四角形です。

丸みを帯びさせたい時や3Dに見せたい時ににチェックを入れます。

タブ

タブは設定する必要はありません。

クリア調

クリア調は光沢のことです。無くても構いません。

クリア調を設定することでクリック率が高まるというデータも存在しますが、現在のWEBサイトのトレンドでは3Dよりも2Dのフラットデザインが最もクールで洗練されていると考えられているために使用しなくても構いませんし、フラットデザインでオシャレに見えた方が信頼度も上がると思います。

Create

全て設定し終えたら、また途中でもCreateボタンを押せば、現在の設定のボタンやバナーが表示されます。

設定を変更したりしながら微調整を加えて納得のいくボタンやバナーを生成しましょう。

完成したらマウスを「右クリック」⇒「名前を付けて画像を保存」

⇒任意の名前を付けPCの好きな場所に保存しましょう。ファイル形式がGIFで設定されていることに留意しておいてください。


Wordpressにボタン(バナー)をアップロードしてリンク付け

Wordpress記事編集画面
WordPressにアップロード
記事中でボタンを挿入したい場所で「メディアを追加」⇒「ファイルをアップロード」⇒「先程付けた名前.gif」を選択⇒アップロードされたら「タイトル欄」に「○○○のボタン」と分かり易く記入⇒「投稿に挿入」

 

挿入したボタンやバナーにリンク付け
記事編集画面にて、新たに挿入されたボタンやバナーをマウスで選択し、ビジュアルモードならクリップマークのアイコンの「リンクを挿入」をクリック、テキストモードなら「link」ボタンをクリック。

出てくるポップアップウィンドウにリンクして飛ばしたいURLをコピー&ペースト、他サイトのプロモーションページにリンクさせたいなら「リンクを新しいタブで開く」のチェックボックスにチェックを入れる。

 

プレビューで動作確認

記事編集画面の右の「公開」パネルの「プレビュー」ボタンをクリックしてプレビュー表示し、実際にクリックしてみてリンク先が正常に表示されているかを確認する。

今回は例として当サイトiborc.comのメルマガ登録画面にリンクをさせました。

ボタン

これで完成です。


動画で実演を観てより詳細に理解する




☥IBORCを応援して下さい。