記事の詳細

つい先日のことですが、弊社にこんなご相談がありました。

「記事を書いたらあちこちに余白ができてるんだけど、なんで?」と。
どうやら記事を書いていたお客様が、記事をアップしたらなぜだかたくさんの余白ができてて困ってしまった、とのこと。

実際にサイトを見て、検証モードでチェックしていると・・・
なぜかtableに余白がついている。

  • グーテンベルクに変わって自動的にtableに余白がつく機能がついたのか?
  • WordPressのアップデートでtableに余白でも自動的についたのか?
  • 何かしらのプラグインが干渉している?

はて。。原因はいったいなんだ??
原因と改善方法について今回ご紹介していきます!

TinyMCE Advancedのテーブル機能が原因(カーソルをいじってしまう)

あらゆるエラーや可能性を加味して検証していましたが、原因は「TinyMCE Advanced」プラグインのテーブル機能でした。
TinyMCEといえば、WordPressのビジュアルエディタの機能を拡張することができるプラグインです。
htmlやcssの知識がなくても無料ブログと同じような感覚で記事が書けるので、多くの方が利用されていると思います。

ですが、tableにおいてはちょっとでも表をずらしてしまうと勝手にwidth(横幅)とheightが(高さ)が設定されてしまうという・・・

WordPressで自動的に横幅の余白が入る

これこれ。

テーブルの枠にマウスをあてると、カーソルが表示され、これを少しでもずらしてしまうと、自動的に横幅や高さの調整が入ってしまいます。
しかも、ビジュアルエディタでは見た目の変化はあまりないのですが、
テキストエディタに変えてみると・・・

WordPressで自動的に横幅の余白が入る

このように勝手にwidthとheightの調整が入っているのです・・・!
この機能、必要なんでしょうか?と疑問に思ってしまいますが、原因はわかったのでこれを修正する方法と、カーソルをいじっても自動的にwidthとheightが入らないように設定変更したいと思います。

まずは修正の仕方をレクチャー

とてもめんどくさいのですが、これを修正するにはひとつひとつの記事でテキストエディタに変えて修正するしかありません。
※ほかに方法があったら教えてほしいです^^;

カーソルをなんとか微調整してもwidthとheightを消すことはできません。
例えばですが、置換できるエディタ(メモ帳、サクラエディタ、テラパッドなど)を使い一気に置換作業をする方法もあります。

置換作業

ただ、記述がバラバラな場合が多いので置換作業も結構大変ではあります^^;

素直にテキストエディタモードで一つ一つ手直ししたほうが早いかもしれません。※ビジュアルエディターで修正するのはおすすめしません!^^;

テーブルの横幅を勝手にwidthやheightが調整されないようにする方法

本題はこちらです。

ビジュアルエディターでテーブルのカーソルをいじっても勝手にwidthやheightが入らないように設定する方法があります。

一度設定してしまえばもう安心!

早速やり方をご紹介します。

functions.phpにコードを追記する

functions.phpに以下のコードを追記します。
※functions.phpは事前に必ずバックアップを取ってください。(エラーで真っ白になります)
※下記のコードをそのまま貼るとエラーを起こすので、記載には注意してくださいね。(関数はまとめて記載)

これでアップロードすれば、ビジュアルエディタでテーブルの枠線をいじってしまってもwidthやheightが自動的に入ってしまうことはなくなります。

安心してテーブル操作できます^^!

ぜひ試してみてくださいね。

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
吉見 千香
WEBデザイン職業訓練卒。男の子2人の育児で毎日奮闘中です。WEBサイトやSNSの運用、SEOの研究が大好きで日々検証してます。お客様にわかりやすい提案と内容をお届けできるよう努力しています!

ほかの投稿も読んでみませんか?

コメントは利用できません。

AD

ページ上部へ戻る