こんにちは、ikuzo(いくぞう)です。
ブログを始めて1年になりました（パチパチパチ…）
最初のころは、Cocoonで何をするにも分からないことだらけでしたが、少しずつ扱えるようになってきましたよ（遅い）。
「私が悩んだことを、これからCocoonを始める方の少しでもお役に立てれば」
そんな気持ちから始まったikuzoの『Cocoonかんたんカスタマイズシリーズ』
そんなシリーズ、あったのか？
今回は、表（テーブル）の作り方についてです！
この記事を読むと、こんなことができるようになります
WordPressで表が作れます
Cocoonで「ScrollHint」を表示できます
表の幅（余白）を調整できます
WordPressで表を作るかんたんな方法
WordPressで表を作る方法はいくつかありますが、今回は比較的かんたんな「プラグインを使って作る方法」を紹介したいと思います。
初心者の方には、プラグイン（Advanced Editor Tools）のインストール手順も説明します。
すでにインストール済みで「ツールバーに『テーブル』が表示されてるよ」って方は、この章は飛ばして下さい。
Advanced Editor Toolsのインストール手順
まず、ダッシュボードから「プラグイン」→「新規追加」をクリックします。
右上にある検索窓に「Advanced Editor Tools」と入力して下さい。
Advanced Editor Toolsの「今すぐインストール」→「有効化」を押します。
インストールしたら忘れずに「有効化」を押してね。
旧エディターを使用する
Advanced Editor Toolsの設定をする前に、エディターを「旧エディター」に切り替えておきましょう。
私がWordPressを始めたころは、すでに新しいエディターができていましたが、非常に使いにくかったので今でも旧エディターを使用しています。
旧エディターを使うにはプラグインの「Classic Editor」も利用できますが、
Cocoonは新旧エディターの切り替えが簡単にできるんです。
さすが、Cocoonだね！
ダッシュボードの「Cocoon設定」をクリックして
「エディター」タブを選択
「Gutenbergエディターを有効にする」にするの チェックを外して、「変更をまとめて保存」を押します。
これだけで、旧エディターに変えることができます。
Advanced Editor Toolsの設定
次に「Advanced Editor Tools」の設定です。
①「旧エディター」を選択
②「テーブル」を上のツールバーへドラッグ&ドロップ
③最後に「変更を保存」を押します。
ほかにも使いたいボタンがあれば、ツールバーへドラッグ&ドロップしておきましょう。
これで表を作る下準備が整いました！
ひとまず、おつかれさまでした！
表の作り方
では、実際に表を作ってみましょう。
投稿画面で、ビジュアルエディターの「テーブル」をクリックします。
たとえば「縦4列×横3行」の表を作るなら、このように選択します。
あっというまに、縦4列×横3行の表ができました。
セルの幅と高さを変更する
セルの幅と高さを調整するには、調整したい線の上にカーソルを当ててドラッグして下さい。
セルの高さを均一に変更したい場合は、表全体（もしくはどこか1列だけでもOK）をドラッグして
右クリック→「セルのプロパティ」で高さを入力します。
ちなみにこの100は「100px（ピクセル）」の意味です。
幅については「px」ではなく「%」で指定する必要があります。
表を作ったあとで、もう一度「テーブル」をクリックして「表のプロパティ」を選択しましょう。
表の幅を、全体幅（コンテンツ幅）の何%にするかを指定します。
同じように各セルの幅も「セルのプロパティ」で、全てのセルの合計が100%になるように「%」で指定してみて下さい。たとえば、こんな感じです。
列や行を追加する
列や行を増やすには、右クリックから「挿入」を選択します。
不要な列や行を削除することもできますよ。
セルの設定
「セルのプロパティ」では、線の種類や色、背景の色などを変更することができます。
再び、表全体をドラッグして右クリック、「セル」→「セルのプロパティ」です。
さきほど説明したやり方で、セルの高さと幅は変えてあります。
セルのプロパティ（一般）
「横配置」「縦配置」とは文字の位置のことです。
横配置を「中央」にすると
セルの種類で「ヘッダーセル」を選択すると、セルが見出し（太文字）になります。
一番上の行を「ヘッダーセル」にしてみました。
セルのプロパティ（高度な設定）
高度な設定は「線の種類」「線の色」「背景色」の指定ができます。
たとえば、ヘッダーセルの部分だけ背景色を変えるには、
一番上の行すべてをドラッグして6桁のコードを入力するか、もしくは右のボタンを押してお好みの色を選択して下さい。
6桁のコードを入力するときは、先頭に「#」をつけるのを忘れないでね。
6桁のコードは、こちらのカラーコード表が役に立つと思います。
線を「実線」にして、背景色を変えました。
文字の色や大きさは、ツールバーで変更できます。
表のかんたんなカスタマイズ
おまたせしました。それではいよいよカスタマイズの時間です。
といっても、今回も初心者の方でもできる、ごくごく簡単なカスタマイズなので安心して下さいね。
セル内の文字を一列にする
最初はカスタマイズではなく、Cocoonの設定でできる方法なのですが、
たとえば、ひとつのセルの中に文字をたくさん入力すると、どんどん下へ回りこんでしまいます。
これを阻止して、文字を一列にするには「Cocoon設定」の「本文」タブをクリックします。
下の方にあるテーブル設定で「横幅の広いテーブルは横スクロール」に チェックを入れて「変更をまとめて保存」を押します。
編集画面では同じように回りこんでますが、プレビューで確認するとちゃんと一列になってます。
コンテンツ幅よりも長くなるとScrollHintで「横にスクロールできますよー」と教えてくれるようになりますよ。
Cocoonは、いたれりつくせりだね！
セル内の余白を調整する
ここからが本当のカスタマイズです(^_^)
（といっても、今回はこれだけです。）
先ほど、文字を一列にした表ですが、文字と線の間隔が狭かったですよね。
ここの幅（余白）を広げる方法を説明します。
スペースを入力して広げてもよいのですが、もっとスマートにできる方法があるんです。
「投稿の編集」のずーっと下の方に「カスタムCSS」という欄があるので
ここに次のCSSをコピペして下さい。
th, td{
padding: 10px 20px!important;
}
プレビューで確認すると余白ができているはずです。
10pxは「上下の余白」で20pxは「左右の余白」です。
お好みの数字に変更して余白部分を調整してみて下さい。
この「カスタムCSS」は、そのページだけのCSSなので、他のページには反映されません。
ブログ全体を一括して変更したい場合は、このCSSを「スタイルシート」に貼り付けて下さい。
やり方はこちらの記事が参考になると思います。
最後に
というわけで今回はWordPressの表（テーブル）を作り方や、余白の大きさを変更する方法でした。
少しでもお役に立てていたら幸いです。最後までお読みいただき、ありがとうございました。
では、また。
ikuzoの『Cocoonかんたんカスタマイズシリーズ』
コメント
Advanced Editor Toolsを使用する場合、旧エディターのみ対応なのでしょうか？
もしそうだった場合、新エディターを常用的に使いたい場合、その都度切り替えが必要になるのでしょうか？
教えて頂けると助かります。
ブログ初心者さん、こんにちは。
ブロックエディターで「クラシック版の段落」を使うと旧エディターと同じように表が作れます。
ぜひ試してみて下さい(^_^)