【Cocoon】表の挿入の仕方・枠の設定【WordPress】

cocoon

こんにちは。

ブログの作成は順調に進んでいますか?

今回は、Cocoonで表の挿入の方法を説明したいと思います。

スポンサーリンク

Cocoonのエディタを変更する

下記が、Cocoonの編集画面のツールバーになります(一部、外部プラグインあり)。ここには表を作成する機能がありません

エディタのメニュー

そこで、編集画面のツールバーをプラグイン『Advanced Editor Tools (previously TinyMCE Advanced)』に変更します。このプラグインには表作成の機能があります。

プラグインの新規追加で、『Advanced Editor Tools (previously TinyMCE Advanced)』を検索して、インストールして下さい。

Advanced Editor Tools

インストールが終了し、有効化したら、ダッシュボードのプラグインの画面からAdvanced Editor Tools (previously TinyMCE Advanced)の設定をクリックします。

設定をクリック

設定画面が表示されます。下にスクロールすると、『クラシック版の段落とクラシックブロックのツールバー』というメニューがあります。

そこに表示されているツールバーが、編集画面に表示されるツールバーになります。そして、ツールバーの下に表示されているのが追加機能のボタンになります。

その中にテーブルを作成するボタンがあるので、上にドラッグして、メニューに追加します。この際に、必要なボタンもドラッグして追加しておいて下さい。Cocoon独自の機能『スタイル』なども追加下さい。

テーブルをドラッグする

追加が終われば、ページ一番下の『変更を保存』をクリックして終了させて下さい。

編集画面に戻って、新しいツールバーになっていることを確認して下さい。

追加後のメニュー画面

これでプラグインのインストール・設定は終了です。

表の枠線のコードを追加CSSに追記する

表を追加するには、テーブルのボタンをクリックすればいいです。エクセルと同じ要領で作成できます。

エクセルと同様に表を作成

テーブルのアイコンをクリックして、プロパティ設定で、枠線の太さや色などを設定することが出来ます。

しかし設定をしていないと、下記のようになります。枠線が表示されません。

枠線なしの表

そこで、一応、テーブルのプロパティで設定しなくても枠線が付くように、追加CSSにコードを追記しておくことをおススメします。

ダッシュボードから外観⇒カスタマイズ⇒追加CSSに進みます。

外観⇒カスタマイズ⇒追加CSS

そしてコードを追記します。

table th, table td{
 border: 1px solid #999:
}

コードを追記

1pxは太さ、solidは線の種類、#999は色になります。標準で表を作った際の枠線なので、標準的な値をおススメします。下記の枠線が出来ました。

標準の枠線

これで、テーブルのプロパティの設定を忘れても枠線が表示されることになります。

まとめ

いかがだったでしょうか。

比較する記事を作成する時等には、テーブルがあった方が分かりやすいですよね。是非、みなさんのブログに生かして下さいね。

この記事がよかったと思われましたら、下のSNSのボタンでシェアしていただければうれしいです。

アフィリエイトで夢を叶えた元OLブロガーが教える 本気で稼げる アフィリエイトブログ 収益・集客が1.5倍UPするプロの技79
ソーテック社
夢を叶える人生のために、好きを仕事にするためのブログを書き方、目的や意味、そしてマインドの持ち方まで、アフィリエイトブログで夢をつかんだ亀山ルカと染谷昌利だから書ける極意満載!

コメント

タイトルとURLをコピーしました