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

今回はテーブル（表）について。

このような比較表を作ったときに、例えば公式サイトへのリンクやアフィリエイトリンクを置きたい場合がありますよね。

そんなときにテキストリンクは作れるけどボタンにしたいな～と思うことはないでしょうか。

うまく作れず悩んでいる方も多いかと思いますが、実はちょっとした工夫でできちゃいます。

この記事では、テーブルのセル内にリンクボタンを設置する方法について解説します。

テーブル（表）の中にリンクボタンを設置する手順

テーブル（表）はブロックの構造が特殊なため、通常のブロックエディタの操作でボタンは置けません。そこで一工夫。

リンクボタンを一旦テンプレート化してショートコードで呼び出します。

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

Cocoonのボタンで主に使うのはこの２種類。

ブロックエディタでボタンを作成

記事の空いているところで、通常通り置きたいボタンを作成します。

HTMLに変換してコピーします

ツールバーのメニューアイコン→「HTMLとして編集」をクリック。

変換した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にする*/
}

このCSSを反映させるためにプロパティ末尾に!importantをつけて優先しています。

Cocoonテンプレート不要！もっと簡単に表内にリンクボタンを設置する方法あり

ここまで紹介しましたが…

テンプレートを使用しない別の方法を下記、宙也さんのサイトで公開されています。

ブロックエディタの「ハイライト」機能（色付け）を使ってボタン風にする、という目から鱗な工夫がありますよ。

1. テキストリンク作成
2. ハイライト設定

この順番を守る（ハイライト設定は最後にする）必要があります。

追加するのはテキストリンクをボタン風にするスタイルだけ。

table mark {
	display: inline-block;/*インライン要素*/
	padding: .2em 2em;/*内側余白　上下・左右*/
	border-radius: 99px;/*丸くする*/
	color:#fff;/*文字色*/
}

当サイトでは下記の表のようにサンプルページを表示する場合など、テンプレートを作るまでもないテキストリンクのときにこの方法を使っています。

サイト型 トップページ	HTML／CSS	ブロックを使う方法
おすすめ	コードコピペで済ませたい人	目に見えるブロック機能で作りたい人
サンプルページ	SAMPLE	SAMPLE

リンクごとにテンプレートを作る必要がないメリットがあり、より手軽に使えます。

もう少し簡単な手順でリンクボタンを置きたい！という方はチェックしてみてください。

プラグイン紹介／Flexible Table Blockならセルの結合ができます

ちなみにCocoonではテーブルにテーマ独自機能がついていないので、ワードプレスのテーブルそのままの最低限の設定しかできません…

こうしたいと思う設定ができないことが多く、使い勝手がいまいちですよね。

そんな機能を補ってくれるプラグインに「Flexible Table Block」があります。

セルの結合、セルごとに背景色をつけるなど痒い所に手が届く機能が沢山！個人的にお気に入りなのでご紹介しておきます。

比較表	ヘッダー	ヘッダー
項目① （セルを結合）		背景色をつけたい
	背景色をつけたい	ここもセル接合して背景色
項目②

まとめ／テンプレート機能を使って表にリンクボタンを設置できる

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

CocoonのボタンをHTMLに変換しているだけで構造はそのままなので、通常のリンクボタンの他に囲みボタンではアフィリエイトタグも使えることがポイントです！

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

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