今回は『Cocoonのボタンリンクの使い方』について解説していきます。
Cocoonなら操作方法を知るだけで、誰でも簡単にこのようなボタンリンクを作ることができます。
種類も豊富にありますので、自分好みのボタンリンクを作りたい方は、ぜひ参考にしてみてください。
Cocoonのボタンリンクの種類
Cocoonのボタンリンクは種類が豊富です。
まずはCocoonのボタンの種類を確認しておきましょう。
色は18種類
Cocoonのボタンの色は全部で18種類あります。
- レッド
- ピンク
- パープル
- ディープパープル
- インディコ[紺色]
- ブルー
- ライトブルー
- シアン
- ティール[緑色がかった青]
- グリーン
- ライトグリーン
- ライム
- イエロー
- アンバー[琥珀色]
- オレンジ
- ディープオレンジ
- ブラウン
- グレー
ボタンリンクは色によってクリック率が変わりますが、一般的には読者に安心感を与える『緑』が一番クリックされやすいと言われています。
しかし、ブログ全体の配色や、扱っているテーマによっても変わりますので、どの色がベストか？は検証してみると良いです。
ちなみに、ボタンリンクを目立たせるには、あえてブログ全体の色と逆色を選んでみるのも一つの手です。
僕の場合はブログ全体が寒色系なら、ボタンを目立たせるために暖色系にすることもあります。
サイズは3種類
Cocoonのボタンのサイズは『小・中・大』の3種類あります。
ボタンサイズはテキストの長さで変わりますが、「小・中だと小さい」と感じる方や、ブログ全体に統一感を持たせたい方は『大』がオススメです。
Cocoonの『ボタン』と『囲みボタン』の違い
Cocoonでボタンリンクを作るときは『ボタン』と『囲みボタン』の２つの方法があります。
しかし、この２つは操作方法が異なるため、気を付けてください。
自分でリンクを作る場合はどちらでも良いですが、ASPのアフィリエイトリンクをボタンにする場合は囲みボタンのほうが便利です。
言葉だけの解説では分かりにくいと思いますので、次からは実際の操作方法を解説していきます。
クラシック編とブロック編で分けてお伝えしますので、普段利用しているエディターの使い方を参考にしてみてください。
Cocoonのボタンの使い方【クラシック編】
ここではクラシックエディターのビジュアルモード、またはGutenbergのクラシックブロックでボタンリンクを作成する方法をお伝えします。
ボタンリンクはどちらも『スタイル』メニューから選択します。
【クラシックエディターのビジュアルモード】
【Gutenbergのクラシックブロック】
なお、操作手順は全く同じなので、ここではクラシックエディターのビジュアルモードを使っていきます。
『ボタン』の使い方
まずはボタンリンク上に表示させるテキストを入力して選択します。
ボタンを選択します。
- スタイル
- ボタン
- 好きな色とサイズ
これでテキストがボタンの形状になりました。
続いてリンクを設置します。
- リンクの挿入
- リンク先URLを入力
- 『適用』をクリック
これでボタンリンクの完成です。
この手順で上手くいかない場合は、このあと解説する『囲みボタン』を使った方法をお試しください。
『囲みボタン』の使い方（自作リンクの場合）
囲みボタンの場合は、先にリンクを作ります。
- テキストを入力して選択
- リンクの挿入
- リンク先URLを入力
- 『適用』をクリック
囲みボタンを選択します。
- スタイル
- 囲みボタン
- 好きな色とサイズ
これでボタンリンクの完成です。
『囲みボタン』の使い方（ASPのアフィリエイトリンクの場合）
ASPのアフィリエイトリンクをボタンリンクにする場合は、また手順が変わります。
まずはASPの管理画面からテキスト形式のアフィリエイトリンクのコードを取得します。
取得したリンクコードをHTMLで挿入します。
- HTML挿入
- アフィリエイトリンクの貼り付け
- 『OK』をクリック
設置したアフィリエイトリンクをボタンに加工します。
- アフィリエイトリンクを選択
- スタイル
- 囲みボタン
- 好きな色とサイズ
これでボタンリンクの完成です。
Cocoonのボタンの使い方【ブロック編】
ここからGutenbergのブロック機能を使ってボタンリンクを作る方法を解説していきます。
なお、利用するブロックは『Cocoonブロック』から選択してください。
デザインブロック内にも『ボタン』がありますが、今回使うのはこちらではありませんので、お気を付けください。
また、ブロック機能を使う場合は、このように使い分けてください。
- ボタン：URLを入力（リンクタグを自作する場合）
- 囲みボタン：アフィリエイトリンク
自作のリンクタグを囲みボタンブロックでボタン化するのは、手間がかかるためオススメしません。
『ボタン』の使い方（URLの入力）
URLからボタンリンクを作る場合は『ボタンブロック』を使います。
まずはCocoonブロック内の『ボタンブロック』を選択します。
最初は『ボタン』というテキストが入っているので、これをボタン上に表示させるテキストに変更します。
↓↓↓
右上の設定（歯車マーク）をクリックして、URLの入力や、ボタンのサイズを選択します。
- 設定（歯車マーク）をクリック
- URLの入力
- ボタンのサイズを選択
- 円形にしたり、光らせたりすることも可能
さらに設定画面を下にスクロールすると、色の設定もできます。
他にも文字色や枠線（ボーダー色）などもお好みで設定して完成となります。
『囲みボタン』の使い方（リンクタグの入力）
ASPのアフィリエイトリンクなど、すでにリンクタグがある場合は『囲みボタンブロック』を使います。
まずはASPの管理画面からテキスト形式のアフィリエイトリンクのコードを取得します。
Cocoonブロック内の『囲みボタン』ブロックを選択します。
右上の設定（歯車マーク）をクリックして、リンクタグの入力や、ボタンのサイズを選択します。
- 設定（歯車マーク）をクリック
- リンクタグの入力
- ボタンのサイズを選択
- 円形にしたり、光らせたりすることも可能
さらに設定画面を下にスクロールすると、色の設定もできます。
他にも文字色や枠線（ボーダー色）などもお好みで設定して完成となります。
まとめ
今回は『Cocoonのボタンリンクの使い方』について解説してきました。
Cocoonのボタン機能は、クラッシックとブロックで操作方法が全く異なります。
また、URLをボタン化するなら『ボタン』、アフィリリンクをボタン化するなら『囲みボタン』が使いやすいです。
使い方を覚えれば、非常に簡単にボタンリンクが作れますので、ぜひ試してみてくださいね。
