この記事では、SANGO Gutenberg プラグインのオリジナルブロックである【SANGO ボタンブロック】について解説していきます。
【SANGO ボタンブロック】は、WordPressの標準のボタンブロックでは実現できないアイコン付きの見出しや、SANGOの種類豊富なボタンデザインから選択していただけるブロックになっています。
例えば以下のような見出しを【SANGO ボタンブロック】で作ることができます。
これらのボタン以外にも15種類の中からお気に入りのボタンスタイルを選択していただけます。
まずは、使い方をざっくりと掴んでいただけるように動画を用意しましたのでご覧ください。
目次 非表示
SANGOボタンブロックの呼び出し方
まずはエディターを開き、ブロック追加ボタンをクリックします。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/1b96824b9df1ea2c6f072271d87e12e8.png)
クリックすると、ブロック一覧が表示されるのでその中から「SANGOボタン」と書かれたブロックを選択します。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/f2e21a42fc51a7d554683a2a818b2d1a.png)
各種設定項目
次に、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タグ部分をそれぞれ以下の項目に入力します
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/15e3de1d116620b27b88d84658e80f73.png)
18種類のスタイルを用意しています。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/83f14a867f371e18ef38c2ffb0c53e97.png)
ボタンをお好きなカラーに変更できます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/ffbf8b32a65f8289f92cab2823110231.png)
全てのボタンに共通してマウスオーバー時に影をつけることができます。以下のボタンでは、さらに表示の種類を追加で選択でき、使い方次第でより注目を引くことができます。SANGOでは以下の4つのオプションを提供しています。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/ac9ccc0adee40d417f894fa77f99b9da.png)
- マウスオーバー時に浮かび上がるようにする
- エンボス加工でくぼみをつける
- 3Dでテキストに立体感を出す
- 影をつける
1. マウスオーバー時に浮かび上がるようにする
マウスオーバーするとボタンが浮き上がるような表現になります。
「マウスオーバー時のエフェクト」にチェックを入れることで反映されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/5c3a1ac69c8712600412ce440c967883.png)
2. エンボス加工でくぼみをつける
ボタンがくぼんだ表現になります。
「エンボス」にチェックを入れることで反映されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/8501b1230ef3d6ad0a3e3952002ef995.png)
3. 3Dでテキストに立体感を出す
ボタンのテキストが3Dのように立体的になります。
「テキストを3d表示」にチェックを入れることで反映されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/2a9801523a29d6ffe9936fbea79bd435.png)
4. 影をつける
ボタンに影がついた表現になります。
「影を表示」にチェックを入れることで反映されます。
![](https://saruwakakun.com/sango/wp-content/uploads/2021/05/15aa3e76bf7be5f5faa48b9765388e90.png)
中央寄せ
デフォルトだと左側に配置されるのですが、ボタンを中央に寄せるにはどうすればよろしいでしょうか。宜しくお願いします…バージョンはSANGO3.0です。
imgタグ部分がどこからどこまでも指すのかわかりません。
いつもありがとうございます。 アフィリエイト機能搭載!【SANGO ボタンブロック】の使い方のところで質問です。 imgタグ部分がどこからどこまでも指すのかわかりません。 の全てをいれるのでしょうか?
SANGO ボタンブロックのボタン背景色を変更したい
いつもお世話になっております。 Sango のボタンブロックでオレンジのボタンの色を変えたいのですが、 【マウスオーバーでふわっと浮き上がるオレンジ色の角が丸くてかわいいボタン】の背景色を指定するオプションがありません。 参考画像:https://drive.google.com/file/d/1Q1jtQ8weLC_-TDAB_OH5CcZOgtXcU4ob/view?usp=sharing そ…