初心者が読むべき500のノウハウ記事のまとめ

WordPressでテーブルのセル結合ができない時に使うジェネレーター:テーブルタグジェネレーター

こんな人におすすめ
WordPressのグーテンベルグでテーブルのセルの結合ができない
紹介サイト:Table Tag Generator

WordPressグーテンベルグのテーブル機能って便利!
でも「セルの結合機能だけあとあれば・・・」といつも思いますorz

グーテンベルグでテーブルを作ると、こんな感じですが↓

項目1項目2項目3
背景に色つけたいセルを統合したい見出し設定どうするの??
細かなマージンの設定セルの分割したいクラスタグ付けたい

セルの中でやりたいことを書いてますが、グーテンベルグではこうしたことがサクッとできません。

できるかもしれないけど、わからん( ゚д゚ )クワッ!!

ごま吉

という訳で、そのあたり補ってくれる便利なジェネレーター『Table Tag Generator』の紹介です。

Table Tag Generatorのポイント

  1. テーブルのセルの結合・分割が簡単にできる
  2. 余白、色、ボーダーの太さなど細かな調整ができる

基本的には、CSSを書き換える必要があります。
ただ、ジェネレーターですので変更したプレビューの出力をすぐやってくれるので、直感的に表(テーブル)を作りやすいと思います。

では、やってみましょう。

セルの数を決めたい

行と列を自由に変更できます。

セルを結合したい

結合したいセルをドラッグして選択すればOK

文字の入力

セルに入力したい文字を入力します。

出力ボタンを押して出力します。

できた!でも縦長ですね・・・w

CSSの入力フィールドに、横幅設定いれてやりましょう。とりあえず横幅いっぱいにしたいから『width:100%;』を追加。

どん。

見出しの設定

見出しにしたい項目を選んで『td→th』ボタンを押します。
その他、背景色、ボーダーの太さなどCSSでコントロールできますのでいろいろチェレンジしてみましょう。

WordPressにHTMLソースコードとCSSを貼り付け

あとは、コードをワードプレスの記事画面に貼り付ければOKです。

カスタムHTMLのところにHTMLコードをペースト
CSSは??

ごま吉

CSSは、CSSファイルに貼り付けてもOKですが・・この記事しか使わないCSSだと面倒くさいし、スマートじゃないので記事毎にCSSを追加できるプラグインを入れます。

WP Add Custom CSS』というプラグインを入れます。インストールすると、

記事ページの一番下にカスタムフィールドが追加されます。ここにCSSコードを貼り付けてやればOKです。

▼実際に出来たテーブル

項目1 項目2 項目3
背景の色 セル結合できた 見出しの設定
細かなマージン クラスタグつけたい
煩わしいのが嫌だ!という人はプラグイン『TinyMCE Advanced』を入れるともっと簡単にできます

ごま吉

»TinyMCE Advanced

方法は、いろいろあると思います。ただ、こういう機会でも無いとテーブルのHTMLやCSSを学ぶ機会もないなと思うので、最初はソースコードをガシガシやるのもおすすめですよ。

とりま、自分に合ったテーブルの作り方にチャレンジしてみましょう。

参考 Table Tag GeneratorTable Tag Generator