WordpressのTinyMCE Advanceが自動的に付ける"width"や"height"を削除したいが・・・

Posted on

Wordpressのプラグイン "TinyMCE Advance" では、表組み(table要素)の罫線をちょっと動かすだけでも、"width"や"height"が付加されてしまいます。

これではレスポンシブになりません。

th要素やtd要素に"width"が付いていても、CSSでtableに対して"max-width: 100%;"を適用しておけばレスポンシブ対応にできます。

でもTinyMCE Advanceでは"table style="width: 750px"と、table要素に対してstyle属性で指定されてしまうため、親要素の幅が狭いとtableのみはみ出してしまいます。

解決策としてCSSで"max-width: 100%;"を指定すると、Safari, Firefox, Edgeでは有効なものの、Chromeのみ適用されません。(優先順位がstyle属性の方が高いため)
" !important"を指定しても無駄です。

そこで色々と試したところ、tableに対して
display: table-row;
を指定すると、max-widthが適用された状態にできました。

この指定はChromeに対してだけ適用させたい場合、以下のHackが有効です。

/* Only Chrome
tableにmax-wdthを指定しているにも関わらず適用されないため */
@media screen and (-webkit-min-device-pixel-ratio:0){
      .entry-content table{
            display: table-row;
      }
}

ちなみにth要素やtd要素に"width"や"height"が付かないようにする方法は、「まっしろブログ」さんのサイトで紹介されていました。

TinyMCEがTableタグに「width」と「height」を勝手に設定する機能を無効にする

他、参考にしたサイト:

iPad上のSafariで幅100%のVIDEOタグの高さを取得できない

Posted on

ディスプレイの幅に合わせてレイアウトが変化するレスポンシブデザインのページに、幅が可変の動画を配置するため以下のCSSを指定しました。

video { width: 100%; max-width: 100%; height: auto; }

モダンブラウザやAndroidのデフォルトブラウザでは、意図したとおりウィンドウサイズに合わせて動画のサイズが縮小されます。

しかし、iPadやiPhoneでは、動画のサイズが小さくなり、動画の左右に黒く塗りつぶしたボックスが表示されてしまいます。

仕様は確認できませんでしたが、iOSのSafariではVideoのデフォルトサイズが300×150に設定されているそうです。

VIDEO要素に高さが指定されていない場合や「auto」になっている場合は、このデフォルトの高さが使用され、小さく表示されるようです。

幅に合わせて、高さが変更されるブロックを作成できれば良いのですが、「height」を相対指定して、幅に合わせて高さが変更されるブロックを作成することはできません。

「width」はパーセンテージで指定すると親要素(またはBody要素)の幅が基準になり、「height」もまた親要素の高さが基準になるためです。

解決方法

paddingやmarginは、パーセンテージで指定すると「包括要素の」が基準となります。

この包括要素の幅が基準になるという性質を利用すると、幅に合わせて高さが変化するブロックを作成できます。

動画の幅を100とすると高さは75になるので、DIV要素に「width: 100%」、「padding-top: 75%」を指定すると、幅に合わせて高さが変化するDIV要素を作成できます。

このDIV要素を、VIDEO要素の親要素になるように配置します。

そしてVIDEO要素に対して、「position: absolute; top: 0;」として絶対位置指定にし、親要素と同じ幅・高さにするため、「width: 100%; height: 100%」を指定します。

また、VIDEO要素の絶対位置の基準になるように、親要素(DIV要素)に「position: relative」を指定します。

以上で、幅にあわせて高さが変化するVIDEO要素を作成できました。

HTML

<div id="video_wrap">
    <video src="" width="720" height="540"></video>
</div>

CSS

#video_wrap {
    position: relative;
    width: 100%;
    padding-top: 75%;

}
#video_wrap > video {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

 

参考リンク

 

Hayashi

IE9/10でローカルHTMLを検証する際に設定すべきこと

Posted on

ホームページ制作の際、ローカルの(PC内の)HTMLファイルをIE9/10で検証する際は、IEのデフォルトの設定を変更する必要があります。

一つは互換表示をオフにする、もう一つはJavaScriptを実行するための設定です。

続きを読む

列幅を固定するtable-layout:fixed

Posted on

 

表組みにするTABLE要素は、内包する要素をすべてを読み込んでから描画するため表示が遅くなります。

描画速度を早くするには、スタイルシートの「table-layout:fixed」を使います。この「table-layout:fixed」は内容に関係なく列幅が固定されるので、描画速度が早くなります。

複数の表の列幅を揃える時にも有効です。

table-layout:fixedを使用する場合の注意点

  • TABLE要素の幅を指定する必要がある
  • 列幅を指定しない場合は、すべての列幅が均等になる
  • 理由はわかりませんが、Safari、Google Chrome(webkit)では、列幅が指定した値よりも若干狭くなる
続きを読む

ヘッダ固定でスクロールできるテーブル

Posted on

HTMLで縦に長い表のときは、見出しを固定(エクセルの「ウィンドウ枠の固定」)して、スクロールできるようにしたい。この動作をCSSだけで実現するようにできたのでメモ。

(2013年8月6日改訂)

動作検証ブラウザ

Win:IE7~10、Firefox22、Google Chrome28
Mac:Firefox22、Google Chrome28、Safari6.0.5

テーブルのヘッダ/フッタ固定・スクロールできるテーブルを指定できます。(あらかじめセルの幅を決めておく必要があります)

続きを読む

表組の奇数行/偶数行で色分けするCSS3/JS

Posted on

CSS3では、:nth-child疑似クラスがサポートされました。これを使うと、表組などで奇数行、偶数行それぞれに背景色を付けることなどが簡単にできます。

ただし対応しているブラウザはFireFox3.6, Safari4+, Chrome5+, Opera10.6で、IE6,7,8は対応していません。

しかしながらIEには簡単なJavaScriptで対応することができます。

サンプルはこちら。

続きを読む

子セレクタ、隣接セレクタ、属性セレクタの合わせ技

Posted on

このサイトではヘッダ部をCSSで position:fixed;にしています。
これはヘッダ部をスクロールさせたくないからですが、実際に運用してみると問題が発覚。
内部リンク先を表示した際、リンク先がヘッダに隠れてしまうのです。

これをCSSで善処すべく色々試してみて、子セレクタ、隣接セレクタ、属性セレクタの合わせ技で対処することにしました。

以下のCSSです。(少し簡略化しています)

#main > div + div > a[name="more"] {
    display: block;
    height: 1px;
    margin-bottom: 160px;
}

以下に詳しく説明します。

続きを読む

IEのFilterの検証

Posted on

CSS3や透過PNGを未実装のIE用にFilterを使用することがあります。filterはInternetExplorer4から導入された独自機能ですが、調べてみると指定方法が2、3種類あります。

今まであまり深く考えずに使っていたのですが、気になったので検証しました。

続きを読む

a要素を:hoverすると、親要素の高さが小さくなる

Posted on

作成中のホームページで「ページトップへ戻る」リンクの下に、リンクを追加したところ、IE7、6でアンカーにhoverするとその親要素が伸び縮みするという不具合が起こりました。[サンプルページ1]

続きを読む

ページトップに戻る