Cocoonテーブル（表）の中にリンクボタンを置く方法｜簡単・視認性アップでクリック率も向上

比較表・料金表・アフィリエイト表などを、もっと見やすく・わかりやすくしたい！

そんなときに便利なのが「表の中にリンクボタンを設置する方法」です。

WordPress無料テーマ「Cocoon」では、ブロックエディタとインラインタグを使えば簡単にボタンリンクをテーブル内に表示させることができます。

完成イメージ｜Cocoonでテーブル内にリンクボタンを設置した例

リンクボタンあり・なしの比較です。

Before（ただのテキストリンク）

比較表	項目1	項目2
詳細ページ	Amazonを見る	楽天を見る

After（ボタン形式で視認性アップ）

	項目1	項目2
詳細ページ	Amazonを見る	楽天を見る

Cocoonでテーブル内にリンクボタンを設置する方法｜基本手順

ブロックエディタの標準機能とCocoonの「インラインタグ」を使えば、CSS不要で誰でも簡単に実装できます。

ブロックエディタでテーブルを作成する方法

1. ブロックエディタで「テーブル」ブロックを挿入
2. 行数・列数を設定
3. 任意のテキスト（商品名やボタン文言など）を入力

テーブル内テキストにリンクを設定する手順

1. ボタンにしたいテキストを選択
2. 上部ツールバーのリンクアイコン（🔗）をクリック
3. 商品リンクやアフィリエイトURLを入力し「保存」

インラインタグでリンクをボタン化する方法

1. リンクが設定されたテキストを再度選択
2. ツールバーの「インラインタグ」から、使用したいスタイルを選択
3. 置きたいボタンの色・スタイルを選んでクリック

ボタンは黒、赤、青、緑の４色。それぞれ塗りと白抜きスタイルから選べます。

インラインボタンのスタイルをリセットしたい場合

一度設定したボタンのリセットや、スタイルを変更する場合はリセットします。

1. 対象のテキストを選択
2. ツールバー→もっと見る（アイコン）→「書式のクリア」をクリック

CSSで見た目を整える｜ボタンカラーと角丸のカスタマイズ

Cocoonでは黒・赤・青・緑の4色（塗りつぶし／白抜き）のボタンスタイルが標準で用意されていますが、「もっと自分好みにアレンジしたい」という方はCSSで簡単にカスタマイズできます。

以下のスタイルを追記すれば、色・角の丸み・モバイル表示時の文字サイズまで自由に調整できます。

リンクボタンの色を変更する

/* インラインボタン（塗りつぶしスタイル）*/
.inline-button-black {
  border-color: #333333; /* 枠線の色 */
  background-color: #333333; /* 背景色 */
}

.inline-button-red {
  border-color: #e53935;
  background-color: #e53935;
}

.inline-button-blue {
  border-color: #1e88e5;
  background-color: #1e88e5;
}

.inline-button-green {
  border-color: #43a047;
  background-color: #43a047;
}

/* インラインボタン（白抜きスタイル）*/
.inline-button-white-black {
  border-color: #333333;
  color: #333333;
}

.inline-button-white-red {
  border-color: #e53935;
  color: #e53935;
}

.inline-button-white-blue {
  border-color: #1e88e5;
  color: #1e88e5;
}

.inline-button-white-green {
  border-color: #43a047;
  color: #43a047;
}

ボタンを角丸にする（丸いボタン）

リンクボタンをやわらかい印象にしたいときや、デザイン性を高めたいときには角を丸くするスタイルもおすすめです。

▽ ボタンを丸くした例

	項目1	項目2
詳細ページ	Amazonを見る	楽天を見る

以下のCSSを追加すると、すべてのインラインボタンが丸い形になります。

[class*="inline-button-"] {
  border-radius: 30px; /* 少し丸くする */
}

ポイント

• border-radius: 30px; は半円形に近い、しっかりとした丸みです。
• 角丸を控えめにしたい場合は 10px や 5px に変更すると調整できます。
• [class*="inline-button-"] は「inline-button-」で始まるすべてのボタンクラスにまとめて適用する指定方法です。

モバイル表示で文字サイズを調整する

スマホやタブレットなどの小さな画面では、文字サイズをやや小さくしてボタンの見た目を整えるのがおすすめです。下記のコードで画面幅834px以下のときに文字サイズを 1em に変更できます。

@media screen and (max-width: 834px) {
  [class*="inline-button-"] {
   font-size: 1em;
  }
}

ポチップ活用！テーブル内に商品リンクを設置する方法｜比較表にも便利

商品リンク作成プラグイン「ポチップ」には、インライン機能を使ってテーブル内にそのままリンクを表示できる便利な機能があります。

比較表や価格表にAmazon・楽天・Yahoo!の一括リンクを置きたい場合に最適です。

▽ ポチップで商品リンクを置いた例

比較表	項目1
商品画像	エバークック フライパン 26㎝ IH対応 ガス火対応 【500日保証】 こげつきにくいフライパン
詳細を見る	Amazon 楽天 Yahoo

目次3：インライン機能の使い方参照

物販アフィリエイトに特化した使い方を紹介しています！

まとめ｜テーブル内にリンクボタンを設置して視認性・収益性アップ

簡単ですね！

比較表や料金表、アフィリエイト表などを視認性の高いデザインに仕上げたいときは「リンク＋インラインタグ」の組み合わせがとても便利です。

また、商品リンク作成ツール「ポチップ」のインライン機能を使えばテーブル内に商品リンクを置くことがさらに簡単です。

見た目もすっきりしてクリック率も上がるので、ぜひ活用してみてくださいね。