2020年5月19日

wordpressのTinyMCE Advancedの表を横幅いっぱいに表示させるための手順

スポンサーリンク

wordpressでブログを書いていると表はよく使いますよね。デフォルトでは左にギュッと寄っている表になっています。

表

これを以下のように横幅いっぱいに綺麗に合わせる方法をご紹介していきます。

この記事では

  • TinyMCE Advancedのプラグインを使った綺麗な表の作り方

表のHTML構造

幅のHTMLコードを見てみると先頭には<table style=”height: 〇〇px; width: 〇〇px;”>と表自体に「height(高さ)」と「width(幅)」が指定されています。

このコードの中の『width: 〇〇px』の部分を変更する必要があります。実際に簡単な作業なのでサクッと終わらせましょう。

表の幅を揃える手順

セルのプロパティで幅を%指定する

幅を整えたい列を指定し、表⇒セル⇒セルのプロパティと進み選択。TinyMCE Advancedの表
幅を任意の%で入力します。今回は100%の内一番左を20%としました。TinyMCE Advanced セルのプロパティ

HTMLコードを確認する

他の列も同様に入力しテキストエディターを見ると以下のようにHTMLコードが記載されていることを確認します。

テキストモードでwidth=”100″と変更する

ビジュアル画面を見てみてみるとが、表の幅はデフォルトのままになっています。ここで以下の赤枠部分の202となっている部分を100%に変更します。TinyMCE Advancedの表

すると横幅いっぱいに表が表示されるようになります。

スポンサーリンク

まとめ

表はデフォルトでは見栄えが悪いので、TinyMCE Advancedを使っているのであれば幅をセルのプロパティで変更し100%になるように設定をし直すようにしましょう。

綺麗な表で見やすさを追求していきましょう!

wordpress番号付きリストを途中で任意の数字からスタートさせる方法

この記事が気に入ったら
いいね ! しよう

Twitter で
スポンサーリンク