表でwidth・heightが自動で設定されるのを回避する方法

  • A

    ビジュアルエディターで表のセルのサイズを手動で変更するとHTML表示でwidth・heightが勝手に設定されて、レスポンシブでなくなるのを防ぎたいです。

    下記のようなHTMLになります。

    <table class="cps-table03" style="width: 100%;height: 117px">
<tbody>
<tr style="height: 17px">
<th style="height: 17px;width: 17.912%"></th>
<th style="height: 17px;width: 25.7932%">A6サイズ</th>
<th style="height: 17px;width: 30.2968%" colspan="2">B6サイズ</th>
</tr>
<tr style="height: 20px">
<td style="width: 17.912%;height: 20px">大きさ</td>
<td style="text-align: center;width: 25.7932%;height: 20px">148 × 105mm</td>
<td style="text-align: center;width: 30.2968%;height: 20px" colspan="2">148 × 105mm</td>
</tr>
<tr style="height: 20px">
<td style="width: 17.912%;height: 20px">料金</td>
<td style="text-align: center;width: 25.7932%;height: 20px">500円</td>
<td style="text-align: center;width: 15.1484%;height: 20px">500円</td>
<td style="text-align: center;width: 15.1484%;height: 20px">1,000円</td>
</tr>
</tbody>
</table>

    Advanced Editor Tools (旧名 TinyMCE Advanced)のプラグインが入っているとこの現象になるのは知っていましたが、JINでもこの現象になってしまうので辞めたいです。
    （参照：zero-plus.io/media/wordpress_how_to_deal_with_table_width/）
    私ではなく、外注ライターに記事執筆をお願いすると設定されることが多く困っています。。

    functions.phpの変更・CSS等で対応できるのであれば、教えてください。
    私が使っている他のテーマだと同様の事象にはならず、JINのみが該当の事象になります。
    なお、Classic Editorを使用しています。

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.9.3
    ご利用のサーバー名 : Xサーバー
    PHPのバージョン :
    OS :
    ご利用のブラウザ :
    該当サイトのURL : https://cleaning-no1.com/

    0 1 件の返信
  • administrators

    @Akis さん

    こんにちは！JIN運営チームのRyotaです。
    表題の件ですが、functions.phpの修正が必要です！

    function customize_tinymce_settings($mceInit) {

	$invalid_style = array(
		'table' => 'width height',
		'th' => 'width height',
		'td' => 'width height'
	);
	$mceInit['table_default_styles'] = json_encode($invalid_style);

	$mceInit['table_resize_bars'] = false;
	$mceInit['object_resizing'] = "img";

	return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'customize_tinymce_settings' ,0);

    上記を子テーマのfunctions.phpにそのままコピペしてください。
    既に追加されているものは大変恐縮ではございますがこのコードでは解決せず、これを追記後に追加した表に対して効くコードにになりますのであらかじめご了承ください。

    お手数おかけいたしますが、何卒宜しくお願い致します。

    1
    A
     1 件の返信
  • A

    @Ryota
    ありがとうございます。
    上記コードの貼り付けで解決しました！

    1 1 件の返信
  • administrators

    @Akis さん

    無事解決したようで何よりです！！
    また何かあったら遠慮なくトピック立ててください٩( 'ω' )و

    （ご確認いただけたら、返信は不要です！）

    0