ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > WordPressの表でwidthが自動で設定されてしまう際の対処法

WordPressの表でwidthが自動で設定されてしまう際の対処法

Web制作

2021/12/17

2023/04/14

wordpress widthサムネイル

WordPressで表を出力する際に横幅や縦幅が自動で設定されて、思わぬ表示崩れを起こしてしまう事があります。

表示崩れはユーザーの離脱に繋がってしまうため、後回しにせず早めに修正しましょう。

今回はそのような表示崩れを起こしてしまう原因と対処法を解説していきます。

今回の記事でできるようになる事
  • 表の表示崩れの原因がわかる
  • 表の表示崩れの対処法がわかる

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

表が崩れてしまう原因

まずは表が崩れてしまう原因を解説していきます。

原因は「Advanced Editor Tools (旧名 TinyMCE Advanced)」にあります。

Advanced Editor Tools (旧名 TinyMCE Advanced)とはエディタ内でより高度な設定をできるようにツールバーを拡張するプラグインです。

Advanced Editor Toolsは200万回以上インストールされているとても便利なプラグインです。

このプラグインがどのような悪影響を及ぼしてしまっているのか説明していきます。

投稿一覧 > 新規追加より投稿ページに移動します。ビジュアルエディターで表を出力します。

表のセルとセルの間にマウスを移動させます。

すると下記画像のようにカーソルが変化します。

表の画像

これを1回でもクリックしたり、スライドをしてしまうと各セルの幅に合わせてwidthとheightが自動で設定されてしまいます。

試しに表のセルををスライドしてみます。

表のコード

するとこのようにwidthとheightが設定されてしまいす。

原因がわかったところで対応を考えていきます。

ZeroPlusgate50教材の動画

表が崩れてしまう際の対応

表が崩れてしまう時の対策は3つあります。

  1. プラグインの設定を変更する
  2. ビジュアルエディタを使用しない
  3. functions.phpを修正する

どれでも対応することはできるのですが、1番簡単なプラグインの設定から解説していきます。

1.プラグインの設定を変更する

設定 > Advanced Editor Toolsをクリックします。

 

プラグインの設定

Advanced Editor Toolsの設定画面へと進みます。

マウスのドラッグでのテーブル、行、列のサイズ変更を可能にするのチェックを外します。

Advanced Editor Tools設定画面

これで設定は終わりになります。

 

Advanced Editor Toolsのバージョンによっては設定画面から変更できない場合もあります。

その方はこれ以降に紹介する方法で解決することができます。

2.ビジュアルエディタを使用しない

2つ目の対応方法ですが、ビジュアルエディタを使用しないことです。

テキストエディタを使用することにより、表をドラッグできなくなるため綺麗な表を出力できます。

3.functions.phpを編集する

最後にfunctions.phpを編集することによって、プラグインの設定を変更する事ができます。

functions.phpはテーマはサイト全体に影響を及ぼすので知見がある方のみこちらのファイルを触るようにしましょう。


// 表の横幅と高さを自動設定される機能を無効化する
function customize_tinymce_settings($mceInit) {
    $mceInit['table_resize_bars'] = false;
    $mceInit['object_resizing'] = "img";
    return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings' ,0);

こちらのコードをfunctions.phpに記述し更新することにより表の表示を整える事ができます。

ZeroPlusgate50教材の動画

まとめ

今回は表の表示が崩れてしまう原因と対応を解説しました。

表にwidthとheightがつかないようにするためには下記3つの対応方法があります。

  1. プラグインの設定を変更する
  2. ビジュアルエディタを使用しない
  3. functions.phpを修正する

1番やりやすい方法で対応し、素敵なサイトを制作していきましょう。

 

WordPressを学習中の方へ

WordPressを学習していて、このように思ったことはありませんか?

  • フリーランスとして「現場で使える」知識やスキルを身につけたい
  • 仲間と一緒に「楽しく」学びたい
  • 周りと差をつけられるように「効率的に」学びたい
  • WordPressだけでなくデザインも勉強して「ハイレベル」なWebサイトを作りたい

プログラミングスクールZeroPlusでは講師が全員フリーランスとしての活動経験があり、ハイレベルな内容わかりやすく学ぶことができます。

また、ZeroPlusは生徒同士のコミュニケーションが盛んで、仲間とともにやり切ることができるスクールです。アットホームな雰囲気で、入塾後の挫折率は極めて低くなっております。

実際に生徒さんがコミュニケーションを取られている様子はTwitterで確認いただけます。ぜひこちらから覗いてみてくださいね…!

ここまででZeroPlusに興味を持ってくださった方は、ぜひオンラインの無料相談にお申し込みください。皆様のプログラミング学習やキャリアに関するお悩みを、一緒に解消する時間になればと思います。

 

また、1ヶ月完結型のプログラミングキャンプ「ZeroPlus Gate」では1日10分の学習でWeb制作の基礎を本格的に学ぶことができます。

リリースを記念して期間限定で無料キャンペーンを行っています。
こちらのZeroPlus Gate公式サイトより皆様のお申し込みをお待ちしております。

サイト内問い合わせフォームより、簡単に受講することができます。

また、公式LINEではZeroPlus Gateに関する最新情報やWeb制作に役立つ知識を配信しています。下記QRよりご登録ください。

ZeroPlus Gate QR画像

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから