Cocoon／テーブル(表)の中にリンクボタンを置く方法

この記事では、テーブルのセル内にリンクボタンを置く方法について解説します。実装されたCocoon機能とは違う方法になるので参考にしてください。

このような比較表を作ったときに、例えば公式サイトへのリンクやアフィリエイトリンクを置きたい場合。テキストリンクは作れるけどボタンにしたいな～と思うことはないでしょうか。

ワードプレスではテーブルの中にブロックを入れられない仕様ですが、実はちょっとした工夫でできちゃいます。

テーブル（表）の中にリンクボタンを置く２つの方法

テーブル（表）の中にリンクボタンを置く、２つの方法をご紹介します。

1. ワードプレスのハイライト機能を使う 簡単でおすすめ
2. Cocoonのテンプレート機能を使う

	ハイライト機能	テンプレート機能
メリット	テンプレート登録が不要	Cocoonのボタン機能が使える
デメリット	CSSが必要（簡単）	リンクごとにテンプレート登録が必要
実際のボタン	もしもアフィリエイト	もしもアフィリエイト
作り方	手順を見る	手順をみる

ワードプレスの「ハイライト」機能を使って、テーブル（表）の中にリンクボタンを置く方法

ブロックエディタの「ハイライト」機能（文字や背景に色を付ける機能）を使ってボタン風にします。

これは、スキン「メイド・イン・ヘブン」を制作された宙也さんに教えていただき、サイトでも公開されているアイディアです。

使い方

CSSの設定

最初のみCSSを登録します。このCSSはテーブル内のテキストリンクをボタン風にするスタイル設定です。

/*ハイライト機能を利用してボタン風に*/
table mark {
	display: inline-block;
	padding: .5em 1.5em;/*ボタン内側の余白（上下・左右）*/
	border-radius: 99px;/*ボタンの丸み（数字が小さいほど四角になる）*/
	color:#fff;/*文字の色（白）*/
	transition: all 0.3s ease-in-out;/*ゆっくり変化*/
}

table mark:hover{
	opacity:.8;/*マウスオーバーで少し薄くする*/
}

table mark + .anchor-icon {
	display: none;/*アイコン非表示*/
}

ハイライト機能を使う方法はリンクごとにテンプレートを作る必要がない大きなメリットがあり、手軽に使えるためとてもおすすめです！

Cocoonの「テンプレート」機能を使って、テーブル（表）の中にリンクボタンを置く方法

こちらはCocoonの「テンプレート」機能を使う方法です。

テーブル（表）はブロックの構造が特殊なため、通常のブロックエディタの操作でボタンは置けません。そこで一工夫。リンクボタンを一旦テンプレートに登録してショートコードで呼び出します。

1. ボタンを作成
2. ボタンをCocoonテンプレートに登録する
3. ブロックエディタでテーブル（表）を作成する
4. テンプレートからボタン（HTML）を呼び出す
5. 完成

ボタンを作成／HTMLに変換する

Cocoonテンプレートに登録する

続いてボタンをCocoonのテンプレートに登録します。

Cocoonのテンプレートはテンプレート文（定型文）を登録し、ショートコードを用いて何度でも呼び出せる便利な機能。今回はこの機能を利用します。

公式　テンプレート文（定型文）を登録して使い回す方法

「一覧ページへ」をクリックし、すべてのHTMLが登録されていることを確認しましょう。

それぞれのテンプレートにショートコードが設定されています。

ブロックエディタでテーブル（表）を作成

投稿編集画面のブロックメニュー「テーブル」で表を作成します。

比較表	比較①	比較②
項目①
公式サイト	（ここにボタンを入れたい）	（ここにボタンを入れたい）

テンプレートからボタン（HTML）を呼び出す

すると、選択したセルの中にショートコードが表示されます。

エディタ上ではショートコードのままなので、プレビューでボタンが表示されているか確認しましょう。

置きたい分だけのボタンが設置できたら完成です！

比較表	比較①	比較②
項目②
公式サイト	Pochipp	もしもアフィリエイト

囲みボタン、ボタンの下にできた余白を消す方法／CSS

テーブル内に置いた囲みボタン、またはボタンの下に不要な余白（Cocoon設定で設定した行間の余白）がある場合、子テーマのスタイルシートにCSSを追加します。

管理画面の「外観」から「テーマファイルエディター」をクリック。｢スタイルシート (style.css)｣のページが開くので元から書いているコード（テーマ情報）は消さずにCSSを記述します。詳細はこちら

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

/*テーブル内のCocoonボタン*/
 table .button-block{
	margin-bottom: 0!important;/*下の余白を0にする*/
}

まとめ／工夫次第でテーブル（表）の中にリンクボタンを簡単に置けます

以上、テーブル（表）の中にリンクボタンを設置する２つの方法を解説しました。

両方とも、通常のリンクボタンの他にアフィリエイトタグも使えることがポイントです。テーブルの中にリンクボタンを置くことも工夫次第ですね！

また、別記事にて『Cocoonで比較表(テーブル)を作る／背景に記号◎○△×を入れるSWELL風おしゃれカスタマイズ』も公開しています。

Cocoonユーザーでテーブルの使い方に悩んでいる方の少しでもお役に立てれば幸いです。