当サイトはエックスサーバーを利用しています お得な友達紹介特典を見る

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

アイキャッチ/比較表 Cocoon
Cocoon
記事内に広告が含まれています
スポンサーリンク

2024.2.25更新/Cocoon 2.7.1で実装されました。記号の色、大きさや透過率を変えたい等に活用できるよう追記し、当記事は当面残しておきます。

この記事はこのような方におすすめ
  • テーマ「Cocoon」を使っている
  • 機能比較など、比較表を使う記事が多い方
  • テーブルを使った表に簡単にオシャレな◎○△×を入れたい

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

悩める<br>ユーザー
悩める
ユーザー

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

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

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

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

カスタマイズ前

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

カスタマイズ後

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

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

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー38
  • 有料記事、累計190件購入いただいています
はっちゃん
です
プロフィール

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

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

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

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

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

ここに、◎○△×を呼び出すHTMLを登録しておくのがポイント。

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

Cocoonテンプレートの使い方

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

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

スポンサーリンク

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

同じテンプレート機能を使って作成した実際の表です
種類特徴メリットデメリット
①Font
Awesome
webアイコンフォントCocoonに標準搭載
◎○△×の一部に対応してしない
SVG画像ファイルのひとつ編集しやすく汎用性が高い
コード記述が長くなる
画像画像簡単
画像を用意する必要がある
テキスト一般の文字簡単
線が細い(ふちどりでカバー)

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

実装手順は

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

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

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

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

スポンサーリンク

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

  • Step1
    CSSをコピペする

    セルの後ろに◎○△×を配置、スタイル等を設定をします

  • Step2
    Cocoon設定/テンプレートにHTMLを登録

    ◎○△×をショートコード化して簡略化(繰り返し使うのに便利)

  • Step3
    テーブル(表)に記号を表示させる

    投稿編集画面のテーブルの各セルにそれぞれ◎○△×をつけるHTML(ショートコード)をテンプレートから選択して追加する

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

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

比較表列1列2列3
行1とてもよい
いまいち
×
よい
行2よい
とてもよい
もうすこし
行3もうすこし
よい
いまいち
×

CSSをコピペする

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

子テーマのスタイルシートをご使用ください。

管理画面の「外観」から「テーマファイルエディター」をクリック。

すると「スタイルシート (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; /*テーブルの後ろに記号配置*/
}

/*記号配置(テキスト使用)*/
.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を登録します。入力したら左下の保存をクリックしてください。

「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>

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

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

テーブル(表)に記号を表示させる

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

作成したテーブル(表)の記号を入れたいセルをクリック(テキストの前後どちらでも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:#ffffff;
}

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

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

/*固定ヘッダーの下線*/
.wp-block-table thead {
    border-bottom:2px solid #eee; /*2pxの実線・薄いグレー*/
}

テーブルのヘッダー(見出しの色)

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

見出し(この部分)見出しの色(この部分)
内容内容
内容内容
/*テーブルのヘッダー(見出しの色)*/
.entry-content th {
	background-color:#b7c4c3;/*見出し背景(変更できます)*/
	color:#fff;/*文字色(変更できます)*/
}

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

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

イメージ画像

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

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

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

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

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

この記事は以上です。

よろしければシェアお願いします
はっちゃんをフォローする
スポンサーリンク
\記事がお役に立てたら/
Profile
はっちゃん

40代、小中学生の息子の母。
当サイトで使っているワードプレステーマCocoonのデザインカスタマイズ、ブログ運営のことを主に発信しています。

PVアクセスランキング にほんブログ村
はっちゃんをフォローする

Comment コメントはこちらへ

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