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

 

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

 

WordPressのエディター用のプラグイン、TinyMCEAdvancedにクセがある件

 

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

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

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

結果は、なんども試したけれど、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にて描写クリア。




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

 

コメントを残す

メールアドレスが公開されることはありません。