![[Cocoon] ボタン特集](https://blogstudynotes.com/wp-content/uploads/2020/03/0EYE-89-cocoon-buttons3.jpg)
Annalise BatistaによるPixabayからの画像 （ボタンと背景の両方）
ボタンの種類、以下のようにたくさんあります。
「タグ」や「ショートコード」を設定できる囲みボタン （形・サイズ・色・効果を選べます。）
URLを設定できるボタン１ （ 形・サイズ・色・効果を選べます。）
URLを設定できるボタン２ アピールエリアのボタン
![[Cocoon]アピールエリアのボタンサンプル](https://blogstudynotes.com/wp-content/uploads/2020/03/89-appeal-area-button-sample.png)
URLを設定できるボタン３ 画像にURLを設定する （好きな画像を自分で準備。）
運営メニューの記事一覧ページに移動するボタンです。
ファイルをダウンロードできるボタン
ダウンロード用のサンプルファイルは、「ボタンを含む英語表現」の紹介ノートです。ファイル名をクリックすると中身を確認できます。ボタンをクリックすると、ダウンロードが促されます。
コードが書けないと、「黒一択」でしたが、Cocoonフォーラムでリフィトリーさんより、色変更の仕方を教えていただきました！
トピックはこちらです。
それを記事としてまとめたものがこちらです。
トップへ戻るボタン（通常、 画面右下にあります。ページの一番上に高速で戻るボタンです。）
![[Cocoon]トップページへ戻るボタンサンプル](https://blogstudynotes.com/wp-content/uploads/2020/03/89-go-to-top-button-sample.png)
シェアボタン・フォローボタン（見た目や表示数の変更もできます。）
シェアボタンです。
フォローボタンです。（アカウントをお持ちの方は、ボタンをもっと増やせます。）
ウィジェットにあるボタン
ボックスメニューウィジェット （投稿ページや固定ページ、メニューなどを飛び先に設定できるボックス型のボタン。好きな画像を自分で設定。ショートコードも利用できます！）
ブログマニュアル４種類です、ぜひご利用ください！
いいねボタン１ Faceboookバルーンウィジェット （自分のFBを設定。）
![[Cocoon]FBバルーンウィジェット、いいねボタンサンプル](https://blogstudynotes.com/wp-content/uploads/2020/03/89-Fb-baloon-sample.png)
いいねボタン２ Faceboookボックスウィジェット （自分のFBを設定。）
![[Cocoon]FBボックスウィジェット、いいねボタンサンプル](https://blogstudynotes.com/wp-content/uploads/2020/03/89-FB-box-sample.jpg)
私はFBアカウントが無いため、上の２つは、わいひらさんのサイトのスクショです。
『 当サイト（wp-cocoon.com）の内容はクリエイティブ・コモンズBY-ND（CC BY-ND 2.1）ライセンスに従っていただければ転載も自由です。 』とありましたので利用させていただきました。
そして、SNSフォローボタンウィジェット （自分のSNSを設定。） とCTA（Call To Action）ボックスウィジェットのボタン（URLを設定。）は以下のようになります。
bego eguiaによるPixabayからの画像
当記事では、ボタン挿入手順をまとめたり、手順ページへのリンクをリストしています。
目次でお目当てのボタンをクリックすると、該当セクションにジャンプします。
タグやコードをボタンに
タグやコードをボタンにしたいときは、「囲みボタン」機能を使います。
アフィリエイトリンクを例に説明します。
ボタンにしていいのか
私は、以下３つのAPS（アフィリエイトサービスプロバイダー）に登録しています。
それぞれで、ボタンにしていいのか確認しました。
Cocoonフォーラムで相談させていただき、以下のように質問しました。
2020年3月現在の回答は以下です。
A8.netからの回答：
お問い合わせの件につきまして、CSSなどで元のコードに影響のない範囲で見た目を変更されることは不正行為には該当いたしません。
ただし、生成されたリンクコードをそのまま掲載していない場合はトラッキングへの影響を含め、コードの動作について弊社では保証致しかねます。何卒ご了承ください。
また、広告主様より使用停止の要請がございました際には、迅速にご対応くださいますようお願い申し上げます。
もしもアフィリエイトからの回答：
おっしゃるとおりです。
CSSにつきましても、弊社サポートの対象外となるためご自身の責任のもとご利用いただければと存じます。
バリューコマースからの回答：
ご質問いただいた件ですが、弊社では、管理画面で取得した広告コードをそのまま利用していただくことをお願いしておりますので、少しでも広告コードに改変が加われば、アフィリエイトサイト運営者利用規約第14条（禁止行為）に抵触しますため公認することはできません。
—————————————————————–
１．広告ソースコード、ＩＤおよび広告データの改変本プログラムの広告表示用のＨＴＭＬソースならびにアフィリエイトサイトＩＤ、広告ＩＤのコード(総称して以下「広告コード」といいます。)ならびに広告に利用する画像および文言(以下「広告コード」と総称して「広告コード等」といいます。)などを当社または広告主が認める場合を除き、無断で改変すること。また、アフィリエイトサイトおよびアフィリエイトサイト以外のメディアに当該広告に影響を及ぼす可能性のあるスクリプトを記述したり、そのようなスクリプトの記述のあるページへ当該広告のＨＴＭＬソースおよびコードを掲載すること。
—————————————————————–
広告コードの一部分の抜粋や改変を行われますと、トラッキングの保証ができかねます。
不正利用との判断から、弊社の不正監視チームよりご連絡がいく場合もございます。
また、すべての報酬のお支払いができなくなる場合もございますので、ご遠慮いただけますようお願いいたします。
上記をご理解いただいた上で、変更される場合につきましてはアフィリエイト様ご自身の責任をもってご利用くださいますようお願い申し上げます。
追記（上記の回答ですと、CSSの取り扱いが私には分からなかったため、再確認の質問を送りました。いただいた回答が以下です。）：
CSSによる見た目のみのご変更とのことでございますが、見た目を変更されることが弊社での改変にあたります。違う見た目にするために弊社の広告コードを埋め込まれること自体について、許可することはできません。
重ねて申し上げますが、広告コードの一部分の抜粋を行われますとトラッキングの保証ができかねます。
上記をご理解いただいた上で、変更される場合につきましてはアフィリエイト様ご自身の責任をもってご利用くださいますようよろしくお願い申し上げます。
・・・という情報をふまえて、自己責任で判断しましょう。
私は、A8.netともしもアフィリエイトは、ボタンにしても規約違反ではないという理解をしました。ただし、トラッキングへの影響などはサポート外ですし、その動作の保証はしないということです。
追記：バリューコマースは、「見た目の変更」も「改変」の範囲に入り、禁止事項となっています。バリューコマースの広告素材は、本当にそのまま使うことにしましょう。
ちなみに、一番最初に「テキストリンクをボタンにしてもいいですか？リンクテキストの文言を変えてもいいですか？」というザックリとした質問を送ったときの回答は以下でした。この回答の中にも有効な情報があるので、転載しておきます。（文字装飾は私がつけました。）
原則としてA8.netで生成される広告素材は、改変を加えない状態にてご利用頂くことが前提となりますが、CSSによる文字装飾など、広告内容に影響を及ぼさない改変につきましては、自己責任にて行って頂いております。
ただし、改変を加えたコードの動作について弊社では保証致しかねます。
広告素材を改変したことによって、成果報酬が正しく反映されなくなった場合はサポート対象外になりますので予めご了承ください。
また、テキスト素材のテキスト文言変更は禁止行為に該当いたしますのでおやめください。
原則、タグの書き換えは推奨しておりません。
しかしながら、知識がおありになるのであれば、ご自身の責任の下、書き換えていただいても特に罰則などはございません。
ただし、書き換えミスなどで成果が発生しないなどの事象が発生してもサポートの対象外となりますのでご注意ください。
「リンクテキストの文言変更について」
タグの書き換えは推奨しておりませんのでご自身の責任の下、ご判断いただければと存じます。
弊社で提供している広告コードにつきましては、改変なくすべてのコードをそのままご利用いただくようお願いしております。
コード内には、アフィリエイトに必要となる各種の機能が設定されております。変更や一部分の抜粋を行われますと、トラッキングが行われなくなる場合や、不正利用との判断から、すべての報酬のお支払いができなくなる場合もございますので、ご遠慮いただけますようお願いいたします。
自由テキストがない広告主様につきましては、広告主様の意図で自由テキストを設定していない可能性がございますので、無断でテキストを編集することはご遠慮ください。
ASPの担当の方々、わいひらさん、ありがとうございました！
手順は以下です。
囲みボタンの作り方
０．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] 数字部分はそれぞれ違います。
１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。スクロールバーを下げて[Cocoonブロック]をクリック。
２．[囲みボタン] をクリック。
３．表示された囲みボタンブロックをクリックすると、右サイドに設定エリアが出ます。
[リンクタグ・ショートコード]にタグかショートコードをコピぺします。
４．ボタンサイズ・円形にするか・光らせるかを右サイドで設定できます。更に下にスクロールすると、「文字のサイズ」と「色」の設定エリアがあります。お好みで設定します。
右サイドをスクロールした状態が以下です。
文字のサイズと色の設定ができます。
色は、ボタンの背景・文字・ボーダーをそれぞれカラーパレットから選べます。
ボタンの位置は、プレビューボタンの上のアイコンをクリックします。左揃え・中央揃え・右揃えから選べます。
できあがり例がこちらです。実際に登録ページにジャンプします。
もしもアフィリエイトについては、以下でまとめています。会社員には信じがたい、W報酬ボーナス制度があります！おススメです♪。
URLをボタンに
URLを設定できるボタンの作成手順です。
内部リンク・外部リンク、両方とも同じ手順です。
Cocoonのボタン機能
１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。スクロールバーを下げて[Cocoonブロック]をクリック。
２．[ボタン] をクリック。
![[Cocoon]URLを設定できるボタン挿入手順、ボタンアイコン選択](https://blogstudynotes.com/wp-content/uploads/2020/03/89-url-button1.png)
３．右サイドに、飛び先にしたいURLをコピぺします。その下で、リンクの開き方、ボタンサイズ、円形にするか、光らせるかを選べます。編集画面部分で、ボタン位置の変更とテキストの入力ができます。
![[Cocoon]URLを設定できるボタン挿入手順、URLコピペ・リンクの開き方・サイズ・形・効果を選択](https://blogstudynotes.com/wp-content/uploads/2020/03/89-url-button2.png)
右サイドをスクロールした状態が以下です。
![[Cocoon]URLを設定できるボタン挿入手順、文字サイズ・ボタンの色・文字の色を選択](https://blogstudynotes.com/wp-content/uploads/2020/03/89-url-button3.png)
文字のサイズと色の設定ができます。色は、ボタンの背景・文字・ボーダーをそれぞれカラーパレットから選べます。
ボタンの位置は、プレビューボタンの上のアイコンをクリックします。左揃え・中央揃え・右揃えから選べます。
できあがり例がこちらです。実際に当ブログのトップページにジャンプします。
アピールエリアのボタン
設定手順は、わいひらさんの以下のページにあります。
姿はボタンでないけれど
ボタンでは無いのですが、他にも「ページを設定してジャンプできる機能」があります。以下の記事で簡単に紹介しています。（通知エリア・ナビカード・おすすめカード・カルーセル）
画像にURLを設定
画像にURLを指定すると、画像のクリックでそのページに移動できます。
どんな画像・形・サイズでもOKです。
私は、ボタンぽくしたかったので、小さく丸くしました。
タップフレンドリーな感じになるかなと。
以下が手順です。
１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。[一般ブロック]で[画像]をクリック。
２．[アップロード]または[メディアライブラリ]をクリックして画像を挿入。（アップロードはパソコンから、メディアライブラリは、すでにアップロードしてある画像を選ぶ場合です。）
３．画像が挿入されたブロックを選択。[リンクを挿入]アイコンをクリックして、飛び先にしたいURLをコピペ。矢印アイコンをクリック。
４．お好みで、ボタンの配置を選びます。キャプションの入力もお好みで。
できあがり例がこちら。（Cocoonレイアウトで２列にして、左側に画像挿入しています。）
運営メニューの記事一覧ページに移動するボタンです。
ダウンロードボタン
クリックすると、ファイルのダウンロードができるボタンです。
WordPressの機能です。
「お役に立てるブログ作り」に大切ですね！
１． 投稿画面を開きます。 新しいブロックで＋アイコンをクリック。[一般ブロック]で[ファイル]をクリック。
２．[アップロード]または[メディアライブラリ]をクリックしてファイルを挿入。 PCからファイルをアップロードするか、メディアライブラリからファイルを選択します。
３．これだけでボタンが表示されます。そのブロックを選択して、お好みでボタンの位置を調整したり、ボタン名のことばを変更します。
ボタンの左には、ファイル名が出ます。これは、「リンク」になります。サイドバーで、「メディアファイル」を選択しておけば、ダウンロードする前に中身を確認できます。（消去しておいても大丈夫です。）
ボタンテキストの入力をすると、上にテキストを編集できるアイコンが出ますが、おススメはしません。（蛍光ペン効果や文字色、サイズや太字・斜体など。）ボタンテキストもCSSで設定するほうが良いのだと思います。
こちらにCSSでボタンテキストの色変更もまとめました。
こちらが、「ファイル名リンクあり」のできあがり例です。ファイル名のリンクをクリックすると中身を確認できます。
「ファイル名リンク」を削除するとこうなります。消しても、ダウンロードボタンはちゃんと機能します。お好みで。
画像ファイル（.jpg, .pngなど）をダウンロードできるようにしたい場合
そのままですと、おそらくダウンロードが促されません。
以下のコードを該当記事の編集画面の一番下、カスタムJavaScript設定欄に貼り付けると解決しました。（フォーラムでロコさんより教えていただきました。）
(function($){baguetteBox.run(".entry-content", {ignoreClass: 'wp-block-file__button'})})(jQuery);もしくは、[Cocoon設定]の[画像]タブにある[画像の拡大効果]の設定を[なし]にするという方法もできます。ただ、その画像設定は変えたくない場合のが多いかなと思うので、上のコードがおススメです。
この[画像の拡大効果]の設定の説明は以下のわいひらさんのページにあります。
ダウンロードできるPDFファイルの中で、花の挿絵を使わせていただきました。
クリエイターの方：無料イラスト・図案屋さんさんのイラスト
本当にきれいです。
すてきなイラストがたくさん見つかるサイト「イラストボックス」について以下の記事で紹介しています。
トップへ戻るボタン
画面の右下に現れるボタンで、クリックするとそのページのトップに高速で戻れます。
ブログを始めてからこの存在に気が付いて、便利で感動しました。
Cocoonでは、この見た目オプションがかなりたくさんあります！
初期設定で表示されるようになっていますが、見た目などを変えたい場合はこちらから。
１．[Cocoon設定]をクリック。
２．[ボタン]タブをクリック。
３．以下の画面で、表示するかどうか・ボタンの見た目・色を設定できます。自前の画像を使うこともできます。
![[Cocoon] トップへ戻るボタン設定](https://blogstudynotes.com/wp-content/uploads/2020/03/89-go-to-top-button1.png)
４．最後に[変更をまとめて保存]ボタンをクリックで完了です。
シェア・フォローボタン
当ブログの以下の記事で手順をまとめています。
フォローボタンの種類を増やしたい場合は、以下のページを参照しましょう。
ボックスメニューボタン
回遊率や直帰率の改善に効果的！とウワサのボックスメニュー！
私もついにデビューしました。
「ショートコード」になっていると、記事内のどこにでも、自由自在に出せるので、とても便利・・・！
設定手順は以下のわいひらさんのページにあります。
ウィジェットにもなっているので、サイドバーやフッターに表示させるのも簡単！
割と新しい機能なので、無い！と思ったら、テーマを更新しましょう。
わいひらさんのページにあるように、FontAwesomeを利用して作ったのがこちらです。
自分で画像ファイルを準備して作ったのがこちらです。
画像は以下のサイトからダウンロードしました。
このサイト、使いやすくておすすめです！
このサイトは、ファビコン作りにも最適だと思います！
ただ、ボックスメニューアイコンに入ると、自分で作ったバージョンは、心なしか、輪郭がボワッとしているような気がするのですが、いかがでしょうか。（追記：4月になって、CocoonとWordPressを最新バージョンにしたら、ボワッと感がとれたと思います♪。）
ただ、私的には「ボックスメニュー」用のアイコンは、FontAwesomeをおススメします。なぜかというと、「色」を変えるのが簡単だからです。自前画像の場合、色を変えたかったら、画像を作り直すところから始まります。FontAwesomeの場合は、チョコっと設定するだけで色変更ができますよ！
初期設定だと、ボックスメニューはオレンジ色です。その色を変更する方法も記事にしています。
いいねボタン① FBバルーン
設定例は、わいひらさんの以下のページにあります。
FBアカウントがあったら、ぜひ利用したいですね～。
いいねボタン② FBボックス
設定例は、わいひらさんの以下のページにあります。
この機能については、Cocoonフォーラムで以下のようなコメントがありましたよ！（太字は私がつけました。）
CocoonのFB関連：いいねしてね。的なウィジェットおいてるだけで、何もしなくってもホンノリだけFBの いいね が増えますよ。
FBなどで特に宣伝してないんですが、ウィジェットを置いてから30個くらい増えました。
初サイト運営・sns初心者さんには良いカモしれませんよ！
引用元： 雑談フォーラム かうたっくさんのコメントより sns初心者さんに。CocoonのFBウィジェットが熱い！
試す価値ありですね♪。
SNSフォローボタン
SNSフォローボタンウィジェットを利用する際は、お持ちのアカウントを以下のページに従って設定しておきます。（私は何もないので、アカウントが無くても使えるFeedlyとRSSのみになっています。）
その上で、SNSフォローボタンウィジェットをお好きな場所に挿入します。
１．[外観]>[ウィジェット]を選択。
２．左サイドで[SNSフォローボタン]ウィジェットを見つけて、▼をクリックします。上のほうにありますよ。
![[Cocoon] SNSフォローボタンウィジェット設定方法](https://blogstudynotes.com/wp-content/uploads/2020/03/89-SNS-follow-button0.png)
３． SNSフォローボタンを表示させたい場所を選んで、[ウィジェットを追加]をクリック。例として、「投稿本文中」を選択しています。（「投稿本文中」にすると、序文の最後・目次の上に出ます。）
![[Cocoon] SNSフォローボタンウィジェット設定方法、位置の選択](https://blogstudynotes.com/wp-content/uploads/2020/03/89-SNS-follow-button1.png)
４．お好みで、[タイトル]、[表示設定]を設定して、[保存]をクリック。更に[完了]をクリックで終了です。（ [表示設定] は、特定のページだけ表示したい、非表示にしたいというときに利用します。）
![[Cocoon] SNSフォローボタンウィジェット設定項目](https://blogstudynotes.com/wp-content/uploads/2020/03/89-SNS-follow-button2.png)
CTAボタン
Cocoonのサイトだったら、「テーマのダウンロード」という行動を促すページに移動するボタンに使われています。
販売ページやメルマガ登録、読者登録のページをお持ちの方は、そのリンクを入れると効果的ですよね。
設定手順は、わいひらさんの以下のページに載っています。
とても目立ちますし、見た目がかっこいいですね♪。行動を促せるページが無い場合も、「絶対に読んでほしい記事一覧ページ」や「渾身の一押し記事」のURLを入れても良いと思います。
おわりに
３歳の娘も、娘の友だちも、ボタンを押すのが大好きです。
エレベーターのボタンを押すことにかける執念には驚きます。
ケンカになるくらい、押したがります。
人間の本能に含まれているのでしょうか・・・。
大人になると、そこまでの情熱は持てませんが、やっぱりボタンて、チョット気になるものだと思います。
読者の方が押したくなるようなボタンを作りたいですね！
![[Cocoon] ボタン特集](https://blogstudynotes.com/wp-content/uploads/2020/03/89-buttons3.jpg)
コメント