Cocoon比較表／セル背景に記号○△✕を入れるSWELL風カスタマイズ

当カスタマイズはCocoon 2.7.1で本体に実装されました。記号の色、大きさや透過率を変えたい等に活用できるよう追記し、当記事は当面残しておきます。

Cocoonテーマを使っている方、テーブルを使った表のデザインにお悩みではないでしょうか。

悩める
ユーザー

無機質な感じ…○×を入れた比較表とか作れたらいいな～。

現在（2024年1月現在）、Cocoonのテーマ独自に付加されたテーブル機能はなくほぼワードプレスそのままの仕様になっています。（プラグイン等で機能補填はできますが）

今回はそんなシンプル・質素なCocoonの表を有料テーマのSWELLのようにオシャレに変える方法をご紹介します。

まずビフォーアフターをご覧ください。

カスタマイズ前

普通の表に記号は直接入力しています。

カスタマイズ後

SWELL風のこれ、やってみたかった！

このようにしてみたい方はお試しくださいね。

この記事を書いた人

• ブログ好きな40代主婦
• CocoonサイトをCSSでカスタマイズ
• 2020年1月1日ブログ開設
• ドメインパワー40
• 2023年～有料記事公開
  • →累計280件（月間約20件）購入いただいています

はっちゃん
です

Cocoonで比較表(テーブル)を作るカスタマイズのポイントと使い方

ポイントは『テンプレート』にHTMLを登録すること

Cocoonにはテンプレート機能があり、定型文を登録しておけばショートコードを用いて何度でも繰り返し呼び出すことができます。

今回はこの機能を利用します。

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

CSSでテーブルのセル内で配置する位置の指定、記号の大きさや色などスタイルを設定します。

Cocoonテンプレートの使い方

画像のように、投稿編集画面で登録したテンプレート一覧から記号◎○△×（登録したタイトル）を選択するだけで、どこのセル内にでも繰り返し自由に記号を入れることができます。

選択するだけなのが嬉しい！

比較表(テーブル)に使う記号◎○△×を表す方法

記号を表す方法はいくつかあるのですが、当記事では私がより使いやすいと感じる『テキスト』と『SVG』を紹介します。

実装手順は

1. CSSを入力
2. HTMLをテンプレートに登録する（◎〇△×の４種類）

両方コピペできるコードを準備しましたので難しくはありません。

また、記号◎○△×の色はCSSのカラーコードでお好みの色に設定できます。

それでは解説していきますね。

Cocoonで比較表(テーブル)を作るカスタマイズの手順

まず、ブロックエディタでテーブルを使った比較表はあらかじめ作成してあるものとします。

この表はテーブルの設定は「表のセル幅を固定」「ヘッダーセクション」をONにしています。

CSSをコピペする

CSSで、テーブルの中に記号を設置するためのスタイルを設定します。

CSSの記述について

1. 管理画面の「外観」から「テーマファイルエディター」をクリック
   • Cocoon Child: スタイルシート (style.css) のページが開きます
2. 元から書いているコード（テーマ情報）は消さずにCSSを記述します
   • /* 子テーマ用のスタイルを書く*/から下の行に追加しましょう

子テーマ（Cocoon child）が選択されていることを確認します

参考記事 Cocoonカスタマイズ／HTML・CSSの編集とワードプレスをバックアップする方法

記号に『テキスト』を使う方法

/* テーブルに記号追加（◎○△×）---------------------------------------------- */

/*配置位置起点*/
.entry-content td{
	position: relative;
	z-index: 1;
}

/*記号を上下左右中央寄せにする*/
.table-icon {
	position: absolute; 
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;　/*テーブルの後ろに記号配置*/
}

/*記号配置（テキスト使用）*/
.table-icon:before {
	content: "";
	display: block;
	font-size:35px;/*記号のサイズ*/
	opacity: 0.3;/*薄く透過させる*/
}

/*記号の種類とふちどりして少し太くする*/
.table-icon.w-circle:before{
	content:"◎";
	color:green;/*記号の色（お好みで）*/
	-webkit-text-stroke: 1px green;
	text-stroke: 1px green;
}
.table-icon.s-circle:before{
	content:"○";
	color:blue;/*記号の色（お好みで）*/
	-webkit-text-stroke: 1px blue;
	text-stroke: 1px blue;
}
.table-icon.triangle:before{
	content:"△";
	color:orange;/*記号の色（お好みで）*/
	-webkit-text-stroke: 1px orange;
	text-stroke: 1px orange;
}
.table-icon.cross:before{
	content:"×";
	color:red;/*記号の色（お好みで）*/
	-webkit-text-stroke: 1px red;
	text-stroke: 1px red;
}


