【Cocoon】表(テーブル)の作り方|色付けやスクロール含めた7つの機能も設定できる!

「表(テーブル)の作り方は?」

「表(テーブル)を横にスクロールできるの?」

表(テーブル)で設定できる他の機能が知りたい」

この記事では、そんな方に向けて、Cocoonで表(テーブル)の作り方を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、表(テーブル)の作り方はもちろん、

  • 色付け
  • 横にスクロール
  • その他の機能

も理解できるようになります。

私も初めは、表(テーブル)を作るだけしかできなかったが、半年以上ブログをやっているうちにいろんな機能を使いこなせるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください!

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

目次

Cocoon表(テーブル)の作り方

Cocoonで表(テーブル)の作り方は、下記の通りです。

STEP

記事投稿画面の左上にある+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

「テーブル」をクリックする

「テーブル」がある場所
STEP

カラム数(=列数)と行数を決め、表を作成をクリックする

カラム数と行数を決めている様子と、「表を作成」がある場所
かめコンパス

列数は縦の数、行数は横の数だよ

STEP

ページに表(テーブル)が挿入された

ページに表(テーブル)が挿入された様子

今回は、列数4・行数2で作成しました。

STEP

セルにテキストを入力する

セルとは、ひとつひとつのマス目のことです。

表(テーブル)にテキストを入力している様子

表(テーブル)を作れた!

Cocoon表(テーブル)で設定できる7つの機能

Cocoonの表(テーブル)で設定できる機能は、

7つあります。

それぞれ詳しく解説します。

色をつける

表(テーブル)の

  • テキスト
  • 背景

の2つに色をつけれます。

STEP

表(テーブル)をクリックし、設定スタイルの順にクリックする

「設定」、「スタイル」がある場所
STEP

色の欄にあるテキスト・背景をクリックし、色を選ぶ

テキスト・背景をクリックし、色を選んで切る様子
STEP

テキスト・背景の色を変更できた!

表(テーブル)のテキスト・背景色を変更した様子
かめコンパス

1行目の背景色は変更できなかった

使いたい色がない場合は、「No color selected」をクリックし、さらに細かく色を指定できます。

色を細かく変更できる場所

「ネットなどで見つけた、あの色が使いたい!」と思った場合は、スポイト/カラーピッカーでカラーコードを調べて同じ色を使うことができます。

スポイト/カラーピッカーでカラーコードを調べる方法は、下の記事を参考にしてください。

スタイルの変更

表(テーブル)のスタイルは

  • デフォルト
  • ストライプ

の2種類から選べます。

STEP

表(テーブル)をクリックし、設定スタイルの順にクリックする

スタイルの欄から選ぶ

「設定」、「スタイル」がある場所
STEP

表(テーブル)のスタイルを変更できた!

表(テーブル)のスタイルを変更した様子
かめコンパス

スタイルはあまり変化なかったな~

行・列の追加や削除

表(テーブル)の行・列の追加や削除する方法です。

STEP
  1. 表(テーブル)をクリックし、表を編集をクリックする
  2. 表示された下記6つから選ぶ
  • 行を上に挿入
  • 行を下に挿入
  • 行を削除
  • 列を左に挿入
  • 列を右に挿入
  • 列を削除
「表を編集」がある場所
STEP

表(テーブル)の行・列を追加できた!

表(テーブル)の行・列を追加した様子
かめコンパス

列・行の追加や削除は1つずつ行う必要があるね

行ごとの左・中央・右寄せ

表(テーブル)の行を

  • 左寄せ
  • 中央配置
  • 右寄せ

にできます。

STEP

表(テーブル)をクリックし、カラムの配置を変更をクリックする

「カラムの配置を変更」がある場所
STEP

表(テーブル)の行ごとに配置を変更できた!

表(テーブル)の行ごとに配置を変更した様子
かめコンパス

使うなら左寄せか中央配置かな

表の左・中央・右寄せ

表(テーブル)自体の

  • 左寄せ
  • 中央配置
  • 右寄せ

ができます。

STEP

表(テーブル)をクリックし、配置をクリックする

「配置」がある場所
STEP

表(テーブル)の配置を変更できた!

表(テーブル)の配置を変更した様子
かめコンパス

右寄せは使わなそう

セル幅の固定

表(テーブル)のセル幅を固定する方法です。

STEP
  1. 表(テーブル)をクリックし、設定設定の順にクリックする
  2. 「表のセル幅を固定」をクリックする
「設定」、「表のセル幅を固定」がある場所
STEP

表(テーブル)のセル幅を固定できた!

表(テーブル)のセル幅を固定した様子
かめコンパス

セル幅を固定すると見栄えが良くなるね

