Cocoonボタンのカスタマイズ完全ガイド｜クリック率を上げる7つのコツ

cocoonのボタンを自分好みにカスタマイズしたいのに、「どこを触ればいいのか分からない」「設定をいじったら崩れそうで怖い」と感じていませんか。

私も最初は、ネットで見つけたコードをコピペしてはレイアウトを崩してしまい、そのたびに戻すことを繰り返していました。この記事では、その遠回りをしなくて済むように、cocoonのボタンをカスタマイズするときの考え方と具体的な手順を、できるだけ分かりやすくまとめていきます。

Cocoonのボタンをカスタマイズする前に知っておきたい基本

Cocoonのボタンと囲みボタンの違いを整理しよう

cocoonには、見た目が似ていても役割の違うボタンがいくつかあります。特に混ざりやすいのが「ボタン」と「囲みボタン」です。一度、役割ベースで頭の中を整理しておきましょう。

種類	主な用途	中に入れるもの	メリット	注意点
ボタン	内部リンクや外部リンクへの誘導	通常のURL	手早く設置できて、見た目の調整もしやすい	アフィリエイトタグをそのまま貼るには向かない
囲みボタン	アフィリエイト広告やキャンペーンの訴求	ASPが発行する広告タグ	タグをいじらずに、ボタン風の見せ方にしやすい	設定項目が多く、最初はややとっつきにくい
フッターモバイルボタン	スマホ画面下部に固定で出す重要動線	メニューや問い合わせなどのリンク	「常に目に入る場所」にボタンを置ける	入れすぎると邪魔に感じられやすい

ざっくり言うと、記事本文の中で押してほしいリンクは通常のボタンか囲みボタン、スマホ画面の下に固定で見せたいリンクはフッターモバイルボタン、という分け方をしておくと判断しやすくなります。私も最初は全部「ボタン」として考えていたので、どの設定がどこに効いているのか分からなくなっていました。種類ごとの役割を意識するだけでも、cocoonでボタンをカスタマイズするときの迷いが減ります。

ボタンを置くと効果的な場所のイメージを持つ

次に、「どこにボタンを置くと読者が動きやすいか」をざっくりイメージしておくと、色やテキストを考えるときにブレにくくなります。

• 記事冒頭のリード文下に「結論はこちら」などの内部リンクボタンを置いて、詳しい解説へ誘導する
• 記事中盤に「公式サイトを見る」「料金をチェックする」などのボタンを置いて、行動のきっかけを作る
• 記事末尾に、アフィリエイト案件の囲みボタンを置いて、最後の一押しに使う
• スマホのフッターモバイルボタンに「問い合わせ」や「メニュー」を置いて、いつでも押せる状態にしておく

ボタンを設置するときは、「このボタンを押したあとに読者にどんな行動を取ってほしいのか」を先に決めておくと、デザインや文言も決めやすくなります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ

 

Cocoonボタンの基本的な使い方と挿入手順

ブロックエディターでボタンを挿入する手順

まずは、記事本文に通常のボタンを挿入する方法です。ブロックエディターを使っている場合、難しい操作は必要ありません。

操作	やり方の例	覚えておくと便利なポイント
ボタンブロックを出す	「＋」ボタン→「Cocoonボタン」を選択	段落で「/ボタン」と入力してEnterでも素早く呼び出せる
テキストを変更する	ボタンの文字部分をクリックして直接入力	全角と半角を混ぜすぎないと、見た目がすっきりする
リンクを設定する	ボタンを選択→リンクアイコンからURLを入力	内部リンクはスラッグで指定すると管理しやすい
新しいタブで開く	リンク設定時に「新しいタブで開く」をオンにする	外部サイトや公式サイトへのリンクは新しいタブが無難

私がよく使うのは、「/ボタン」と入力してEnterでボタンブロックを出すショートカットです。文章を書きながらサクサクボタンを差し込めるので、作業の流れが止まりません。

囲みボタンでアフィリエイトリンクを安全に貼るコツ

アフィリエイトリンクをボタンとして見せたいときは、通常のボタンではなく囲みボタンを使っておくと安心です。ASPが発行するタグをそのまま中に入れて使えるので、タグ自体をいじる必要がありません。

囲みボタンの大まかな流れは、次の通りです。

広告タグを勝手に削ったり、勝手な文言に書き換えたりすると、ASPによっては規約違反になります。囲みボタンはあくまで「タグの外側を装飾する」イメージで使い、タグ本体はそのままにしておきましょう。アフィリエイト案件を扱う記事では、私は基本的に囲みボタンを使ってボタン化するようにしています。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか？
その全貌を知りたくありませんか？