/*必要に応じて*/

/*垂直スクロールバーを出さない設定*/
.wp-block-table {
    overflow-y: hidden;
}

記号に『SVG』を使う方法

table-iconのクラス部分や一部コードは少し違いますが、Cocoonではこの『SVG』を使う方法で実装されています。

/* テーブルに記号追加（◎○△×）---------------------------------------------- */

/*配置位置起点*/
.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を登録します。入力したら左下の保存をクリックしてください。

<div class="table-icon w-circle"></div>

<div class="table-icon s-circle"></div>

<div class="table-icon triangle"></div>

<div class="table-icon cross"></div>

一覧ページへをクリックすると、それぞれショートコード化できたのが確認できます。

この登録をすることで、繰り返し使えるようになります。

テーブル（表）に記号を表示させる

ここまでできたらあとは作成したテーブル（表）に記号を表示させるだけ。

作成したテーブル（表）の記号を入れたいセルをクリック（テキストの前後どちらでもOK）して、ツールバーのテンプレートのアイコンをクリックします。

プルダウン式でさきほど登録したテンプレートが表示されます。

表示したい記号のテンプレートを選択（クリック）。

選択すると［temp id=番号］といったショーコードが表示されています。

ショートコードは直接手入力でもOK

エディタ上ではショートコード表示ですが、これをプレビューするとテキストの後ろに記号が表示されているのが確認できます。

保存したら完成です！！

Cocoon比較表／記号の色、大きさ、透過度を変更したいときは

冒頭に記載しましたが、当カスタマイズは2024.2.25／Cocoon 2.7.1のアップデートで実装されました。

実装後に比較表の記号の色を変えたい等は、子テーマのスタイルシートにCSSを追加することで可能です。

/* 比較表の記号の色変更 */
.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; /*透過度を数字で入れる*/
}

opacity（透過度）は0～1.0で指定し、数字が大きいほど濃くなります。

当サイトでは記号の大きさを40px→35pxに変更しています。（サイズを変えすぎるとSVGの特性上表示が崩れるので、35px～45pxの間がよいです）

そのままでも十分オシャレですが、サイトカラーに馴染ませたいなど細かいこだわりがある方は試してみてくださいね。

Cocoonテーブル（表）その他プチカスタマイズ

その他、個人的に気になった部分について書いておきます。

デフォルトのテーブル背景色を変更

ちなみにCocoonのテーブルで表を作成すると奇数行に薄いグレーの背景色がデフォルトでついています。これはこれでいいけどCocoonぽさが出る部分であるので白に真っ白にしたいときは。

/*テーブル偶数行の背景色を白に変更*/
table tr:nth-of-type(2n+1) {
    background-color:#fff;
}

固定したヘッダーの下線の色を変更

また固定したヘッダーの下線が黒くて気になる場合は、下記のCSS追加で薄くなります。

/*固定ヘッダーの下線*/
.wp-block-table thead {
    border-color: var(--cocoon-x-thin-color);
}

テーブルのヘッダー（見出しの色）

CSSで設定しておけば毎回変更しなくていいのでラクですよ。（投稿編集画面で記事ごとに変更もできます）

/*テーブルのヘッダー（見出しの色）*/
.entry-content th {
	background-color:#カラーコード;/*見出し背景（変更できます）*/
	color:#fff;/*文字色（変更できます）*/
}

お好みで使ってくださいね。

まとめ／Cocoonでもテーブルはオシャレにできる

Cocoonのテンプレート機能はふだん使っていない人も多いのではないでしょうか。工夫次第でこのように簡単にテーブルに記号を追加する使い方もできるので便利ですね！！

セルを結合したり、セルに背景色をつけたい場合はプラグイン『Flexible Table Block』がおすすめです。

オシャレな比較表を作ってブロフライフを楽しんでいきましょう。

別記事にてテーブルにリンクボタンを表示させる方法も紹介しているのでご覧くださいね。

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

Cocoon 2.7.2で本体の機能に実装されました。 インラインボタン機能で文中にボタンを作成する方法 この記事では、テーブルのセル内にリンクボタンを置く方法について解説します。実装されたCocoon機能とは違う方法になるので参考にしてく...

turicco.com

この記事は以上です。