記事に『表（テーブル）』を挿入したいんだけど…どうしたらいいのかな？？
今から、表の作り方とカスタマイズするときに参考にした記事を紹介するから、ぜひ試してみて。
わぁ、ありがとう。早速、やってみる♬
この記事はこんな人にオススメ
・・・・・・・・
2022年12月、WordPressバージョン：6.1.1 / Cocoonバージョン：2.5.4.2にアップデートしたら表（テーブル）のCSSが突然反映されなくなりました…
Cocoonバージョン：2.5.5〜だと、CSSが反映されるようです。
・・・・・・・・
WordPressバージョンアップでよく不具合が起こるので、現在は「Flexible Table Block」というプラグインを使って、表を作成しています。
高機能でおしゃれなテーブルを簡単に作成することができるので、めちゃくちゃオススメ！
ちなみに「Flexible Table Block」を使えば、当記事で紹介している表も追加CSSなしで簡単に作成できます。
使い方については、こちらの記事がとても詳しく説明してくれているのでぜひ参考にしてください↓
注意点が1つ。テーブル幅は、それぞれのブログに合わせて指定してね。
この記事を読めば、できること
下記のような「表（テーブル）」を作成できる！
| サーバー会社 | おすすめプラン | 初年度合計費用 |
|---|---|---|
| エックスサーバー | X10 | 16,500円 |
| mixhost | スタンダードプラン | 12,936円 |
| ロリコップ | スタンダードプラン | 8,250円 |
ちなみにCocoonデフォルトのデザインはこちら。
表（テーブル）の作り方、大まかな流れ
今回の手順を簡単にまとめると、3ステップ！
❶ 表を作る
❷ 表をカスタマイズする
❸ デザインを確認する
さっそく❶から順番に解説していきます。
1 表（テーブル）を作る
1. 記事執筆画面の「＋」をクリックし「すべて表示」を選択
2. 左に全ブロックが表示されるので、テキストブロックから「テーブル」をクリック
3. すると、下記画像のような「カラム数」と「行数」を入力する画面が表示されるので、 必要数を入力し「表を作成」をクリック
カラム数は列の数、行数は行の数だよ。
4. （すごく小さい&薄くて見にくいけれど…）表が挿入される
5. 表を選択し、右上の設定ボタンをクリック
6.右側に表ブロックのメニューバーが表示されるので、いろいろ試してあなたのブログに合うスタイルを見つけてもらえたら良いかな、と。ちなみに私は、スタイルは「デフォルト」、表の設定は「ヘッダーセクション」をいつも選んでいます
「ヘッダーセクション」を選択すると、表の一番上に見出しが作れるよ。
7. セルをクリックしテキストを入力すると、表が完成
知っておくと便利な機能
ここからは、表を編集するときに役に立つ便利機能を3つ、簡単に紹介していきます。
❶ 表を画面のどこに表示するかを指定できる
❷ テキストの配置を変更できる
❸ 行・列の追加、削除が簡単にできる
2 表（テーブル）をカスタマイズする
ネットで検索をしていたら、Bear faceさんの「【SANGOを自分でカスタマイズ】メリハリのある表にカスタマイズする」という記事を発見。
SANGO用のカスタマイズだったけれど、試しに書いてあるコードを完コピしてみたら「これは可愛いぞ〜〜！！」となったので、ほぼそのまま使わせていただきました。Bear faceさんには感謝しかありません。
ただ、書いてあるまま全部を真似してみたら、自分のブログには似合わない部分も…….
しっくりくるよう余白やカラーを調整したコードがこちら。
/******************
表のデザインを変更
*******************/
/*--- 表全体(table) ---*/
.entry-content table {
border-bottom: 1px solid #e6e6e6; /* 表の一番下の線 */
border-top: none;
border-left: none;
border-right: none;
}
/*--- ヘッダーセル(th) ---*/
.entry-content th {
border-radius: 10px 10px 0 0; /* 丸み（※ヘッダーセルが縦の場合は削除）*/
padding: 0.8em .6em; /* 余白（上下 左右） */
background-color: #c2e7eb; /* 背景色 */
color: #fff; /* 文字の色 */
letter-spacing: 0.1em; /* 文字の間隔 */
text-align: center; /* 中央揃え */
border: none; /* 線削除 */
}
.wp-block-table thead {
border-bottom: none;
}
/*--- 行（横方向）(tr) ---*/
.entry-content tr {
text-align:center; /* 中央揃え */
}
.entry-content tr:not(:last-child) { /* 最後の行以外に適用 */
border-bottom: 1px solid #e6e6e6; /* 下線 */
}
/*--- ヘッダーセル以外のセル(td) ---*/
.entry-content td {
padding: 0.8em 0.8em; /* 余白（上下 左右） */
border:none; /* 線を削除 */
}
.entry-content td:last-child { /* 最後のセルのみ適用 */
border-right: 1px solid #e6e6e6; /* 右線 */
}
.entry-content td:not(last-child) { /* 最後のセル以外に適用 */
border-left: 1px solid #e6e6e6; /* 左線 */
}コードの追加方法
もうご存知の方も多いと思いますが……コードの追加方法を解説していきます。
1.「外観」から「テーマエディター」を選択
2. スタイルシートにコードをコピペする
3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了
3 デザインを確認する
1. 記事執筆画面の右上にある「プレビュー」をクリック
2. このように表示されていれば完成！
| サーバー会社 | おすすめプラン | 初年度合計費用 |
|---|---|---|
| エックスサーバー | X10 | 16,500円 |
| mixhost | スタンダードプラン | 12,936円 |
| ロリコップ | スタンダードプラン | 8,250円 |
カスタマイズにはこの本がオススメ！
ポチップ
この本を一通りやったら、意味不明だったコードの内容が理解できるようになったよ。
私も同じ！サイトで紹介されているコードをただコピペするだけではなく、自分のブログに合うようカスタマイズができるようになって嬉しかったなぁ。
その気持ち、わかるー。応用ができるとカスタマイズがぐっと楽しくなるよね♪
・・・・・・・・
こちらもオススメ！ 「Cocoonブログ、 おしゃれにするにはどうしたらいいのかな…？」と悩んでいる方に向けて。「おしゃれで読みやすいブログデザインの作り方」についてちょっと書いてみたので合わせてどうぞ。
おわりに
可愛い表のカスタマイズ記事を書いてくれたBear faceさんに、特別感謝の気持ちをお伝えして終わりにしたいと思います。
本当にありがとうございました！
文章： yoko（ @_yoko51_）
Comment