タイトルの通り、Cocoonでの表の横幅の変え方を説明します。
他のサイトを見ると旧エディタ(クラシックエディタ)を使う方法や、他のテーマでカスタマイズする方法しか紹介されてなかったのですが、、、
普通にできました。
なんならWordPress6.62に対応したCocoonのアップデートにより、表のカスタマイズ性は良くなってます。
なので、今回はその方法をご紹介します。
▼こんな表が作れます。
| 名前 | 新井 真紀 |
| 収入 | 世帯500万円(自分200万円) |
| 生活パターン | 朝7時に起きて夫と子供の弁当作り→フルタイム勤務→帰って来て夕食作り |
| 興味関心 | 子供が一番大事。塾や学校の成績はチェックし、色々考えている。子どもと成績について話したりはするが、そこまで怒ったりはしない。子ども達も比較的正直に勉強の話はしてくれる。 |
| 価値観 | 子供の満足≧合格＞お金 基本的には子供の意見を聞くが、塾に対しては合格までのサポートを求める。我が家はお金があるわけではないので全て要求を通せるわけではないが、納得できる部分はなるべくお金も出してあげたい。 |
表をつくる
ではまず表を作ります。
ブロックタイプの「表（テーブル）」を選択し、列と行の数を指定して「表を作成」で作れます。
※列と行は後から追加や削除できます。
下記のような表が出来たと思います。
表のどこかを選択した状態で右側のメニューを見ると、表の設定を色々変えられることが分かります。
⚙マークの方で、「表のセル幅を固定」のチェックを外すと表の幅が中身に応じて変わるようになります。
表はこんな感じになったと思います。
※表が見ずらいので枠線を入れました。
値を入力してみると、それに合わせて幅が変わっていきます。
| 名前 | 新井 真紀 |
| 収入 | 世帯500万円(自分200万円) |
| 生活パターン | 朝7時に起きて夫と子供の弁当作り→フルタイム勤務→帰って来て夕食作り |
列単位で幅を指定する方法
ここまでは特に問題なくイイ感じの幅設定になってくれるのですが、
実はある問題があります。
それは、改行する必要がある長いテキストが入った場合です。
Cocoonではそもそものコンテンツ幅が800pxと決まっています。
なので長すぎるテキストが入った場合はこんな感じで自動で折り返してくれます。
| 名前 | 新井 真紀 |
| 収入 | 世帯500万円(自分200万円) |
| 生活パターン | 朝7時に起きて夫と子供の弁当作り→フルタイム勤務→帰って来て夕食作り |
| 興味関心 | 子供が一番大事。塾や学校の成績はチェックし、色々考えている。子どもと成績について話したりはするが、そこまで怒ったりはしない。子ども達も比較的正直に勉強の話はしてくれる。 |
ですが、この時左側の列幅が小さくなっていることにお気づきでしょうか。
「生活パターン」のとこが「生活パタ / ーン」で折り返されてますね
左側は項目名なので、折り返してほしくはないです。
この場合は「左側の一番長いコンテンツ」の最後に全角スペース（スペースキー）を入れてとよいです。
左側の「生活パターン」の最後に全角スペースを3つ入れてあげると、こんな感じになりました。
| 名前 | 新井 真紀 |
| 収入 | 世帯500万円(自分200万円) |
| 生活パターン | 朝7時に起きて夫と子供の弁当作り→フルタイム勤務→帰って来て夕食作り |
| 興味関心 | 子供が一番大事。塾や学校の成績はチェックし、色々考えている。子どもと成績について話したりはするが、そこまで怒ったりはしない。子ども達も比較的正直に勉強の話はしてくれる。 |
内側のシステム的にはあまりいい方法じゃないと思いますが、
ともかく見た目は思い通りの表にすることができました。
表のカスタマイズ
その他、右のメニューでは以下のことを調整できます。
- 色（テキスト、背景）
- 見出し行（ヘッダー、フッター）の追加
- 文字の大きさ
- 外側の余白設定（表全体を小さく表示したいとき）
- 枠線（ボーダー）のカスタマイズ
外側の余白設定
外側の余白設定だけ少し難しいので説明します。
【手順は以下の通り】
- 表のブロック設定から「スタイル」→「サイズ」に移動
- 「︙」を押してパディングを選択
- パディングの調整メニューが出てきますので、
右のマークを押して単位を「%」に変更
あとは幅（下の調節バー）のところに自由に値を指定すると余白が増えて表が小さくなります。
%で指定することで、コンテンツ全体の幅が変わっても余白の比率は一定にしてくれます。
意味合い的には「パディング」ではなく「マージン」だと思いますが、マージンを%で指定しても上手く反映されなかったのでパディングにしてます。
終わりに
いかがでしょうか。
恐らく、以前まではCocoonで表のカスタマイズはほとんどできない状態だったのかなと思い、「幅の設定はできない」という記事も多く見受けました。
しかし、Cocoonは結構頻繁にアップデートしており、無料とは思えないほど機能も充実しています。
もし今回の説明とあなたのWordPressの挙動が違う場合、「WordPress本体のバージョンアップデート」→「Cocoonのアップデート」を試してみてください。
Cocoonは使い方次第でかなり楽しめるいいテーマなので、色々やってみると楽しいですね。
コメント