【Cocoon】初心者向け『表(テーブル)』の作成方法を丁寧に解説。カスタマイズ情報もあり!

Cocoon 表 テーブル 作成

記事内に商品プロモーションを含む場合があります

キップム
キップム

記事に『表(テーブル)』を挿入したいんだけど…どうしたらいいのかな??

yoko
yoko

今から、表の作り方スタマイズするときに参考にした記事を紹介するから、ぜひ試してみて。

キップム
キップム

わぁ、ありがとう。早速、やってみる♬

スポンサーリンク

この記事はこんな人にオススメ

  • 「表(テーブル)」ってどうやって作るんだろう…と悩んでいる人
  • 「表(テーブル)」をおしゃれにカスタマイズしたい人
  • Cocoonユーザー

・・・・・・・・

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つ。テーブル幅は、それぞれのブログに合わせて指定してね。

この記事を読めば、できること


 下記のような「表(テーブル)」を作成できる!

サーバー会社おすすめプラン初年度合計費用
エックスサーバーX1016,500円
mixhostスタンダードプラン12,936円
ロリコップスタンダードプラン8,250円

ちなみにCocoonデフォルトのデザインはこちら。

Cocoonデフォルトの表デザイン

表(テーブル)の作り方、大まかな流れ

今回の手順を簡単にまとめると、3ステップ!

表を作る
表をカスタマイズする
デザインを確認する

さっそくから順番に解説していきます。

1 表(テーブル)を作る

1. 記事執筆画面の「+」をクリックし「すべて表示」を選択

記事執筆画面

2. 左に全ブロックが表示されるので、テキストブロックから「テーブル」をクリック

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

3. すると、下記画像のような「カラム数」と「行数」を入力する画面が表示されるので、 必要数を入力し「表を作成」をクリック

「カラム数」と「行数」を入力する画面
キップム
キップム

カラム数は列の数、行数は行の数だよ。

4. (すごく小さい&薄くて見にくいけれど…)表が挿入される

表(テーブル)が挿入された画面

5. 表を選択し、右上の設定ボタンをクリック

設定ボタンの位置を説明する画像

6.右側に表ブロックのメニューバーが表示されるので、いろいろ試してあなたのブログに合うスタイルを見つけてもらえたら良いかな、と。ちなみに私は、スタイルは「デフォルト」、表の設定は「ヘッダーセクション」をいつも選んでいます

右に表のメニューバーが表示された画像
キップム
キップム

「ヘッダーセクション」を選択すると、表の一番上に見出しが作れるよ。

7. セルをクリックしテキストを入力すると、表が完成

完成した表(テーブル)

知っておくと便利な機能

ここからは、表を編集するときに役に立つ便利機能を3つ、簡単に紹介していきます。

表の便利機能

表を画面のどこに表示するかを指定できる

表の便利機能01

テキストの配置を変更できる

表の便利機能02

行・列の追加、削除が簡単にできる

表の便利機能03

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; /* 左線 */
}

コードの追加方法

もうご存知の方も多いと思いますが……コードの追加方法を解説していきます。

スタイルシートに入力する前の注意点!
  • 編集前にスタイルシートのバックアップを必ず取る

  • 編集するテーマが「CocoonChild」になっていることを確認する

  • 「@charset”UTF-8”;」から始まる部分(最初から入力されている内容)は消さずに下に追記していく

  • 当ページによるデザイン崩れなど、動作不良があっても責任を取ることはできないのでご了承を

1.「外観」から「テーマエディター」を選択

Cocoonのダッシュボード画面

2. スタイルシートにコードをコピペする

Cocoonスタイルシートの画面

3. コピペ後、「ファイルを更新」をクリックしたらカスタマイズは終了

スタイルシートにコードを貼り付けた画像

3 デザインを確認する

1. 記事執筆画面の右上にある「プレビュー」をクリック

2. このように表示されていれば完成!

サーバー会社おすすめプラン初年度合計費用
エックスサーバーX1016,500円
mixhostスタンダードプラン12,936円
ロリコップスタンダードプラン8,250円

カスタマイズにはこの本がオススメ!

著:千貫 りこ, 読み手:ロクナナワークショップ
¥2,178 (2023/11/16 18:46時点 | Amazon調べ)
キップム
キップム

この本を一通りやったら、意味不明だったコードの内容が理解できるようになったよ。

yoko
yoko

私も同じ!サイトで紹介されているコードをただコピペするだけではなく、自分のブログに合うようカスタマイズができるようになって嬉しかったなぁ。

キップム
キップム

その気持ち、わかるー。応用ができるとカスタマイズがぐっと楽しくなるよね♪

・・・・・・・・

こちらもオススメ! 「Cocoonブログ、 おしゃれにするにはどうしたらいいのかな…?」と悩んでいる方に向けて。「おしゃれで読みやすいブログデザインの作り方」についてちょっと書いてみたので合わせてどうぞ。

おわりに

可愛い表のカスタマイズ記事を書いてくれたBear faceさんに、特別感謝の気持ちをお伝えして終わりにしたいと思います。

本当にありがとうございました!

文章: yoko( @_yoko51_

Comment