⇒今すぐ秘密を見る

 

Cocoonボタンをブロック設定だけでカスタマイズする

サイズや角丸、光らせるなど基本項目の意味

ボタンを選択すると、右側の設定パネルにいろいろな項目が並びます。すべてを細かく調整する必要はありませんが、それぞれの意味を知っておくと、迷わず操作できます。

項目名	おおまかな意味	使い方の目安
サイズ	ボタンの高さと文字の大きさをまとめて調整	メインのボタンは「中」か「大」を選ぶと目立ちやすい
横幅	ボタンが横にどれくらいの幅を占めるか	スマホで押しやすくしたいなら80〜100％がおすすめ
角丸	ボタンの角の丸み	少しだけ丸めると落ち着いた印象に、強めにするとやわらかい印象に
光らせる	マウスオーバー時に光るような演出をつける	一番押してほしいボタンだけに使うとバランスが良い
テキストサイズ	文字だけの大きさ	ボタンの文言が長いときは、やや小さめにして改行を防ぐ

私がよくやるのは、重要なボタンほどサイズを大きくし、角丸も強めにして「主役感」を出すやり方です。逆にサブのボタンはサイズを少し小さく、角丸も控えめにしておくと、自然と優先度の違いが伝わります。

色設定とブランドカラーを合わせるコツ

ボタンの色は、サイト全体の色と合わせると一気に統一感が出ます。ボタンだけ独立した派手な色にしてしまうと、全体が落ち着かず、読者も疲れてしまいます。

色のタイプ	イメージ	おすすめの使いどころ
メインカラー	ロゴやヘッダーと同じ系統の色	お問い合わせや申し込みなど、一番押してほしいボタン
サブカラー	メインカラーを補う色	関連記事や詳細ページへの誘導ボタン
ベースカラー	白や薄いグレーなど控えめな色	補足説明や、絶対に押さなくてもよいボタン

迷ったときは、まずメインカラーのベタ塗り背景に白文字、という王道パターンから始めてみてください。そこからサブボタンを少し薄い色に変えるだけでも、メリハリの効いたボタン配置になります。cocoonのカラーピッカーで色コードを指定しておくと、同じ色を繰り返し使えるので便利です。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

1. センスが必要
2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

⇒ブログで10万稼ぐ勝ちパターンとは

 

CSSで一歩進んだCocoonボタンカスタマイズをする

コピペで使えるシンプルボタンCSS例

まずは、どんなサイトにも合わせやすい、シンプルな丸いボタンを作るCSSです。cocoonの「外観」→「カスタマイズ」→「追加CSS」に書く前提で紹介します。

例）シンプルなピル型ボタン用のCSS

