Cocoonテーマのブロックエディタで表を作成する方法

こんにちはさくらです。
ブログ記事を書く時に

「これって表した方が整理されて読者さんもより理解してくれそう」

と、そんな風に思ったことはありませんか?
私は何度かあるんですね。

でも最初表ってどうやって作ればいいんだろうって思ってたんです。
調べてみようかと思ったけど、めんどくさそうだからとりあえず画像で表を作ってしまおうって思ったんです。

画像でも表は作れますが今回はWordpressでの表の作り方を説明していきたいと思います。

WordPress 5.4.1 (Cocoon テーマ)を使っています。
ブロックエディタで編集しています。

目次

Cocoonのブロックエディタで表を作成する

ブロックのフォーマットから表をクリックします。

列数・行数に作りたい表の列数と行数を記入して表を作成をクリックします。

こんな感じで四角が先ほど入力した数字の分並んでいます。

投稿画面の右の方にこのように表示されています。

スタイルはデフォルトにしました。


表の設定はヘッダーセクションだけ有効にしました。
(有効にすることで表のヘッダーラベルのところがあらわれます。)

色指定をするとヘッダーラベルのところをのぞいた表の
偶数の行のところの色が設定した色に変わります。

ヘッダーラベルヘッダーラベルヘッダーラベル
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト
テキストテキストテキスト

こんな感じの表ができました。

Cocoonテーマでスマホで見る時に横にスクロールさせる方法

表を作ったけれどスマホで見ようと思うと幅が狭いので表がガタガタに💦

他のブログで表を作ってみた時のものですが、スマホだと幅が狭いので価格のところを見てもいくらなのかよくわからなくなってしまったんです。
そこで横にスクロールさせるようにカズタマイズしてみました。

Cocoonだとビックリするくらい簡単にスクロールするようにさせることができるんです。

こんな感じです。
これなら価格のところもわかりやすいですね。
スクロールさせればもっと右のかくれている部分も見ることができます。

Cocoon設定を開きます。

本文をクリックします。

横幅の広いテーブルは横スクロールにチェックを入れる

そして変更をまとめて保存する。
それだけなんです。
他のテーマを使っている場合にはできないのですが、Cocoonではこんなに簡単にカスタマイズすることができるんですね。

Cocoonでは簡単にわかりやすい表を作れる

このようにCocoonでは簡単にわかりやすい表を作ることができます。
ブロックエディタではプラグインも入れる必要ものないんですね。
表を使うことで読者さんにも見やすくわかりやすくブログを作っていくことも可能になります。
表にした方がわかりやすいと感じる時、これならサクッと表を記事に取り入れると思うのでぜひ試してみてください。

よかったらシェアしてね!

この記事を書いた人

はじめまして。このブログを運営しているさくらと申します。

私は50代の主婦で子供が4人います。
そのうち二人が大学生。
大学ってけっこうお金がかかるんですよね
教育費などお金のかかることが悩みです。

そんな悩みを軽くしたくて、画像加工でクラウドソーシング経由でのお仕事や、ブログメルマガアフィリエイトに取り組んでいます。
このブログではその中でもブログメルマガアフィリエイトについて書いていきたいと思っています。

自分と同じように子供の教育費に悩んでいる方、このままでは将来的に不安がある方。
そんな人に読んでいただいて、それで少しでも力になれたらうれしいです。

⇒ 詳しいプロフィール

コメント

コメントする

目次
閉じる