MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

✔優秀なデザイン性 ✔最新のSEO ✔サイト高速化に対応|WordPressテーマ「SWELL」の口コミ・評判・レビューはこちら >>

SWELLの口コミ・評判・レビューはこちら >>

クリック

タップ

Cocoonでボタンの使い方とカスタマイズ|横並びにするテクニックも紹介

「リンクをボタン化したい…」

「ボタンと囲みボタンの違いは?」

「ボタンを横並びにできる?」

この記事では、そんな方に向けて、Cocoonでボタンの使い方とカスタマイズ方法を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • ボタンと囲みボタンの違いを理解して使いこなせる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、おしゃれなボタンを設置してクリック率UPを目指すことができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

本記事はWordPressテーマ「」で作成しているので、デザインが抜群にオシャレです!

目次

Cocoonには「ボタン」と「囲みボタン」の2種類ある

Cocoonにはボタンと囲みボタンの2種類あり、以下のような違いがあります。

  • ボタン内部リンク外部リンクなど通常のリンクをボタン化させる機能
  • 囲みボタンアフィリエイトリンクをボタン化させる機能

内部リンクとは…自サイト内にある記事リンクのこと

外部リンクとは…自サイト外にある記事リンクのこと

アフィリアエイトリンクとは…ASPが発行する広告コードのこと

それぞれのボタンに以下のリンクを設定してみました。

ボタン
内部リンクを挿入

ボタン
外部リンクを挿入

囲みボタン
アフィリエイトリンクを挿入

見た目の違いはありませんが、設定できるリンクの種類が大きく異なります。

かめコンパス

アフィリエイトリンクは「囲みボタン」、それ以外が「ボタン」という認識でOKだよ

Cocoonボタンと囲みボタンの使い方とカスタマイズ設定

Cocoonのボタンの使い方は公式サイトでもまとめられていますが、本記事ではより詳しく紹介します。

公式サイト囲みボタン機能の使い方。アフィリエイトタグ利用向き。

STEP

+ボタンもしくは囲みボタンの順にクリックする

Cocoonのボタン(囲みボタン)をページに挿入する手順-1
STEP

これでボタンと囲みボタンがページに挿入されます。

Cocoonのボタン(囲みボタン)をページに挿入する手順-12

ボタンのみ表示させるタイトルを決めれます。

Cocoonのボタンに表示させるタイトルを変更した様子
注意

Cocoon専用のボタンと似たWordPress標準のボタンも存在するので、間違って選ばないようにしてください。

WordPress標準のボタンブロックがある場所とその表示

WordPress標準のボタンはカスタマイズ性が低く、ボタンの大きさしか変えられません。

ちなみに、ボタンは以下2つの方法からも呼び出せます。

それぞれ未入力の段落ブロックで操作してください。

スクロールできます
  1. キーワードを入力する

/ボタン、もしくは/buttonを入力する 「/」は半角で入力してください。

キーワード入力で任意のブロックを
呼び出す手順
  1. 検索窓で入力する

+をクリックし、検索窓に「ボタン」と入力する 「ボタン」はカタカナで入力してください

検索窓にブロック名を入力して任意のブロックを呼び出す手順

自分の好きな方法で呼び出しましょう。

かめコンパス

個人的にショートカットキーで呼び出すのがおすすめ!マウスを操作せずキーボード入力だけでかんたんに呼び出せるよ

ボタンと囲みボタンでカスタマイズ可能な項目は7~8つあります。

カスタマイズ項目

※上のリンクをクリックすると見たい場所へジャンプします。

「リンクの開き方」以外は設定項目が一緒なので、まとめて詳しく解説します。

カスタマイズ項目がある場所

ボタンもしくは囲みボタンを選択し、設定ブロックの順にクリックすると表示されます。

Cocoonのボタンのカスタマイズ項目を表示させる手順
ボタン
Cocoonの囲みボタンのカスタマイズ項目を表示させる手順
囲みボタン

URLかリンクタグ・ショートコードを入力する

CocoonのボタンにはURL、囲みボタンにはリンクタグ・ショートコードを入力します。

  • URL…内部リンク、外部リンク
  • リンクタグ・ショートコード…アフィリエイトリンク
Cocoonでボタンのカスタマイズ項目「URL」がある場所
ボタン
Cocoonで囲みボタンのカスタマイズ項目「リンクタグ・ショートコード」がある場所
囲みボタン

リンクはコピーしたものをそのまま貼り付けましょう。

広告タグは改変せずに利用してください。

広告の成果計測の正確性を担保するため、広告タグの改変を禁止しているASPもあります。

ただし、一部の属性の変更は改変とみなされないケースもあるので、詳細は各ASPの利用規約を読んでください。

かめコンパス

広告タグの改変によって成果報酬が正しく反映されない可能性もあるので注意してね

広告タグを改変について、以下にASPごとの見解をリンクします。

広告タグを改変について【ASP別】

はリンク先ページのどこに広告タグを改変についての見解が書かれているかを示す