a.a-btn-simple { display:inline-block; padding:0.8em 1.6em; border-radius:999px; background:#ff7f50; color:#fff; text-decoration:none; font-weight:bold; box-shadow:0 3px 0 rgba(0,0,0,0.2); }

a.a-btn-simple:hover { opacity:0.9; transform:translateY(1px); box-shadow:0 2px 0 rgba(0,0,0,0.2); }

HTML側は、カスタムHTMLブロックやテキストモードなどで、次のように書きます。

<a href=”リンクURL” class=”a-btn-simple”>ボタンのテキスト</a>

このパターンは、色だけ変えればほとんどのサイトに馴染むので重宝します。私も、まずこのクラスをベースに作っておいて、サイトごとに色とフォントサイズだけ微調整することが多いです。

グラデーションやホバーアニメーションのサンプル

「もう少し華やかにしたい」と感じたら、グラデーションやホバーアニメーションをプラスしてみましょう。使いすぎるとくどくなりますが、要所だけに入れると効果的です。

クラス名の例	見た目の特徴	おすすめの使いどころ
a-btn-grad	横方向のグラデーションがかかったボタン	キャンペーンや限定オファーなど、特に目立たせたい場所
a-btn-border	背景は透明で、太めの枠線だけがついたボタン	メインボタンの隣に置く、控えめなサブボタン
a-btn-shadow	影を強めに付けて、浮き上がって見えるボタン	スマホで見たときに「押せる」と一目で分かるようにしたい場所
a-btn-underline	ホバー時に下線がスッと出るボタン風リンク	テキストリンクとボタンの中間くらいの見た目にしたいとき

例えば、グラデーションボタン用のCSSは次のようなイメージです。

a.a-btn-grad { display:inline-block; padding:0.8em 1.6em; border-radius:999px; background:linear-gradient(90deg,#ff7f50,#ff1493); color:#fff; text-decoration:none; font-weight:bold; }

a.a-btn-grad:hover { filter:brightness(1.05); }

メインのアクションボタンだけグラデーションにして、他は単色にしておくと、主役が分かりやすくなります。

Cocoonボタンを横並びにするカスタマイズ

カラムブロックでボタンを横並びにする方法

一番手軽なのは、WordPress標準のカラムブロックを使うやり方です。CSSを書かなくても、クリック操作だけでボタンを横に並べられます。

代表的なパターンを整理すると、次のようになります。

カラム数	使い方のイメージ	メリット
2カラム	「公式サイトを見る」と「レビューを見る」など、二択のボタン	読者に「どちらかを選んで進む」イメージを持ってもらいやすい
3カラム	プランA・B・Cなど、複数プランを並べるボタン	料金プランやコースを比較して見せたいときに便利

具体的な流れとしては、カラムブロックを挿入してから、それぞれのカラムの中にボタンブロックを入れていきます。そのうえで、スマホ表示のプレビューをチェックし、縦に並んだときも押しやすいかどうか確認するのがおすすめです。私も、まずはこのカラムブロックを使う方法から試して、足りないと感じたらCSSを足すようにしています。

CSSのflexでPC横並び・スマホ縦並びにする

もう少し細かくレイアウトを制御したい場合は、flexを使ったレイアウトも便利です。親要素にクラスを付けておき、その中に並べたボタンを一括で横並びにします。

たとえば、次のようなCSSを追加します。

.box-buttons { display:flex; gap:1rem; }

.box-buttons a { flex:1; text-align:center; }

@media screen and (max-width:768px) { .box-buttons { flex-direction:column; } }

HTML側は、カスタムHTMLブロックなどで次のように書きます。

<div class=”box-buttons”>
<a href=”URL1″ class=”a-btn-simple”>公式サイトを見る</a>
<a href=”URL2″ class=”a-btn-border”>詳しいレビューを見る</a>
</div>

こうしておくと、PCではボタンが横並びになり、画面幅が狭いスマホでは自動的に縦並びに変わります。横並びにしても押しやすさを失わないので、実際のブログでもよく使うパターンです。

 

---

★ブログでは公開できない裏情報★

私の発行するメルマガではブログでは公開できない秘匿性が高い特別な情報を発信しております。

例えば、

1. 実際に10万稼いだキーワード
2. 今やるべきおススメ広告

などをこっそり暴露しています。ぜひ公開停止する前に受け取ってください。

⇒あっさり10万稼ぐためのメルマガ

---

 

Cocoon全体のボタンデザインをそろえるカスタマイズ

フッターモバイルボタンやトップへ戻るボタンも調整する

cocoonには、記事内以外にもいくつかのボタンが用意されています。それぞれの役割を知っておくと、どこまでカスタマイズするかを決めやすくなります。

ボタンの種類	表示場所	主な役割
記事内ボタン	記事本文の中	内部リンクや外部リンクへの誘導
囲みボタン	記事本文の中	アフィリエイト広告やキャンペーンの訴求
フッターモバイルボタン	スマホ画面の下部	メニューや問い合わせなど、常に押してほしい動線
トップへ戻るボタン	画面の端（多くは右下）	長い記事を読み終えたあとに、スクロールを省略して戻す

例えば、記事内のメインボタンとフッターモバイルボタンの色をそろえておくと、「この色のボタンは重要」というイメージを読者に持ってもらいやすくなります。逆に、トップへ戻るボタンは少し薄めの色にして、邪魔にならない程度の存在感にしておくとバランスが取りやすいです。

SNSボタンやプロフィールのボタンとトーンを合わせる

cocoonでは、SNSシェアボタンやフォローボタン、プロフィール欄のSNSアイコンなど、ボタンに近いパーツがたくさん用意されています。これらも含めて色やスタイルをそろえると、「このサイトらしさ」がぐっと強くなります。

すべてのボタンを全力で目立たせようとすると、読者の視線が散ってしまいます。cocoonでボタンをカスタマイズするときは、「一番押してほしいボタン」「押してくれたらうれしいボタン」「情報として置いておきたいボタン」といった感じで重要度を分け、それぞれトーンを変えるのがおすすめです。

ボタンカスタマイズで失敗しないためのチェックリスト

スマホ表示とアクセシビリティのチェック

ボタンはスマホから押されることが多いので、スマホ視点でのチェックは必須です。次のようなポイントを、実際に自分のスマホで見ながら確認してみてください。

• ボタン同士の間隔は十分に空いていて、隣のボタンを誤タップしないか
• 文字が小さすぎず、片手で見ても読みやすい大きさになっているか
• 背景色と文字色のコントラストが弱すぎず、屋外でも読めそうか
• 横幅が画面からはみ出しておらず、横スクロールが発生していないか

私も、PCだけで調整していたころは「スマホで見るとボタンが小さすぎる」「文字が読みづらい」といった失敗をよくしていました。仕上げのタイミングでスマホ実機を一度チェックする癖をつけておくと、それだけでだいぶ仕上がりが変わります。

カスタマイズ前後で検証するポイント

見た目を整えたあとは、「本当に押されやすくなったか」をざっくり確認しておきましょう。細かい数字を追いすぎなくても、方向性が合っているかどうかは掴めます。

• ボタンを変えた記事のアクセス数や滞在時間が、体感として悪くなっていないか
• アフィリエイト案件のクリック数が増えたか、もしくは減っていないか
• 自分で記事を読み返したとき、「どこを押せばいいか」が直感的に分かるか

cocoonでボタンをカスタマイズしていると、「色を変えたらクリックが増えた」「文言を変えたら急に押されなくなった」といったことは珍しくありません。一度で正解を出そうとせず、少しずつ試してみて、反応を見ながら育てていくくらいの気持ちでいると、気楽に続けられます。

 

---

★ちょっとブレイク★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

⇒あっさり10万稼ぐためのメルマガ

---

 

よくある質問

Q1：Cocoonのボタンをカスタマイズするとき、子テーマは必須ですか？

A1：追加CSSの範囲でボタンをカスタマイズするだけなら、子テーマは絶対必須というわけではありません。ただ、今後テンプレートファイルをいじる可能性があるなら、最初から子テーマを入れておいた方が安全です。

私自身は、ボタン周りのデザインをしっかり作り込みたいサイトでは、最初から子テーマを入れています。親テーマを更新しても、子テーマ側のカスタマイズが消えないので、あとから安心して調整を増やせるからです。

Q2：CocoonのボタンをCSSでカスタマイズしたら、テーマ変更時に困りますか？

A2：cocoon専用のクラスにだけCSSを書いていると、テーマを変えたときにそのままでは使えなくなる可能性があります。テーマをまたいでボタンデザインを使い回したい場合は、自分で汎用的なクラス名を付けておくのがおすすめです。

例えば、.a-btn-primary や .a-btn-secondary のような名前でボタン用のCSSを作っておけば、別のテーマに変えたあとも、同じクラス名をHTML側に付けるだけで、似た雰囲気のボタンを再現しやすくなります。

Q3：ボタンをおしゃれにしすぎると、逆にクリックされにくくなりませんか？

A3：なり得ます。ボタンは「おしゃれかどうか」よりも、「押せるとすぐ分かるか」「押しやすいか」の方が重要です。デザインを盛りすぎると、リンクなのか単なる装飾なのか分かりにくくなってしまうことがあります。

cocoonでボタンをカスタマイズするときは、基本的に次の3つを意識しておけば、大きく外れません。

• 形はシンプルにして、角丸や影を少し足す程度にする
• 背景色と文字色のコントラストをはっきりさせる
• ホバー時の動きは控えめにして、「押せる」ことだけが伝わればOKと考える

この3つを基準にしつつ、サイトの雰囲気に合わせて微調整していくイメージで、少しずつ理想のボタンに近づけていきましょう。

まとめ

ここまでの内容を振り返ります

今日からの最初の一歩としては、まずひとつの記事を選んで、次の3つだけ実践してみてください。

• メインで押してほしいボタンの色とサイズを決める
• サブのボタンとの違いがひと目で分かるようにトーンを変える
• 自分のスマホで実際に表示して、押しやすさと読みやすさをチェックする

それができたら、少しずつ追加CSSも試してみて、自分のブログに合うボタンデザインを育てていきましょう。地道な調整の積み重ねが、「なんとなく押したくなるボタン」につながっていきます。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか？

1. 稼げる広告
2. 稼げるキーワード
3. 稼げるライティング

これら全部を暴露します。

⇒まずはあっさり10万稼ぐためのメルマガ