こんにちは、ikuzo(いくぞう)です。
WordPressでブログを始めてかれこれ7年になります。
最初のころは、WordPressで何をするにも分からないことだらけでしたが、今は大体のことができるようになりました。
私が悩んだことを、これからブログを始める方やブログを始めたばかり方の少しでもお役に立てれば
そんな気持ちから始まったikuzoの「Cocoonかんたんカスタマイズシリーズ」
そんなシリーズ、いつできた？笑
今回は、表（テーブル）の作り方についてです！
この記事を読むと、こんなことができるようになります
WordPressで表が作れます
Cocoonで「ScrollHint」を表示できます
表の余白部分を調整できます
表を作る前の準備（プラグインをインストール）
WordPressで表を作る方法はいくつかありますが、
今回はプラグイン「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」を入れる前のツールバーはこんな感じですが、
「Advanced Editor Tools」を入れただけで表（テーブル）のボタンが増えています。
すなわち、これで表が作れる状態になりました。
ほかにも「Advanced Editor Tools」は、
ユーザーが使いやすいようにツールバーをカスタマイズ可能です。
ツールバーをカスタマイズするには「設定」→「Advanced Editor Tools」をクリックします。
こちらが「Advanced Editor Tools」の設定画面です。
ここで必要なボタンはドラッグで上のツールバーへ移動、いらないボタンはドラッグで下へ移動してツールバーから削除します。
ツールバーには使うボタンだけを配置しよう。ボタンの順番もドラッグで変更可能だよ。
特に「スタイル」はツールバーに入れておくと、マーカーやボックスなどが使えるので何かと便利です。
下にあるオプションの「コンテキストメニュー」にチェックを入れると、右クリックメニューがテーブル用のメニューに置換されます。こちらはお好みで。
以上の設定が終わったら「変更を保存」を忘れずに押してね！
WordPressで表（テーブル）を作る方法
それでは、WordPressで実際に表（テーブル）を作ってみましょう。
表（テーブル）の作り方
ツールバーの「テーブル」をクリックします。
たとえば「縦4列×横5行」の表を作るのであれば、このように選択します。
すると、あっという間に縦4列×横5行の表ができました。
セルの幅や高さを変更する方法
作った表のセルの幅や高さを調整するには、調整したい線の上にカーソルを当ててドラッグします。
セルの高さを均一に変更するには、表全体（もしくは変更する列だけ）をドラッグして
「セル」→「セルのプロパティ」を押して高さを数字で入力します。
この100は「100px（ピクセル）」という意味です。
幅については「全体の何%にするか」を指定します。
現在は4列なので、それぞれの幅は25%ですが、一番左の列を10%にしてみましょう。
左の列を上から下へドラッグします。
「セルのプロパティ」を押して、幅の欄へ「10%」と入力し「OK」を押します。
左の列の幅が全体の10%で、ほかの3列はそれぞれ30%になりました。
表全体の幅を変更する方法
表全体の幅を変更するには、表のどこかをクリックしてからツールバーのテーブルを押して「表のプロパティ」をクリックします。
表の幅はデフォルトで「100%」です。半分にするには「50%」と入力します。
これで表の幅が半分になりました。
行や列を増やしたり削除する方法
表の行や列を増やすには、表のどこかをクリックしてからツールバーのテーブルを押して
「行」または「カラム（列）」の「挿入」をクリックします。
同じやり方で、行や列の削除も可能です。
線の種類と色・背景色を変更する
線の種類と色、背景色の変更は、変更したい部分をドラッグして「セルのプロパティ」をクリックします。
「高度な設定」で線の種類と色、背景色を指定します。
色をカラーコードで指定する場合、こちらのカラーコードの一覧表を参考にしてください。
たとえば表の背景色をすべて「白」にするには、
表全体をドラッグしてから背景色のコード欄に「ffffff」と入力します（白のカラーコードは「#ffffff」）。
文字のセンタリング
こんな表を作って文字を中央に寄せるには、
表全体をドラッグして「セル」→「セルのプロパティ」の横配置「中央」を選択します。
下の画像のようにツールバーの「中央揃え」を使う方法でも文字のセンタリングができるよ。
文字を太字にする
見出しなどの文字を太字にするには、セルの種類で「ヘッダーセル」を選ぶ方法もありますが、
ツールバーの「B」ボタンを押しても太字になります。
文字の色や大きさを変える
文字色の変更はツールバーの「テキスト色」で行います。
こちらは見出しの背景を「赤」にした表ですが、見出しの文字を「黒」から「白」へ変更してみます。
見出しの行をドラッグして、テキスト色の「白」を選択します。
見出しの文字が白に変わりました。
同じく文字の大きさもツールバーで変更可能です。
表のかんたんなカスタマイズ
ここからは、かんたんな表のカスタマイズを紹介します。
セル内の文字を一列にする
これはカスタマイズではなく、Cocoonの設定でできる方法ですが、
たとえば、ひとつのセルの中に文字をたくさん入力すると、文字がどんどん下へ回りこんでしまいます。
これを阻止して、文字を一列にするには「Cocoon設定」の「本文」タブをクリックします。
下の方に「テーブル設定」という項目があります。
そこの「横幅の広いテーブルは横スクロール」に チェックを入れて「変更をまとめて保存」を押します。
編集画面では同じように回りこんでいますが、プレビューで確認するとちゃんと一列になっています。
また、コンテンツ幅よりも表の幅が長くなるとScrollHintで「スクロールできます」と教えてくれるようになります。
Cocoonはいたれりつくせりだね！
セル内の余白を調整する
ここからが本当のカスタマイズです(^_^)
といっても、今回はひとつだけですが。
表を作ると、文字と線の間隔（セル内の余白）が狭いと感じることがあると思います。
この余白を広げる方法を説明します。
幅についてはスペースを入力して広げてもよいのですが、もっとスマートにできる方法があります。
記事の編集画面（投稿を編集）の下の方に「カスタムCSS」という欄があるので
ここへ次のCSSをコピペして下さい。
th, td{
padding: 10px 20px!important;
}
「下書き保存」を押してプレビューで確認すると、文字と線の間の余白が広がっているはずです。
コードの10pxは「上下の余白」で20pxは「左右の余白」です。
お好みの数字に変更して余白部分を調整して下さい。
この「カスタムCSS」にコードを入力すると、その記事だけに反映されます。他の記事には反映されません。
サイト全体を一括して変更したい場合は、
「外観」→「テーマファイルエディター」を押して、スタイルシートの中に先ほどのCSSを貼り付けます。
最後に
というわけで今回はWordPressの表（テーブル）を作り方や、余白の大きさを変更する方法でした。
少しでもお役に立てていたら幸いです。最後まで読んでいただき、ありがとうございました。
またねー
コメント