ヘッダー・フッターラベルの挿入

表(テーブル)に

  • ヘッダーラベル
  • フッターラベル

を挿入できます。

STEP
  1. 表(テーブル)をクリックし、設定設定の順にクリックする
  2. 「ヘッダーセクション」「フッターセクション」をクリックする
「設定」、「ヘッダーセクション」「フッターセクション」がある場所
STEP

ヘッダー・フッターラベルが挿入された!

ヘッダー・フッターラベルを挿入した様子
かめコンパス

状況に応じて使おう

Cocoon表(テーブル)で設定できない4つの機能

Cocoonの表(テーブル)で設定できない機能は、

4つあります。

それぞれ詳しく解説します。

セルの結合

エクセルやスプレッドシートのように、Cocoonでセルの結合はできません。

また、エクセルやスプレッドシートで結合したセルをコピーして、WordPressの記事にペーストしても結合が解除されます。

かめコンパス

セルの結合は使いたいと思う場面が多いので、できるようになるといいね!

枠線を消す

表(テーブル)の枠線を消すことはできません。

ただ、枠線の色をページと同じ色に変更すれば、枠線が消えたように見せることができます。

枠線の色を変更する場所は、下記の通りです。

STEP
  1. 表(テーブル)をクリックし、設定スタイルの順にクリックする
  2. 枠線色とスタイルピッカーをクリックし、ページと同じ色を選ぶ
「設定」、「スタイル」、「枠線色とスタイルピッカー」がある場所

今回は、白色を選びます。

STEP

枠線が消えたように見えます!

枠線が消えたように見える様子

セルごとに色を変える

セルごとにテキストや背景の色を変えれません。

色を変えた場合、表(テーブル)すべてのテキストや背景に影響を及ぼします。

かめコンパス

色の変更はしない方が無難かな…

列・セルごとの左・中央・右寄せ

列・セルごとに左・中央・右寄せできません。

配置を変更は、行ごと・表(テーブル)自体だと可能です。

かめコンパス

右寄せはあまり使わないね

Cocoon表(テーブル)を横にスクロールする方法

Cocoonで表(テーブル)を横にスクロールする方法は、下記の通りです。

STEP

WordPress管理画面で、Cocoon設定本文の順にクリックする

「Cocoon設定」、「本文」がある場所
STEP

「横幅の広いテーブルは横スクロール」に✔を入れる

「横幅の広いテーブルは横スクロール」がある場所

✔を入れられない場合は、スキン制御されているのが原因です。

スキン制御されている場合の表示のされ方

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

表(テーブル)を横スクロールにできた!

1行目を固定させる方法

Cocoonでは、表(テーブル)の1行目を固定できます。

STEP

Cocoon設定本文にある「テーブルの1行目を固定表示」に✔を入れる

「テーブルの1行目を固定表示」がある場所
STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

表(テーブル)の1行目を固定できた!

Cocoon表(テーブル)を作るときの2つの注意点

Cocoonで表(テーブル)を作るときの注意点は、下記2つあります。

それぞれ詳しく解説します。

表を作る用のプラグインを使わない

表(テーブル)を作る用のプラグインを使うことはオススメしません。

なぜなら、プラグインをインストールすることによって、サイトが重くなるからです。

下記が、ページの読み込み時間に対するユーザーの離脱率がどれくらいかを表したデータです。

ページの読み込み時間離脱率
1~3秒32%
1~5秒90%
1~6秒106%
1~10秒123%
参考:Googleが2018年に発表したモバイルサイトの表示速度および直帰率に関するデータ

このようにページの読み込み時間が遅くなるほど、離脱率が上昇するのが分かります。

かめコンパス

読み込み時間が6秒になると離脱率100%以上に上昇するよ!

他に1つもプラグインをインストールしていなければ話は別になりますが、

多くの人は、プラグインを複数インストールしていると思います。

ですので、なるべく重要でないプラグインは使わないようにしましょう。

自分のブログの表示速度は、PageSpeed Insightsで確認できます。

どうしても表(テーブル)の

  • セルを結合させたり
  • セルごとに色を変えたり

したい場合は、

などのプラグインをインストールしましょう。

表示がくずれないようにする

表(テーブル)に入力したテキストが多ければ、表示が崩れる可能性があります。

表が崩れている場合と崩れていない場合の比較

表(テーブル)の表示が崩れないように、先ほど紹介した表(テーブル)を横スクロールできるように設定しましょう。

まとめ:表(テーブル)でデータ比較に役立てよう

今回は、Cocoonで表(テーブル)の作り方を紹介しました。

当ブログでは、SWELLに関する記事をいくつか書いてます。

下のカテゴリーページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

表(テーブル)の作り方の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次