アダルトアフィリエイト実践記

表をビジュアルエディタで編集できるプラグイン「TinyMCE Advanced」

 


これまで表を作成するのに「TablePress」を使用してきましたが、TablePressで表を作る場合、その都度、別の画面で編集して、記事にショートコードを貼り付けないといけません。

記事を書く際に、画面を切り替えるのは面倒な上、記事を編集しながら表を編集することができません。

そこで、ビジュアルエディタで表を作れるプラグイン「TinyMCE Advanced」を導入してみました。

「TinyMCE Advanced」は文字装飾のためのプラグイン

TinyMCE Advancedは記事投稿画面の文字装飾を管理できるプラグインです。

基本は文字装飾のショートカットボタンを管理するためのプラグインですが、機能の一つに表を追加する機能があります。

tinymCE advanced

TablePressとTinyMCE Advancedの表を併用するためにスタイルシートを変更する

TablePressを使用していると、罫線が上手く表示されませんが、スタイルシートにこちらを追加すれば表示されます。

table {
border-collapse: collapse
margin: 10px 0 25px 0;
}

th, td{
border: solid 1px #d3d3d3;
padding: 10px 5px 10px 10px;
}

「border-collapse: collapse」は隣り合ってしまった罫線を重ねて表示します。
mraginとpaddingの数字は必要に応じて調整可能です。

また、表のプロパティでセルのスペースを0にすると隙間をなくすことができます。

表の幅を100%にしておけばレスポンシブ対応にもできます。

TinyMCE Advancedで作った表のサンプル

名前 価格 備考 テスト
あああああ あああああ ああああああああああ
あああああ あああああ ああああああああああ
あああああ あああああ あああああああああああああああ

 

ワードプレス便利技   0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: