【ブログメモ】Cocoonでのテーブル作成の正解

他のテーマでもほぼ同じだと思うのですが、テーブルを作るときの自分用のポイント覚書を書いておきたいと思います。

テーブル(表)を作るときのプラグインはほぼ２択なのだとわかりました。

・TablePress：表を作成して、記事にはめ込む。
・Advanced Editor Tools (旧名 TinyMCE Advanced)
：テーブル編集をしやすくする。

表をアジャストしてくれるなど「TablePress」の利点も大きいようですが、私は記事を書きながらシンプルにテーブル(表)作りをしたいので、「Advanced Editor Tools」で行おうと思おいます。

Advanced Editor Toolsを導入するとどうなるか

■導入前

■「Advanced Editor Tools」導入後

ボヤけていますが、一目瞭然です。
こんな何編集できることが増えます。
表のようなアイコンも見えると思います。

あとは、感覚的にできるので詳しくは書かないですが、
つまずきそうな部分をメモしておきたいと思います。
また、色を変えるときに迷いたくないので、自分のために、使おうと思う色指定を書いておきたいかと思います！

Advanced Editor Toolsでテーブル(表)を 作るときのポイント！

表マークのプルダウンの中にある機能でほぼ対応できます。

３×３の表をこんな感じです。

文字の変更は迷わないかと、でもこの縞々を直したい。
表のプロパティで直してしまうと、表全体が変わってしまいます。
【20210719追記】
こちらですが、cocoon設定で「スキン」を設定したら、表の現れ方が変わってしまいました。上下の表が同じになっていますが「スキン」の使用によるものだと思われます。意味不明のことを書いているようですみません。

あ！しかも白地の方がかわるのね！
冗談のような感じになってしまうので。。。

「テーブル」アイコン ＞ 「セル」から細かい修正をします。
「セルのプロパティ」「セルの結合」「セルの分割」があるので自由自在です。

こんな感じです。
セルの罫線や背景を変えたいときは「セルのプロパティ」。
文字色などの変更は普通の文章を書くときと同じです。
ちなみに上記の表は、表頭をブルーにして文字を白色太字にして、他の部分の表の背景色を白にしただけです。

表に使う色のメモ

使う色が増えてきたらまた増やしたいともいますが、
ひとまずこちらの色を使っていこうかと思っています。

【表頭に使う】
■通常
・文字：#ffffff （白＆ボールドで表示）
・steelblue：#4682b4 ■
■シンプル
・文字：#ffffff （白＆ボールドで表示）
・dimgray：#696969 ■