※2024年10月時点の情報

リンクの開き方を決める

Cocoonのボタンのみリンクの開き方を「現在のタブで開く」「新しいタブで開く」の2つから選べます。

Cocoonでボタンと囲みボタンのカスタマイズ項目「リンクの開き方」がある場所

それぞれのリンクの開き方をするボタンを以下に作ってみました。

\現在のタブで開く/

\新しいタブで開く/

かめコンパス

内部リンクは「現在のタブ」、外部リンクは「新しいタブ」がおすすめだよ

ボタンのサイズを指定する

Cocoonのボタンと囲みボタンのサイズを「小」「中」「大」の3つからカスタマイズできます。

Cocoonでボタンのサイズ「小」「中」「大」の表示例
Cocoonでボタンと囲みボタンのカスタマイズ項目「サイズ」がある場所

ボタンのサイズ「大」は、ページの端から端まで伸びているのでかなり目立ちますね。

個人的には、ボタン内の文字とボタンの枠にちょうどいい空白ができるサイズ「小」がおすすめです。

ボタンを円形にするか選ぶ

Cocoonでボタンと囲みボタンを円形にするか選ぶことができます。

四角形

円形

Cocoonでボタンと囲みボタンのカスタマイズ項目「円形にする」がある場所

「円形」だと柔らかく穏やかな印象、「四角形」だと真面目で緊張感のある印象を与えますよ。

かめコンパス

私は円形が好み!

ボタンを光らせるか選ぶ

Cocoonでボタンと囲みボタンを光らせるか選ぶことができます。

光らせない

光らせる

Cocoonでボタンと囲みボタンのカスタマイズ項目「光らせる」がある場所

光らせたほうが注意を引くことができるよ。

ボタンの横幅を設定する

Cocoonでは、ボタンと囲みボタンの横幅を「25%」「50%」「75%」「100%」からカスタマイズできます。

Cocoonでボタンの横幅「25%」「50%」「75%」「100%」の表示例
Cocoonでボタンと囲みボタンのカスタマイズ項目「幅設定」がある場所

先ほど紹介したボタンのサイズ「小」「中」「大」と似ていますが、縦幅の変化があるかどうかの違いがありますよ。

文字サイズを指定する

Cocoonでボタンと囲みボタンの文字サイズを「S」「M」「L」「XL」の4つからカスタマイズできます。

Cocoonでボタンと囲みボタンのカスタマイズ項目「文字サイズ」がある場所
かめコンパス

デフォルトのままでいいかな…

色を設定する

Cocoonのボタンと囲みボタンでは、「背景色」「文字色」「ボーダー色」の3ヵ所で色を設定できます。

Cocoonでボタンと囲みボタンのカスタマイズ項目「色設定」がある場所

以下のようにボタンを青色に設定してみました。

Cocoonでボタンの「背景色」「文字色」「ボーダー色」を青色に変えた表示例

もし使いたい色がない場合は、下の画像にある白と灰色の網目状になっている長方形をクリックしましょう。

Cocoonでボタンと囲みボタンの色設定をカラーピッカーやカラーコードの入力で選ぶ手順

ここで色を設定する方法は以下の2つあります。

  • カラーピッカーで直感的に選ぶ
  • カラーコードを入力して色を指定する

カラーピッカーとは…画面上に表示された色を選択することで、その色を文字色や背景色に使うことができる機能のこと

カラーコードとは…色を数字やアルファベットなど文字の羅列で表した符号のこと

かめコンパス

カラーピッカーで好きな色にピンポイントで合わすのは難しいので、カラーコードの入力がおすすめだよ

カラーコードが分からない…カラーコードの調べ方が分からない…という方はGoogle Chromeの拡張機能「ColorPick Eyedropper」を使うとかんたんに調べられます。

クリックで開く

ColorPick Eyedropperの導入方法とカラーコードの調べ方はこちら

導入方法

  1. ChromeウェブストアからColorPick Eyedropperを導入するページを開き、chromeに追加をクリックする
ColorPick Eyedropperを導入するChromeウェブストアページにある「chromeに追加」がある場所

使い方

  1. 使いたい色があるページで、拡張機能ColorPick Eyedropperの順にクリックする
「拡張機能」「ColorPick Eyedropper」がある場所
  1. 使いたい色をクリックすると、#から始まるカラーコードが調べられます
コピーしたいカラーコードが表示されている場所
  1. カラーコードを先ほどの入力欄にコピペすると、使いたい色を利用できます。

Cocoonボタンを横並びにする方法

Cocoonでボタンを横並びにするにはカラムブロックを使い、以下のようにボタンを配置できます。

カラムブロックとは…1つのブロックを複数に分割してレイアウトを変更するWordPress標準ブロック

ボタンを横並びにする方法は下記のとおりです。

STEP

+カラムの順にクリックする

Cocoonでボタンを横並びにする手順-1
STEP

レイアウト「50/50」を選ぶ

Cocoonでボタンを横並びにする手順-2
STEP

ページに挿入されたカラムの+ボタンもしくは囲みボタンの順にクリックする

  • 内部リンクや外部リンクを設定する場合…ボタンを選ぶ
  • アフィリエイトリンクを設定する場合…囲みボタンを選ぶ
Cocoonでボタンを横並びにする手順-3

これで左側のカラムにボタンを配置できます。

右側のカラムにも同じ手順でボタンを挿入しましょう。

STEP

これでボタンを横並びにできます。スマホでは縦並びになっています。

Cocoonでボタンを横並びにする手順-4
STEP
ボタンをスマホでも横並びにしたい場合

カラムブロックを選択し、設定ブロックの順にクリックする

「モバイルでは縦に並べる」をOFFにする

Cocoonでボタンを横並びにする手順-5

これでボタンをスマホでも横並びにできます。

かめコンパス

スマホは表示画面が小さいので、ボタンは縦並びがおすすめ!

当ブログ愛用「SWELL」のボタンはデータ計測機能付きでクリック率を測定できる!

WordPressテーマ「SWELL」にはSWELLボタンブロックという専用ブロックがあり、以下5つのデータを計測できます。

計測できるデータ
  • ボタン設置後のPV数…ボタンを設置している記事へアクセスされた数
  • ボタンの表示回数…PC・スマホ・タブレット画面にボタンが表示された回数
  • ボタンのクリック数
  • このボタンまで読まれた割合…記事へアクセスしたユーザーのどれくらいの人数が設置しているボタンまで読んだかの割合
  • 表示回数に対するクリック率 例)表示回数100回・クリック数10回の場合⇒クリック率10%
SWELLボタンの計測結果が表示されている様子

計測機能を使えば、得られたデータで収益化UPのための分析や正しい改善ができます。

またSWELLボタンはデザイン装飾が豊富にあり、オシャレに仕上がります。

利用できるアイコンの種類は、ザッと数えただけでも1000種類以上!

SWELLボタンに配置できるアイコン画像一覧-1
SWELLボタンに配置できるアイコン画像一覧-2
SWELLボタンに配置できるアイコン画像一覧-3
SWELLボタンに配置できるアイコン画像一覧-4

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

SWELLの購入日を示す領収書
SWELL購入日:2024/04/26
SWELLの利用を示すWordPress管理画面
SWELL利用中

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用:Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

計測機能を利用してアフィリエイト収益を増やしたい方は、SWELLをチェックしてみてください。

当ブログ愛用のWordPressテーマ「SWELL」
  • 計測機能付きでアフィリエイトで稼ぎやすい
  • プロのデザイナーが作ったかのようなオシャレなデザイン性
  • SWELL独自のブロックエディターが優秀!
  • 専門家との提携でサイトの表示速度が圧倒的に速い
  • 専用プラグインでSEO評価が向上
  • 記事を書くスピードが1段階アップする!

\Cocoonからの乗り換え先おすすめテーマ!/

/データ収集で収益を最大化できる!\

>>テーマ移行手順を見る(5ステップのみ!)

Cocoonボタンの使い方とカスタマイズまとめ

今回は、Cocoonでボタンの使い方とカスタマイズ方法を紹介しました。

収益化をするには、主にアフィリエイトGoogleアドセンスの2択!

アフィリエイトを始めるにはASPへの会員登録が必須です。

ASPの登録がまだの人は、収益化のチャンスを逃していますよ…

スクロールできます
ASP
特徴アフィリエイト満足度13年連続No.1!広告主数は25,000社以上と日本最大級!女性ジャンルに強い!消費税分を上乗せして支払い!振込手数料が無料!『W報酬制度』で報酬が12%アップ!初心者ブロガー向けにノウハウ配信!Yahoo!ショッピング、Amazon、楽天など大手広告主も参加!報酬単価が高い!金融、保険、Eコマース、求人、エンタメ、サービスに強い!振込手数料が無料!金融系ジャンルに強い!報酬単価が高い!
公式サイト

/だれでも会員登録無料!

ASPに登録済みだがアフィリエイトで収益化できていない人は、Googleアドセンスも併用して稼ぐのもアリです。

以下の記事では、Googleアドセンス審査に合格するためのコツをまとめているので、ぜひご覧ください。

また以下の記事では、ボタン以外のカスタマイズ方法も紹介しています。

かめコンパス

ためになったという人は“(Twitter)フォロー”や“ブックマーク”してくれると嬉しいです!

・   ・   ・

当ブログ愛用のWordPressテーマ「SWELL」
  • プロのデザイナーが作ったかのようなオシャレなデザイン性
  • SWELL独自のブロックエディターが優秀!
  • 専門家との提携でサイトの表示速度が圧倒的に速い
  • 専用プラグインでSEO評価が向上
  • 記事を書くスピードが1段階アップする!
  • 計測機能付きでアフィリエイトで稼ぎやすい

\もっと早く乗り換えればよかった…/

/テーマ移行も5ステップのみ!\

Cocoonでボタンの使い方とカスタマイズの記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次