WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

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

アイキャッチ/テーブル表にボタン カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

今回はテーブル(表)について。

表の中にリンクボタンを入れたいなぁ。

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

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

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

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

こんな方のお役に立てます
  • テーマ「Cocoon」ブロックエディタを使っている
  • テーブルの使い勝手に悩んでいる
  • テーブルの中にリンクボタンを置きたい
  • アフィリエイトリンクもボタンで囲みたい

今回はCSSなど難しいコードは使いません。Cocoonのテンプレート登録で手軽にできますので試してみてくださいね。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー35
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

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

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

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

  • Step1
    ボタンを作成

    ボタン(囲みボタン)を作成→HTMLに変換

  • Step2
    Cocoonテンプレートに登録す
  • Step3
    ブロックエディタでテーブル(表)を作成する
  • Step4
    テンプレートからボタン(HTML)を呼び出す
  • Complete
    完成!
スポンサーリンク

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

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

ボタン 通常のURLを入力してボタンが作れます。
囲みボタン <a>タグから始まるようなアフィリエイトリンクもそのまま囲んでボタン化できるとても便利なボタンです。

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

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

ボタンの設定
  • URL、アフィリエイトリンクの設定
  • ボタンのサイズ
  • ボタンのスタイル
  • ボタンの文字サイズ
  • ボタンの色

ここでボタン設定をすべておこないましょう。

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

ツールバーの三点メニュー→「HTMLとして編集」をクリック。

テーブル/ボタン

変換したHTMLをすべて選択して右クリックでコピーしておきます。(次の工程で使います)

スポンサーリンク

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

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

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

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

  1. Cocoon設定→テンプレート
  2. 「新規追加」をクリック
  3. 右側タブ「テキスト」を選択
  4. 下部入力欄にさきほどコピーしたHTMLを貼り付けます
  5. 分かりやすい任意のタイトルを入力
  6. 下の保存を忘れずにクリックします

同じ手順で、置きたいボタンの分をすべて登録します。

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

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

スポンサーリンク

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

投稿編集画面「テーブル」で表を作成します。

実際に作ってみます
比較表比較①比較②
項目①
項目②
公式サイト(ここにボタンを入れたい)(ここにボタンを入れたい)
スポンサーリンク

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

  1. ボタンを置きたいセルを選択した状態で、上部ツールバーからテンプレートのアイコンをクリック
  2. 登録したテンプレート一覧から選択してクリック(ドロップダウン表示されます)

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

または、[ temp id = ○] というように、ショートコードを直接入力してもOK。

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

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

実際に表の中にボタンを置いてみました
比較表比較①比較②
項目①
項目②
公式サイト

おー、理想通りのボタンリンクができてる!!

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

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

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

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

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

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

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

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

この順番を守る(ハイライト設定は最後にする)必要がありますが手軽に使えるかと思います。

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

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

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

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

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

Flexible Table Blockの主な機能
  • 選択した複数のセルを結合、または分割
  • 表、セル、キャプションのタグごとに、個別のスタイルを設定
  • セルの幅を指定する

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

数分でこのような表も簡単
比較表ヘッダーヘッダー
項目①
(セルを結合)
背景色をつけたい
背景色をつけたいここもセル接合して背景色
項目②

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

イメージ画像

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

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

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

\◎○△×を入れた比較表を作りたい方向け/

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

ブログ、SNS等でご紹介いただけると嬉しいです!!

COMMENT

  1. 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は反映されて余白は消えている状態です。)
       
      ただ…
       
      囲みボタン下の余白が消えてもテーブル内に謎の余白ができることが私のサイトでも起こっています。ボタンの後で改行されて半角スペーズが入っているように見え、Cocoonのアップデートの影響(今回いろいろ変わっています)もあるかもしれないので調べてみますね。
       

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

      すみません。

      当サイトの余白は改善しました。
      どの記事のどの部分のボタンか教えていただいてもよろしいでしょうか。

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