サイト型トップページの作り方を公開しています!Check

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

アイキャッチ|テーブル表にボタン Cocoon
Cocoon
記事内に広告が含まれています

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

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

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

標準機能を使うだけ。

こんな方のお役に立てます
  • テーマ「Cocoon」を使っている
  • ブロックエディタで表(テーブル)を作っている
  • 比較表・料金表・アフィリエイト表をもっと見やすくしたい
  • 表内にボタンリンク(公式サイト・商品ページなど)を設置したい
スポンサーリンク

この記事を書いた人

はるみです
吹き出し/女性
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • 2020年1月1日ブログ開設
  • ドメインパワー40(2025年6月現在)
  • 2023年~有料記事公開
    • →累計420件(月間約20件)購入いただいています

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

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

Before(ただのテキストリンク)

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

After(ボタン形式で視認性アップ)

項目1項目2
詳細ページAmazonを見る楽天を見る
スポンサーリンク

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

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

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

  1. ブロックエディタで「テーブル」ブロックを挿入
  2. 行数・列数を設定
  3. 任意のテキスト(商品名やボタン文言など)を入力
テーブルにリンクボタンを置く|インラインタグ

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

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

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

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

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

テーブルにリンクボタンを置く|インラインタグ

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

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

  1. 対象のテキストを選択
  2. ツールバー→もっと見る(アイコン)→「書式のクリア」をクリック
テーブル内にリンクボタン|書式のクリア
スポンサーリンク

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

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

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

子テーマのスタイルシートを使用します。

  1. 管理画面の「外観」から「テーマファイルエディター」をクリック
    • Cocoon Child: スタイルシート (style.css) のページが開きます
  2. 元から書いているコード(テーマ情報)は消さずにCSSを記述します
    • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ(Cocoon child)が選択されていることを確認してください。

CSS編集/スタイルシート

参考記事 Cocoonカスタマイズ|HTML・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; は半円形に近い、しっかりとした丸みです。
  • 角丸を控えめにしたい場合は 10px5px に変更すると調整できます。
  • [class*="inline-button-"] は「inline-button-」で始まるすべてのボタンクラスにまとめて適用する指定方法です。

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

テーブルにリンクボタンを置く|文字サイズ

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

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

1em は親要素の文字サイズに対して相対的に設定されるため、テーマ全体のバランスに馴染みやすくなります。

スポンサーリンク

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

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

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

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

ポチップの使い方はこちらの記事で解説中

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

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

Pochipp(ポチップ)

おすすめ度:

  • おしゃれな商品リンク簡単作成
  • 自由なカスタムリンク追加OK
  • Pro セール自動表示・口コミリンク・分析レポートで収益アップ
スポンサーリンク

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

簡単ですね!

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

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

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

Comment コメントはこちらへお願いします

  1. Gassyu より:

    はっちゃん様

    できました!
    おかげさまで解決しました!
    色々とありがとうございましたm(__)m
    感謝です!!!

  2. Gassyu より:

    はっちゃん様
    返信遅くなり申し訳ありません。

    囲みボタンの下にできる余白の件ですが、

    テスト記事を作成しました。
    URL:https://review2019jp.com/test/
    やはり何度やっても余白ができてしまいます。

    ただ、偶然かたまたまか、再現できないんですが余白がなくなった記事もあります。
    URL:https://review2019jp.com/comparison-biima-sports-and-ninja-nine/
    最初にある比較表の最下部です。

    念のため、Cocoonの子テーマのスタイルシートの画像も添付しておきます。

    よろしくお願いいたします。

    • はるみ はっちゃん より:

      いえいえ^^
      テスト記事拝見しました。
      table .btn-wrap a下にも余白があるようなので、両方指定するこちらではどうでしょうか?
       
      /*テーブル内の囲みボタン*/
      table .btn-wrap,
      table .btn-wrap a{
      margin-bottom: 0!important;/*下の余白を0にする*/
      }

  3. Gassyu より:

    はじめまして、直感DEレビューブログを運営しているGassyuと申します。
    (サイトURL:https://review2019jp.com/)

    テーマはCocoonを使ており、「囲みボタンの下にできた余白を消す方法」で検索していたら、この記事にたどり着きました。

    この記事にあるように、

    /*テーブル内の囲みボタン(リンク)*/
    table .btn-wrap a{
    margin-bottom: 0!important;/*下の余白を0にする*/
    }

    をコピペして、

    Cocoon Child: Stylesheet (style.css)の一番下に貼り付けました。

    でもやはり、空白は解消されません。

    解決方法を教えてほしいです。

    私の場合、普段はブロックエディターで記事を作成しており、表を入れる場合だけ、クラシックエディターを挿入して作成しています。

    アフィリンクボタンを挿入する場合は、この記事のように一時記事内空いているスペースに囲みボタンでリンクを設置して、

    その後、変換したHTMLをすべて選択して右クリックでコピーします。

    クラシックエディターのHTMLの挿入を選択してアフィリンクボタンを設置しています。

    また、この記事のように「テンプレートからボタン(HTML)を呼び出す」方法でもやってみましたが、やはり囲みボタンの下にできた余白は解消できませんでした。

    お忙しいところ恐縮ですが、解決方法を教えていただけないでしょうか?

    よろしくお願いいたします。

    • はるみ はっちゃん より:

      > Gassyuさん

      はじめまして。
      記載のコードで囲みボタン下の余白は0になるはずです。
       

      ご自身のサイトで実際に余白が消えているかご確認いただけますでしょうか。(添付した画像を参考に、デベロッパーツールで調べることができます。囲みボタンにmargin-bottom:0!important;が表示されていればCSSは反映されて余白は消えている状態です。)
       
      どの記事のどの部分のボタンか教えていただいてもよろしいですか。
       

タイトルとURLをコピーしました