お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

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

アイキャッチ/テーブル(表)/ボタンカスタマイズ
スポンサーリンク

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

ブロガー
ブロガー

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

テーブル/ボタン

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

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

Cocoonのブロックエディタ(=ワードプレスのブロックエディタ)の場合少しコツが必要なので、うまく作れず悩んでいる方も多いかと思います。

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

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

今回はCSSなど難しいコードは使いません。手軽にできますので試してみてくださいね。

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

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

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

そこでリンクボタンのHTMLをテーブルに追加する工夫をします。

方法は2つ
  1. リンクボタンのHTMLをテーブルに直接入力
  2. リンクボタンのHTMLを一旦テンプレート化してショートコードで呼び出す

①HTMLの直接入力でも表示できますがとても手間がかかるので、この記事では②のリンクボタンのHTMLを一旦テンプレート化してショートコードで呼び出す方法でご紹介します。

  • STEP1
    ボタンを作成

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

  • STEP2
    Cocoonテンプレートに登録す
  • STEP3
    ブロックエディタでテーブル(表)を作成する
  • STEP4
    ショートコードでHTMLを呼び出す
  • 完成!

ボタンを作成/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。

プレビューでボタンが表示されているか確認しましょう。

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

テーブル/ボタン

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

補足/HTMLに変換しない方法もあります

  1. ブロックエディタで囲みボタン作成
  2. ブロックをコピー
  3. Cocoonテンプレート→ビジュアルのまま貼り付け
  4. テーブルでショートコード呼び出し

Cocoonユーザーの方から、上記のようにHTMLに変換しないで「ブロックのままコピー&貼り付けする方法」を教えていただいたのですが、私のサイトではなぜかボタン化されずにそのままコードとして出力されてしまいました…

当記事では確実にボタンリンク化を検証できている「HTMLに変換する方法」で掲載していますのでご理解ください。

便利!Flexible Table Blockプラグインならセルの結合ができます

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

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

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

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

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

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

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

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

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

当記事ではCocoonのテンプレート機能を利用しましたが、今後他にも効率的な方法が見つかれば追記していきますね。(再利用ブロックも使えそう??)

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

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

Comment

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