当カスタマイズはCocoon 2.7.1で標準機能として実装されました。重複するため記事内容は実質不要になりますが、備忘録として残しておきます。
記号の色、大きさや透過率を変える場合等に活用ください。
Cocoonテーマを使っている方、テーブルを使った表のデザインにお悩みではないでしょうか。
ユーザー
無機質な感じ…○×を入れた比較表とか作れたらいいな～。
現在（2024年1月時点）、Cocoonには独自のテーブルデザイン機能はなくワードプレス標準のシンプルな仕様となっています。しかし、少しの工夫でCocoonのテーブルを有料テーマ「SWELL」のようにオシャレにカスタマイズできます。
ビフォーアフターをご覧ください。
普通の表に記号を直接入力しただけの状態です。
SWELL風のデザインで、視認性が向上！
このような表を作ってみたい方はぜひ試してみてください。
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計370件（月間約20件）購入いただいています
Cocoonで比較表（テーブル）を作成・カスタマイズするポイント
Cocoonの比較表に記号（◎○△×）を表示する方法
実際にテンプレート機能を使って作成した表の例です。
| 種類 | 特徴 | メリット | デメリット |
|---|---|---|---|
| ①Font Awesome | webアイコンフォント | Cocoonに標準搭載 | 一部記号が対応していない |
| ②SVG | 画像ファイルのひとつ | 編集しやすく汎用性が高い | コード記述が長くなる |
| ③画像 | 画像を使用 | 簡単 | 画像を用意する必要あり |
| ④テキスト | 一般の文字 | 簡単 | 線が細い（ふちどりでカバー可能） |
どの方法でも実装できますが、当記事では、綺麗に表示できる「SVG」を使う方法を解説します。
『テンプレート』にHTMLを登録する
Cocoonには「テンプレート」機能があり、定型文を登録しておくことでショートコードを使って何度でも簡単に呼び出せます。これを活用して、比較表（テーブル）に記号◎○△×を表示するカスタマイズをおこないます。
Cocoonテンプレートの使い方
- 投稿編集画面で簡単に記号を選択・挿入可能
- 画像のように、投稿編集画面で登録したテンプレート一覧から記号◎○△×（登録したタイトル）を選択するだけで、どこのセル内にでも繰り返し自由に記号を入れることができます。
- CSSでテーブルのデザイン（記号の位置・サイズ・色など）を調整
選択するだけなのが嬉しい！
Cocoonで比較表（テーブル）を作る手順【3ステップ】
- Step1CSSをコピペする
セルの後ろに◎○△×を配置し、スタイルを設定します。
- Step2Cocoon設定／テンプレートにHTMLを登録
記号（◎○△×）をショートコード化して簡単に呼び出せるようにします。
- Step3テーブル（表）に記号を表示させる
投稿編集画面で、テーブル内のセルにテンプレートから記号を追加します。
CSSの記述（コピペOK）
CSSで、テーブルの中に記号を設置するためのスタイルを設定します。
子テーマのスタイルシートを使用します。
- 管理画面の「外観」から「テーマファイルエディター」をクリック
- Cocoon Child: スタイルシート (style.css) のページが開きます
- 元から書いているコード（テーマ情報）は消さずにCSSを記述します
- /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう
/* テーブルに記号追加（◎○△×）---------------------------------------------- */
/*配置位置起点*/
.entry-content td{
position: relative;
z-index: 1;
}
/*記号を上下左右中央寄せにする*/
.table-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1; /*テーブルの後ろに記号配置*/
}
/*記号配置（SVG使用）*/
.table-icon:before {
content: "";
display: block;
height: 35px;
width: 35px;
opacity: 0.6;
}
.table-icon.s-circle:before {
background-color: #DBB6A2;/*○*/
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 32q-3.313 0-6.219-1.25-2.906-1.281-5.078-3.453t-3.453-5.078q-1.25-2.906-1.25-6.219t1.25-6.219q1.281-2.906 3.453-5.078t5.078-3.453q2.906-1.25 6.219-1.25t6.219 1.25q2.906 1.281 5.078 3.453t3.453 5.078q1.25 2.906 1.25 6.219t-1.25 6.219q-1.281 2.906-3.453 5.078t-5.078 3.453q-2.906 1.25-6.219 1.25zM16 2.906q-2.719 0-5.094 1.031t-4.156 2.813-2.813 4.156-1.031 5.094 1.031 5.094 2.813 4.156 4.156 2.813 5.094 1.031 5.094-1.031 4.156-2.813 2.813-4.156 1.031-5.094-1.031-5.094-2.813-4.156-4.156-2.813-5.094-1.031z"></path></svg>');
}
.table-icon.w-circle:before {
background-color: #8bc34a;/*◎*/
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 32q-3.313 0-6.219-1.25-2.906-1.281-5.078-3.453t-3.453-5.078q-1.25-2.906-1.25-6.219t1.25-6.219q1.281-2.906 3.453-5.078t5.078-3.453q2.906-1.25 6.219-1.25t6.219 1.25q2.906 1.281 5.078 3.453t3.453 5.078q1.25 2.906 1.25 6.219t-1.25 6.219q-1.281 2.906-3.453 5.078t-5.078 3.453q-2.906 1.25-6.219 1.25zM16 2.906q-2.719 0-5.094 1.031t-4.156 2.813-2.813 4.156-1.031 5.094 1.031 5.094 2.813 4.156 4.156 2.813 5.094 1.031 5.094-1.031 4.156-2.813 2.813-4.156 1.031-5.094-1.031-5.094-2.813-4.156-4.156-2.813-5.094-1.031zM16 26.875q-2.25 0-4.219-0.875-1.969-0.844-3.453-2.328t-2.328-3.453q-0.875-1.969-0.875-4.219t0.875-4.219q0.844-1.969 2.328-3.453t3.453-2.328q1.969-0.875 4.219-0.875t4.219 0.875q1.969 0.844 3.453 2.328t2.328 3.453q0.875 1.969 0.875 4.219t-0.875 4.219q-0.844 1.969-2.328 3.453t-3.453 2.328q-1.969 0.875-4.219 0.875zM16 8.063q-1.656 0-3.094 0.625t-2.516 1.703-1.703 2.516-0.625 3.094 0.625 3.094 1.703 2.516 2.516 1.703 3.094 0.625 3.094-0.625 2.516-1.703 1.703-2.516 0.625-3.094v0q0-1.656-0.625-3.094t-1.703-2.516-2.516-1.703-3.094-0.625v0 0z"></path></svg>');
}
.table-icon.triangle:before {
background-color: #ffc107;/*△*/
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M31.719 29.281h-31.313l15.656-27.094zM4.625 26.844h22.875l-11.438-19.813z"></path></svg>');
}
.table-icon.cross:before {
background-color: #8d95a6;/*×*/
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 18.125l-11.938 11.938-2.094-2.125 11.906-11.938-11.906-11.938 2.094-2.094 11.938 11.906 11.938-11.906 2.125 2.094-11.938 11.938 11.938 11.938-2.125 2.125-11.938-11.938z"></path></svg>');
}Cocoon設定｜テンプレートにHTMLを登録（ショートコード化）
手順
- Cocoon設定 →「テンプレート」→「新規追加」をクリック
- 右側の「テキスト」タブを選択
- 記号（◎○△×）を呼び出すHTMLを登録
- 保存する
「◎」を呼び出すHTML
<div class="table-icon w-circle"></div>「〇」を呼び出すHTML
<div class="table-icon s-circle"></div>「△」を呼び出すHTML
<div class="table-icon triangle"></div>「×」を呼び出すHTML
<div class="table-icon cross"></div>登録のポイント
- 「HTMLコピペ」→「保存」をひとつずつおこなってください
- 「〇」など分かりやすいタイトルをつけます
一覧ページへをクリックすると、それぞれショートコード化できたのが確認できます。
この登録をすることで、繰り返し使えるようになります。
テーブル（表）に記号を表示させる
テーブル（表）に記号を表示させる手順は以下の通りです。
- 対象のセルを選択
作成したテーブル（表） の中で、記号を入れたいセルをクリックします。（テキストの前後どちらでもOKです）
- テンプレートのアイコンをクリック
ツールバーの テンプレートのアイコン をクリックします。
- 表示する記号を選択
プルダウンメニューで、先ほど登録したテンプレートが表示されるので、表示したい記号のテンプレートを選択します。（クリック）
- ショーコード表示
選択すると、セル内に ［temp id=番号］ といったショートコードが表示されます。
※ショートコードは直接入力しても問題ありません。
- プレビューで表示確認
エディタ上ではショートコードが表示されますが、プレビューを確認するとテキストの後ろに記号がしっかりと表示されていることが確認できます。
このようにして、テーブル内に記号を簡単に追加することができます。
保存したら完成です！！
Cocoonの比較表デザインをカスタマイズする方法
比較表を作成した後にスタイルを変更したい場合は、子テーマのスタイルシートにCSSを追加することで調整が可能です。
- 色を変更 → CSSで
background-colorを調整 - 透過度を変更 →
opacityの値を0～1.0で設定 - サイズを変更 →
heightとwidthの値を調整
記号の色・大きさ・透過度を変更する方法
/* 比較表の記号の色変更 */
.s-circle:before {
background-color: #00bcd4; /*○の色*/
}
.d-circle:before {
background-color: #8bc34a; /*◎の色*/
}
.triangle:before {
background-color: #ffc107; /*△の色*/
}
.cross:before {
background-color: #f44336; /*×の色*/
}/* 比較表の記号の大きさ、透過度 */
.s-circle:before,
.d-circle:before,
.triangle:before,
.cross:before {
height: 40px;
width: 40px;
opacity: 0.3; /*透過度を数字で入れる*/
}デフォルトの40pxから35pxに変更した例を示しています。
そのままでも十分オシャレですが、サイトカラーに馴染ませたいなど細かいこだわりがある方は試してみてくださいね。
その他、個人的に気になった部分について書いておきます。
デフォルトのテーブル背景色を変更する方法
Cocoonのテーブルは、デフォルトで奇数行に薄いグレーの背景色が設定されています。これを真っ白にしたい場合は以下のCSSを追加します。
/*テーブル偶数行の背景色を白に変更*/
table tr:nth-of-type(2n+1) {
background-color:#fff;
}固定ヘッダーの下線の色を変更する方法
ヘッダーの下線が黒くて目立つ場合は、以下のCSSで薄く調整できます。
/*固定ヘッダーの下線*/
.wp-block-table thead {
border-color: var(--cocoon-x-thin-color);
}
テーブルのヘッダー（見出し）の色を変更する方法
メインカラーと統一することで、ヘッダーの色を都度変更する手間が省けます。
| 見出し（この部分） | 見出し（この部分） |
|---|---|
| 内容 | 内容 |
| 内容 | 内容 |
/*テーブルのヘッダー（見出しの色）*/
.entry-content th {
background-color:#カラーコード;/*見出し背景（変更できます）*/
color:#fff;/*文字色（変更できます）*/
}
お好みに合わせてカスタマイズし、サイトデザインに馴染む比較表を作成してみてください。
まとめ｜Cocoonでもオシャレな比較表を作成できる
Cocoonの標準テーブル機能はシンプルですが、テンプレート機能とCSSを活用することで、記号（◎○△×）を使った分かりやすくデザイン性のある比較表を作成できます。
また、テーブル内にボタンを設置する方法も紹介していますので、興味のある方は以下の記事もチェックしてみてくださいね。
Comment コメントはこちらへ
有益な情報をありがとうました。記事の通りに背景マークを入れることができたのですが、添付ファイルのようにマークに変な線が出てしまいます。修正する方法をお教えいただけませんでしょうか。よろしくお願いいたします。
> tadaさん
こんにちは。
変な線の原因は、Cocoon機能と使っているクラス名が同一のため競合してしまったようです。
当カスタマイズと同じ内容がCocoonの標準機能として追加されましたので、お手数ですが追加したコードを削除いただきCocoon機能の方でお試しいただければと思います。
詳しい使い方はこちらに記載されています。
https://wp-cocoon.com/background-icon/
よろしくお願いします。