![[Cocoon] ボタン特集](https://blogstudynotes.com/wp-content/uploads/2020/03/0EYE-89-cocoon-buttons3.jpg)
Annalise BatistaによるPixabayからの画像 （ボタンと背景の両方）
Cocoonには、さまざまなボタン機能があります。
当記事ではまずボタンの種類を紹介し、目次の後に挿入手順（または手順記事へのリンク）をまとめています。
目次から、お目当てのボタン名をクリックしてくださいね。挿入手順を確認できます。
「タグ」や「ショートコード」を設定できる囲みボタン （形・サイズ・色・効果を選べます。）
URLを設定できるボタン１ （ 形・サイズ・色・効果を選べます。）
URLを設定できるボタン２ アピールエリアのボタン
URLを設定できるボタン３ 画像にURLを設定する （好きな画像を自分で準備。）
運営メニューの記事一覧ページに移動するボタンです。
ファイルをダウンロードできるボタン
ファイル名をクリックすると中身を確認できます。ボタンをクリックすると、ダウンロードが促されます。
トップへ戻るボタン（通常、 画面右下にあります。ページの一番上に高速で戻るボタンです。）
シェアボタン・フォローボタン（見た目や表示数の変更もできます。）
シェアボタンです。
フォローボタンです。（アカウントをお持ちの方は、ボタンをもっと増やせます。）
ボックスメニューウィジェット （ボックス型のボタン。投稿ページや固定ページ、メニューなどを飛び先に設定できます。）
ブログマニュアル４種類です、ぜひご利用ください！
いいねボタン１ Faceboookバルーンウィジェット （自分のFBを設定。）
いいねボタン２ Faceboookボックスウィジェット （自分のFBを設定。）
私はFBアカウントが無いため、上の２つは、わいひらさんのサイトのスクショです。
『 当サイト（wp-cocoon.com）の内容はクリエイティブ・コモンズBY-ND（CC BY-ND 2.1）ライセンスに従っていただければ転載も自由です。 』とありましたので利用させていただきました。
CTA（Call To Action）ボックス
こんな風に見えます。
キャッチーな画像にURLを設定してクリックできるようにする手順をまとめています。
そして、SNSフォローボタンウィジェット （自分のSNSを設定。） は以下のようになります。
タグやコードをボタンに
タグやコードをボタンにしたいときは、「囲みボタン」機能を使います。
アフィリエイトリンクを例に説明します。
ボタンにしてよいかどうか、問い合わせをしました。（2020年3月）
A8.netともしもアフィリエイト
ボタンにしても規約違反ではないという理解をしました。ただし、トラッキングへの影響などはサポート外ですし、その動作の保証はしないということです。
バリューコマース
「見た目の変更」も「改変」の範囲に入り、禁止事項となっています。バリューコマースの広告素材は、本当にそのまま使うことにしましょう。
詳しくは以下のページに記録してあります。
囲みボタンの作り方
０．ASPのアカウントから、アフィリエイトの「リンクテキスト広告のタグ」をコピー。
リンクテキスト広告とは、このようなものです： もしもアフィリエイト
「タグ」は以下のようなものです。(一部値を変えていますので、これは無効です。)
<a href="//af.moshimo.com/af/c/click?a_id=12345&p_id=1&pc_id=1&pl_id=1318&url=https%abcdefghijklmnopqrstuvwxyz12345678910" rel="nofollow">もしもアフィリエイト</a><img src="//i.moshimo.com/af/i/impression?a_id=123123123&p_id=1&pc_id=1&pl_id=0000" width="1" height="1" style="border:none;">タグをCocoonで登録した場合、[Cocoon設定] > [アフィリエイトタグ]から「リンクテキスト広告のタグやショートコード」をコピーできすることもできますね。
「ショートコード」は以下のようなものです。
[affi id=7] 数字部分はそれぞれ違います。
貼りつけかたの手順は以下です。
１．ブロックの右辺にプラスサインが表示されています。クリック。
以下のようになります。
２． 検索ボックスに[囲みボタン]と入力して、表示された[囲みボタン]メニューをクリック。
３．右サイドに設定エリアが出ます。
[リンクタグ・ショートコード]にタグかショートコードをコピぺします。
４．ボタンサイズ・円形にするか・光らせるかを右サイドで設定できます。更に下にスクロールすると、「文字のサイズ」と「色」の設定エリアがあります。お好みで設定します。
右サイドをスクロールした状態が以下です。
文字のサイズと色の設定ができます。
色は、ボタンの背景・文字・ボーダーをそれぞれカラーパレットから選べます。
ボタンの位置は、プレビューボタンの上のアイコンをクリックします。左揃え・中央揃え・右揃えから選べます。
できあがり例がこちらです。実際に登録ページにジャンプします。
もしもアフィリエイトについては、以下でまとめています。会社員には信じがたい、W報酬ボーナス制度があります！おススメです♪。
URLをボタンに
URLを設定できるボタンの作成手順は、CocoonとWordPressにわけて以下の記事でまとめています。
内部リンク・外部リンク、両方とも同じ手順です。
機能は同じですが、付けられる効果に違いがあります。
Coconnのボタンはキラリと光らせることが可能。
WordPressのボタンにはグラデーション効果をつけることが可能です。
Cocoonのボタン
Cocoonのボタン機能を使ったサンプルは以下です。
手順はこちら。
WordPressのボタン
WordPressのボタン機能を使ったサンプルは以下です。
手順はこちら。
アピールエリアのボタン
設定手順は、わいひらさんの以下のページにあります。
画像サイズの調整が中々曲者です。
お困りの方は是非、以下の記事をご覧くださいませ。
画像にURLを設定してボタンにできる
画像にURLを指定すると、画像のクリックでそのページに移動できるので、ボタンとして機能します。
どんな画像・形・サイズでもOKです。
キャッチーな画像にURLを設定する手順です。
ダウンロードボタン
クリックすると、ファイルのダウンロードができるボタンです。
設定方法は以下の記事でまとめています。
コードが書けないと「黒一択」でしたが、Cocoonフォーラムでリフィトリーさんより、色変更の仕方を教えていただきました！
トピックはこちらです。
それを記事としてまとめたものがこちらです。
トップへ戻るボタン
画面の右下に現れるボタンで、クリックするとそのページのトップに高速で戻れます。
Cocoonでは、この見た目オプションがかなりたくさんあります！
初期設定で表示されるようになっていますが、見た目などを変えたい場合はこちらから。
１．[Cocoon設定]をクリック。
２．[ボタン]タブをクリック。
３．以下の画面で、表示するかどうか・ボタンの見た目・色を設定できます。自前の画像を使うこともできます。
４．最後に[変更をまとめて保存]ボタンをクリックで完了です。
シェア・フォローボタン
当ブログの以下の記事で手順をまとめています。
フォローボタンの種類を増やしたい場合は、以下のページを参照しましょう。
ボックスメニューボタン
回遊率や直帰率の改善に効果的！とウワサのボックスメニュー！
私もついにデビューしました。
設定手順は以下のわいひらさんのページにあります。
わいひらさんのページにあるように、FontAwesomeを利用して作ったのがこちらです。
初期設定だと、ボックスメニューはオレンジ色です。その色を変更する方法も記事にしています。
いいねボタン① FBバルーン
設定例は、わいひらさんの以下のページにあります。
いいねボタン② FBボックス
わいひらさんサイト「Cocoonデフォルトのウィジェット機能まとめ」よりキャプチャ
設定例は、わいひらさんの以下のページにあります。
この機能については、Cocoonフォーラムで以下のようなコメントがありましたよ！（太字は私がつけました。）
CocoonのFB関連：いいねしてね。的なウィジェットおいてるだけで、何もしなくってもホンノリだけFBの いいね が増えますよ。
FBなどで特に宣伝してないんですが、ウィジェットを置いてから30個くらい増えました。
初サイト運営・sns初心者さんには良いカモしれませんよ！
引用元： 雑談フォーラム かうたっくさんのコメントより sns初心者さんに。CocoonのFBウィジェットが熱い！
試す価値ありですね♪。
SNSフォローボタン
SNSフォローボタンウィジェットを利用する際は、お持ちのアカウントを以下のページに従って設定しておきます。（私は何もないので、アカウントが無くても使えるFeedlyとRSSのみになっています。）
その上で、SNSフォローボタンウィジェットをお好きな場所に挿入します。
１．[外観]>[ウィジェット]を選択。
２．左サイドで[SNSフォローボタン]ウィジェットを見つけて、▼をクリックします。上のほうにありますよ。
３． SNSフォローボタンを表示させたい場所を選んで、[ウィジェットを追加]をクリック。例として、「投稿本文中」を選択しています。（「投稿本文中」にすると、序文の最後・目次の上に出ます。）
４．お好みで、[タイトル]、[表示設定]を設定して、[保存]をクリック。更に[完了]をクリックで終了です。（ [表示設定] は、特定のページだけ表示したい、非表示にしたいというときに利用します。）
CTAボタン
Cocoonのサイトだったら、「テーマのダウンロード」という行動を促すページに移動するボタンに使われています。
販売ページやメルマガ登録、読者登録のページをお持ちの方は、そのリンクを入れると効果的ですよね。
記事内で使う場合
新しいブロックで、CTAと入力すると、CTAボックスが表示されます。
右サイドバーでボタン名やURLの設定ができます。
ウィジェットで使う場合
サイドバーや投稿画面下などの場所にCTAボックスを表示させたい場合、ウィジェットを使います。
設定手順は、わいひらさんの以下のページに載っています。
行動を促せるページが無い場合も、「絶対に読んでほしい記事一覧ページ」や「渾身の一押し記事」のURLを入れても良いと思います。
おわりに
３歳の娘も、娘の友だちも、ボタンを押すのが大好きです。
エレベーターのボタンを押すことにかける執念には驚きます。
ケンカになるくらい、押したがります。
人間の本能に含まれているのでしょうか・・・。
大人になると、そこまでの情熱は持てませんが、やっぱりボタンて、チョット気になるものだと思います。
読者の方が押したくなるようなボタンを作りたいですね！
関連記事
ボタンでは無いのですが、他にも「ページを設定してジャンプできる機能」があります。
以下の記事で簡単に紹介しています。（通知エリア・ナビカード・おすすめカード・カルーセル）
コメント