当サイトは広告が含まれています

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

Cocoon 表の作り方

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

WordPressでブログを始めてもうすぐ5年になります。

最初のころは、WordPressで何をするにも分からないことだらけでしたが、今は大体のことができるようになりました。

私が悩んだことを、これからブログを始める方やブログを始めたばかり方の少しでもお役に立てれば

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

プー太郎
プー太郎

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

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

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

WordPressで表が作れます

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

Cocoonで「ScrollHint」を表示できる

表の余白部分を調整できます

セルの余白は幅や高さが調整できる

この記事は旧エディターでの表の作り方を紹介しています。新エディターをお使いの方は「クラシック版の段落」を使うと本文と同じやり方で表が作れます。
スポンサーリンク

WordPressで表(テーブル)を作る方法

WordPressで表を作る方法はいくつかありますが、

今回はプラグイン「Advanced Editor Tools」を使って表を作る方法を紹介します。

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

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

ツールバーに「テーブル」がない!という方は「Advanced Editor Tools」をインストールしましょう。

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

Advanced Editor Toolsのインストール方法

では、プラグイン「Advanced Editor Tools」のインストール方法です。

WordPressの「プラグイン」→「新規プラグインを追加」をクリックします。

「プラグイン」→「新規プラグインを追加」をクリック

右上にある検索窓に「Advanced Editor Tools」と入力します。

すると「Advanced Editor Tools」が出てくるので「今すぐインストール」→「有効化」を押します。

検索窓に「Advanced Editor Tools」と入力

どうでもいい話ですが「Advanced Editor Tools」は、以前は「TinyMCE Advanced」という名前でした。
プー太郎
プー太郎

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

プラグインを有効化したら、自動更新も有効化しておきましょう。

下のように「自動更新を有効化」と表示されていたら、それは自動更新が無効の状態です。

一度クリックすると「自動更新を無効化」と表示されて自動更新が有効の状態になります。

これでプラグインが常に最新の状態になります。

プラグインの自動更新を有効化しよう

Advanced Editor Toolsの設定

「Advanced Editor Tools」を入れる前のツールバーはこんな感じですが、

「Advanced Editor Tools」を入れる前のツールバー

「Advanced Editor Tools」を入れただけで表(テーブル)のボタンが増えています。

すなわち、表が作れる状態になりました。

「Advanced Editor Tools」を入れたら、表(テーブル)のボタンが増えた

ほかにも「Advanced Editor Tools」は、

ユーザーが使いやすいようにツールバーをカスタマイズ可能です。

ツールバーをカスタマイズするには「設定」→「Advanced Editor Tools」をクリックします。

WordPressの「設定」→「Advanced Editor Tools」をクリック

こちらが「Advanced Editor Tools」の設定画面です。

「Advanced Editor Tools」の設定画面

ここで必要なボタンはドラッグで上のツールバーへ移動、いらないボタンはドラッグで下へ移動してツールバーから削除します。

「Advanced Editor Tools」の設定画面(必要なボタンは上へ、不要なボタンは下へドラッグ)

プー太郎
プー太郎

ツールバーには使うボタンだけを配置しよう。ボタンの順番もドラッグで変更可能だよ。

特に「スタイル」はツールバーに入れておくと、マーカーやボックスなどが使えるので何かと便利です。

WordPressのツールバーに「スタイル」を入れておくと何かと便利

下にあるオプションの「コンテキストメニュー」にチェックを入れると、右クリックメニューがテーブル用のメニューに置換されます。こちらはお好みで。

コンテキストメニューにチェックを入れると右クリックメニューが置換される

右クリックメニューがテーブル用メニューに置換された

プー太郎
プー太郎

以上の設定が終わったら「変更を保存」を忘れずに押してね!

スポンサーリンク

表(テーブル)の作り方

それでは、WordPressで実際に表(テーブル)を作ってみましょう。

ツールバーの「テーブル」をクリックします。

ツールバーのテーブルをクリック

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

「縦4列×横5行」の表を作る

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

縦4列×横5行の表ができた

スポンサーリンク

表の調整方法

ここから、表の調整方法を説明します。

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

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

セルの幅や高さを調整する方法

