アフィリエイト機能搭載！【SANGO ボタンブロック】の使い方

この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO ボタンブロック】について解説していきます。

【SANGO ボタンブロック】は、WordPressの標準のボタンブロックでは実現できないアイコン付きの見出しや、SANGOの種類豊富なボタンデザインから選択していただけるブロックになっています。

例えば以下のような見出しを【SANGO ボタンブロック】で作ることができます。

ボタンサンプル１

ボタンサンプル２

ボタンサンプル3

これらのボタン以外にも15種類の中からお気に入りのボタンスタイルを選択していただけます。

まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。

SANGOボタンブロックの呼び出し方

まずはエディターを開き、ブロック追加ボタンをクリックします。

クリックすると、ブロック一覧が表示されるのでその中から「SANGOボタン」と書かれたブロックを選択します。

各種設定項目

次に、SANGOボタンブロックの設定/項目についてご紹介します。

アフィリエイト機能

A8ネットなどのアフィリエイト用コードはよく以下のようなaタグとimgタグのHTML構造になっています。そのHTMLをそのまま貼り付ければアフィリエイトができますが、通常のHTMLだとリンクだけの簡素なものになってしまいがちです。そこで、SANGO ボタンブロックを使うことで、ボタンとしてアフィリエイトリンクを作ることができます。以下のソースコードからURL部分と、imgタグ部分をメモしておいてください。

<a href="ここがURL"  rel ="nofollow">........</a>
<img border="0" width="1" height="1" src="...." alt="">

メモしておいたURL部分とimgタグ部分をそれぞれ以下の項目に入力します

スタイル

18種類のスタイルを用意しています。

背景色

ボタンをお好きなカラーに変更できます。

ボタン表示のオプションについて

全てのボタンに共通してマウスオーバー時に影をつけることができます。以下のボタンでは、さらに表示の種類を追加で選択でき、使い方次第でより注目を引くことができます。SANGOでは以下の4つのオプションを提供しています。

1. マウスオーバー時に浮かび上がるようにする

マウスオーバーするとボタンが浮き上がるような表現になります。

ボタン

「マウスオーバー時のエフェクト」にチェックを入れることで反映されます。

2. エンボス加工でくぼみをつける

ボタンがくぼんだ表現になります。

ボタン

「エンボス」にチェックを入れることで反映されます。

3. ３Dでテキストに立体感を出す

ボタンのテキストが３Dのように立体的になります。

ボタン

「テキストを3d表示」にチェックを入れることで反映されます。

4. 影をつける

ボタンに影がついた表現になります。

ボタン

「影を表示」にチェックを入れることで反映されます。