テーブルでレイアウトする

テーブルでのレイアウトに､ずいぶん手こずった｡要因は､複合的だ｡

同プラグインは､ていねいにも､セルの幅と高さが自動的に入る｡いっけん､便利そうだけれど､実際には表示のレイアウトが崩れたりして､けっこう､やっかいだ｡

いまテスト中のウェブページでは､

それならば､セルに挿入するイラストのサイズを統一してしまえば､それに応じてセルのサイズも統一するにちがいないと､まぁ､そうおもったわけね｡

結果は､なんども試したけれど､NGだったぜ､まったく｡

で､対応策として､自動的に入った数値を､ひとつひとつ削除する方法もあったりする｡がしかし､英文字と数値だらけのコードから該当する箇所を見つけるのは大変だし､間違って､ちがう箇所の数値を削ると､それはそれで､また大変である｡

なので､さいしょから数値が入らないように､WordPressの基幹ファイルにコードを記述することにした｡

記述したファイルは､function.php

（パスは､wp content/hemes/twentyseventeen/function.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);

セルのプロパティ > 高度な設定 > 枠線の色 にて､枠線の色を設定するだけでは､罫線が表示されない｡うーん｡

解決策とし「スタイル」の欄に表示されている線の色のスタイルシートのあとに､つづけて､以下のスタイルシートを記述をした｡

border: 1px solid;

外観 > カスタムタイプ > 追加CSSに以下のスタイルシートを記述した｡

@media (max-width: 650px) {
table td{
display: block;
padding: 0.6em;
text-align: center;
 }
}

行の仕切りの太い線の描写は､行の選択> 所定の選択+ border: 3px solid;の記述にて｡
列の方は､border-right-width 3pxにて描写クリア｡

ただし､スマホでは､レイアウトが大幅に崩れてしまう｡太い線の採用をキャンセルするか､それとも､崩れないようにスタイルシートを記述するか｡=>げんざい､方法､わからず｡