セルの高さを均一に変更するには、表全体(もしくは変更する列だけ)をドラッグして

表全体をドラッグする

セル」→「セルのプロパティ」を押して高さを数字で入力します。

表の「セル」→「セルのプロパティ」を押す

「セルのプロパティ」へ高さを入力

セルの高さを「100px」に設定した表

プー太郎
プー太郎

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

幅については「全体の何%にするか」を指定します。

現在は4列なので、それぞれの幅は25%ですが、一番左の列を10%にしてみましょう。

左の列をドラッグします。

左の列をドラッグ

セルのプロパティ」を押して、幅の欄へ「10%」と入力し「OK」を押します。

幅の欄へ「10%」と入力

左の列が10%で、ほかの3列はそれぞれ30%になりました。

左の列が10%で、ほかの3列が30%の表

表全体の幅を変更する

表全体の幅を変更するには、表のどこかをクリックしてからツールバーのテーブルを押して「表のプロパティ」をクリックします。

「表のプロパティ」をクリック

表の幅はデフォルトで「100%」です。半分にするには「50%」と入力します。

表全体の幅を「%」で指定します。

これで表の幅が半分になりました。

表の幅が半分になった

行や列を追加・削除する

表の行や列を増やすには、表のどこかをクリックしてからツールバーのテーブルを押して

「行」または「カラム(列)」の「挿入」をクリックします。

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

表の行や列を追加

線の種類と色・背景色を変更する

線の種類と色、背景色の変更は、変更したい部分をドラッグして「セルのプロパティ」をクリックします。

「セルのプロパティ」をクリック

「高度な設定」で線の種類と色、背景色を指定します。

「高度な設定」で線の種類と色、背景色を設定する

プー太郎
プー太郎

色をカラーコードで指定する場合、こちらのカラーコード表が役に立つと思います。

たとえば表の背景色をすべて「白」にするには、

表全体をドラッグしてから背景色のコード欄に「ffffff」と入力します(白のカラーコードは「#ffffff」)。

背景色のコード欄に「ffffff」と入力

文字のセンタリング

こんな表を作って文字を中央に寄せるには、

文字が左に寄った表

表全体をドラッグして「セル」→「セルのプロパティ」の横配置「中央」を選択します。

「セルのプロパティ」の横配置「中央」を選択

文字を中央に配置した表

プー太郎
プー太郎

表の文字は、ツールバーの「中央揃え」を押してもセンタリングできるよ!

ツールバーの「中央揃え」をクリック

文字を太字にする

見出しなどの文字を太字にするには、セルの種類で「ヘッダーセル」を選ぶ方法もありますが、

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

ツールバーの「B」ボタンを押しても太字になります。

「B」ボタンで太字にする方法もある

文字をセンタリング、項目を太字にした表

文字の色や大きさを変える

文字色の変更はツールバーの「テキスト色」で行います。

こちらは見出しの背景を「赤」にした表ですが、見出しの文字を「白」に変更してみます。

見出しの文字が「黒」の表

見出しの行をドラッグして、テキスト色の「白」を選択します。

見出しの行をドラッグして、テキスト色の「白」を選択

見出しの文字が白に変わりました。

見出しの文字色が「白」に変わった表

同じく文字の大きさもツールバーで変更可能です。

表の文字の大きさを変更

スポンサーリンク

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

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

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

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

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

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

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

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

下の方に「テーブル設定」という項目があります。

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

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

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

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

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

Cocoonのスクロールヒント

プー太郎
プー太郎

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

セル内の余白を調整する

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

プー太郎
プー太郎

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

表を作ると「文字と線の間隔が狭いなー」と感じることがあると思います。

表のセル内の余白が狭い

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

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

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

カスタムCSS

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

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

CSSを貼り付けたカスタムCSS

「下書き保存」を押して再度プレビューで確認すると、文字と線の間の余白が広がっているはずです。

セルの余白を広くした表

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

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

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

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

サイト全体を一括して変更したい場合は、

外観」→「テーマファイルエディター」にある「Cocoon Child」のスタイルシートに、先ほどのCSSを貼り付けます。

Cocoonのスタイルシート

スポンサーリンク

最後に

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

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

プー太郎
プー太郎

では、また。

コメント