デザインやカスタマイズを依頼するなら ココナラ

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

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

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

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

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

そんなときにテキストリンクは作れるけどボタンにしたいな~と思うことはないでしょうか。うまく作れず悩んでいる方がいらっしゃるかもしれませんが、実はちょっとした工夫でできちゃいます。

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

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

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

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

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

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

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

  • 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,
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ブロックを使う方法
おすすめコードコピペで済ませたい人目に見えるブロック機能で作りたい人
サンプルページSAMPLESAMPLE

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

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

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

イメージ画像

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

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のアップデートの影響(今回いろいろ変わっています)もあるかもしれないので調べてみますね。
       

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

      すみません。

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

  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 より:

    はっちゃん様

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

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