【Cocoon】表(テーブル)の作り方と幅を変えるカスタマイズ

Cocoon 表の作り方 Cocoon

こんにちは、ikuzo(いくぞう)です。

ブログを始めて1年になりました(パチパチパチ…)

最初のころは、Cocoonで何をするにも分からないことだらけでしたが、少しずつ扱えるようになってきましたよ(遅い)。

「私が悩んだことを、これからCocoonを始める方の少しでもお役に立てれば」

そんな気持ちから始まったikuzoの『Cocoonかんたんカスタマイズシリーズ』

プー太郎
プー太郎

そんなシリーズ、あったのか?

今回は、表(テーブル)の作り方についてです!

 

 この記事を読むと、こんなことができるようになります

WordPressで表が作れます

Cocoonで「ScrollHint」を表示できます

ScrollHint

表の幅(余白)を調整できます

セルの余白の調整

スポンサーリンク

WordPressで表を作るかんたんな方法

WordPressで表を作る方法はいくつかありますが、今回は比較的かんたんな「プラグインを使って作る方法」を紹介したいと思います。

初心者の方には、プラグイン(Advanced Editor Tools)のインストール手順も説明します。

すでにインストール済みで「ツールバーに『テーブル』が表示されてるよ」って方は、この章は飛ばして下さい。

ツールバーの「テーブル」ボタン

Advanced Editor Toolsのインストール手順

まず、ダッシュボードから「プラグイン」→「新規追加」をクリックします。

Cocoonのプラグインを新規追加

 

右上にある検索窓に「Advanced Editor Tools」と入力して下さい。

プラグインの「Advanced Editor Tools」を検索

 

「Advanced Editor Tools」は、以前は「TinyMCE Advanced」という名前でした。

 

Advanced Editor Toolsの「今すぐインストール」→「有効化」を押します。

Advanced Editor Toolsをインストールして有効化

プー太郎
プー太郎

インストールしたら忘れずに「有効化」を押してね。

旧エディターを使用する

Advanced Editor Toolsの設定をする前に、エディターを「旧エディター」に切り替えておきましょう。

私がWordPressを始めたころは、すでに新しいエディターができていましたが、非常に使いにくかったので今でも旧エディターを使用しています。

旧エディターを使うにはプラグインの「Classic Editor」も利用できますが、

Cocoonは新旧エディターの切り替えが簡単にできるんです。

プー太郎
プー太郎

さすが、Cocoonだね!

新エディターをお使いの方は「クラシック版の段落」を使うと本文と同じやり方で表が作れます。

ダッシュボードの「Cocoon設定」をクリックして

Cocoon設定

 

「エディター」タブを選択

「エディター」タブを選択

 

「Gutenbergエディターを有効にする」にするの チェックを外して、「変更をまとめて保存」を押します。

「Gutenbergエディターを有効にする」のチェックを外す

これだけで、旧エディターに変えることができます。

Advanced Editor Toolsの設定

次に「Advanced Editor Tools」の設定です。

「Advanced Editor Tools」をクリック

 

旧エディターを選択して、テーブルをツールバーへドラッグ&ドロップ

①「旧エディター」を選択

②「テーブル」を上のツールバーへドラッグ&ドロップ

③最後に「変更を保存」を押します。

ほかにも使いたいボタンがあれば、ツールバーへドラッグ&ドロップしておきましょう。

これで表を作る下準備が整いました!

プー太郎
プー太郎

ひとまず、おつかれさまでした!

スポンサーリンク

表の作り方

では、実際に表を作ってみましょう。

投稿画面で、ビジュアルエディターの「テーブル」をクリックします。

ツールバーの「テーブル」を選択

 

たとえば「縦4列×横3行」の表を作るなら、このように選択します。

「縦4列×横3行」

 

あっというまに、縦4列×横3行の表ができました。

縦4列×横3行の表が完成した

セルの幅と高さを変更する

セルの幅と高さを調整するには、調整したい線の上にカーソルを当ててドラッグして下さい。

調整したい線の上にカーソルを当ててドラッグ

 

セルの高さを均一に変更したい場合は、表全体(もしくはどこか1列だけでもOK)をドラッグして

表全体をドラッグ

 

右クリック→「セルのプロパティ」で高さを入力します。

右クリック→「セルのプロパティ」で変更

セルのプロパティを入力

行の高さが100pxになった

プー太郎
プー太郎

ちなみにこの100は「100px(ピクセル)」の意味です。

幅については「px」ではなく「%」で指定する必要があります。

表を作ったあとで、もう一度「テーブル」をクリックして「表のプロパティ」を選択しましょう。

「表のプロパティ」を選択

 

表の幅を、全体幅(コンテンツ幅)の何%にするかを指定します。

表の幅を%で指定する

幅を50%に指定した表ができた

 

同じように各セルの幅も「セルのプロパティ」で、全てのセルの合計が100%になるように「%」で指定してみて下さい。たとえば、こんな感じです。

セルの幅の合計が100%になるようにする

列や行を追加する

列や行を増やすには、右クリックから「挿入」を選択します。

不要な列や行を削除することもできますよ。

表の列や行を増やす

セルの設定

「セルのプロパティ」では、線の種類や色、背景の色などを変更することができます。

再び、表全体をドラッグして右クリック、「セル」→「セルのプロパティ」です。

表全体をドラッグして「セルのプロパティ」を選択

プー太郎
プー太郎

さきほど説明したやり方で、セルの高さと幅は変えてあります。

セルのプロパティ(一般)

「横配置」「縦配置」とは文字の位置のことです。

セルのプロパティ(一般)で文字の横位置を「中央」に指定した

 

横配置を「中央」にすると

表の文字の位置が中央になった

 

セルの種類で「ヘッダーセル」を選択すると、セルが見出し(太文字)になります。

セルの種類で「ヘッダーセル」を選択

 

一番上の行を「ヘッダーセル」にしてみました。

一番上の行をヘッダーセルにした

セルのプロパティ(高度な設定)

高度な設定は「線の種類」「線の色」「背景色」の指定ができます。

セルのプロパティ(高度な設定)

 

たとえば、ヘッダーセルの部分だけ背景色を変えるには、

一番上の行すべてをドラッグして6桁のコードを入力するか、もしくは右のボタンを押してお好みの色を選択して下さい。

6桁のコードを入力するか、右のボタンで色を選択する

プー太郎
プー太郎

6桁のコードを入力するときは、先頭に「#」をつけるのを忘れないでね。

6桁のコードは、こちらのカラーコード表が役に立つと思います。

 

線を「実線」にして、背景色を変えました。

表の線を「実線」にして、背景色を変更

 

文字の色や大きさは、ツールバーで変更できます。

表の文字の色や大きさを変更する

スポンサーリンク

表のかんたんなカスタマイズ

おまたせしました。それではいよいよカスタマイズの時間です。

といっても、今回も初心者の方でもできる、ごくごく簡単なカスタマイズなので安心して下さいね。

セル内の文字を一列にする

最初はカスタマイズではなく、Cocoonの設定でできる方法なのですが、

たとえば、ひとつのセルの中に文字をたくさん入力すると、どんどん下へ回りこんでしまいます。

セルの中に文字をたくさん入力すると、どんどん下へ回りこむ

 

これを阻止して、文字を一列にするには「Cocoon設定」の「本文」タブをクリックします。

「Cocoon設定」の「本文」タブをクリック

 

下の方にあるテーブル設定で「横幅の広いテーブルは横スクロール」に チェックを入れて「変更をまとめて保存」を押します。

「横幅の広いテーブルは横スクロール」にチェックを入れて「変更をまとめて保存」を押す

 

編集画面では同じように回りこんでますが、プレビューで確認するとちゃんと一列になってます。

プレビューで確認するとセル内の文字が一列になっている

 

コンテンツ幅よりも長くなるとScrollHintで「横にスクロールできますよー」と教えてくれるようになりますよ。

ScrollHint

プー太郎
プー太郎

Cocoonは、いたれりつくせりだね!

セル内の余白を調整する

ここからが本当のカスタマイズです(^_^)

(といっても、今回はこれだけです。)

先ほど、文字を一列にした表ですが、文字と線の間隔が狭かったですよね。

セル内の余白が狭い

 

ここの幅(余白)を広げる方法を説明します。

スペースを入力して広げてもよいのですが、もっとスマートにできる方法があるんです。

「投稿の編集」のずーっと下の方に「カスタムCSS」という欄があるので

カスタムCSS

 

ここに次のCSSをコピペして下さい。

th, td{ 
  padding: 10px 20px!important;
}

 

コピーしたCSSを「カスタムCSS」にペースト

 

プレビューで確認すると余白ができているはずです。

セルの余白を大きくした表

 

10pxは「上下の余白」で20pxは「左右の余白」です。

セル内の上下の余白と左右の余白

 

お好みの数字に変更して余白部分を調整してみて下さい。

この「カスタムCSS」は、そのページだけのCSSなので、他のページには反映されません。

ブログ全体を一括して変更したい場合は、このCSSを「スタイルシート」に貼り付けて下さい。

やり方はこちらの記事が参考になると思います。

【Cocoon】ブログカードを自分流にカスタマイズしよう

最後に

というわけで今回はWordPressの表(テーブル)を作り方や、余白の大きさを変更する方法でした。

少しでもお役に立てていたら幸いです。最後までお読みいただき、ありがとうございました。

プー太郎
プー太郎

では、また。

ikuzoの『Cocoonかんたんカスタマイズシリーズ

【Cocoon】新しいトップページの設定方法とカスタマイズ
【Cocoon】ヘッダーモバイルボタン(スマホメニュー)をカスタマイズ
【Cocoon】初心者向け 目次の設定方法とかんたんなカスタマイズ
Cocoon
スポンサーリンク
ikuzoblog

コメント

  1. ブログ初心者 より:

    Advanced Editor Toolsを使用する場合、旧エディターのみ対応なのでしょうか?
    もしそうだった場合、新エディターを常用的に使いたい場合、その都度切り替えが必要になるのでしょうか?
    教えて頂けると助かります。

    • ikuzo|いくぞう より:

      ブログ初心者さん、こんにちは。
      ブロックエディターで「クラシック版の段落」を使うと旧エディターと同じように表が作れます。
      ぜひ試してみて下さい(^_^)