無料ブログ「rentafree.net」の管理人ブログ

Adsenseの記事内広告を使うとレイアウトが崩れる

公式テンプレートのマルチカラムレイアウトのやつはCSSのfloatを使用してマルチカラムを実現していましたが、
Google Adsenseの記事内広告を使用すると記事内でclear:bothされてその箇所移行が左サイドバーより下に落ちる感じでレイアウトが崩れてました。

floatを使わずにdisplay:table-cellを使ってなんとかなる感じなんで、管理人ブログでも使用している1-2カラム・ハイブリッドのみ変更しました。
後ほど他のテンプレートも変更予定です。

テンプレートに不具合が生じるようでしたらご報告お願いします。


[追記]
公式テンプレートの内、左サイドバー付きの2カラムレイアウトのテンプレートは同様の変更を行いましたが、
右サイドバー付きのテンプレートは記事の前に右カラムがあるため同じ方法が使えませんでした。
考えてみますが無理かも・・・

[追記2]
右サイドバー付きのテンプレートにつきましてはdisplay:flex;でほぼ対応できたのですが、
公式テンプレートの内1-2-3カラム・ハイブリッドについてはflexではfloatと同等のことができない感じでした。
ちょっとfloatを使わない方法が思いつかないので放置します。

document.execCommandが廃止されたとか・・・

先程<menuitem>がFirefoxで無効になった件で記事を書きましたが、
元々の本物のコンテキストメニューでは非表示になっていましたが、コンテキストメニュー風のUIだと「切り取り」「コピー」「削除」の項目が表示されるようになっていました。
こちらの機能について確認しましたが、document.execCommandという機能を使って実装しておりブラウザ標準の「切り取り」「コピー」「削除」と同等の動作となります。

ですが、どうもdocument.execCommandという機能は廃止されたようです。
でも現時点で機能しています。
というかそもそもこの機能は標準化されていない機能だったと記憶しており、廃止されたというより標準化されないことが決まったという感じだと思います。
標準化された機能ではないですが、すべての主要ブラウザで機能するようです。

これも<menuitem>と同じようにいつか削除されるかもしれないので変更したいですが、
こちらは代替手段の存在しない<menuitem>と違いClipboard API というもので代替できるようなのですが、Firefox 87からの機能のようなのでFirefox 87が出てからに考えます。
あと、EdgeにはすでにClipboard APIが実装されているようなのですがMSIEは非対応のようです。
こちらで変更する場合は両対応にできると思います。

Firefox 85から標準コンテキストメニューが表示されなくなっていました

ブラウザの変更点チェックはしなくなっていたので先程気づきましたが、
当サービスのブログエディターではHTML5及びHTML5.1の<menuitem>により編集領域上で右クリック(スマホでは長押し等)によりコンテキストメニューが出る場合に拡張して独自項目を追加していましたが、
この機能はFirefox以外のすべてのブラウザで実装されずにHTML5.2にて削除されていました。
そのためFirefox以外のブラウザに対応するために非対応ブラウザにおいては<menuitem>を使わずにコンテキストメニュー風の独自UIを出力していましたが、Firefoxでもブラウザ標準のコンテキストメニューが出ずにコンテキストメニュー風の独自UIが出るようになっていました。

この変更ですが、Firefox 85にて<menuitem>が無効化されていました。(現在のFirefox最新版は86です。)
残念ですが、HTMLの機能に代替手段が存在しませんので標準のコンテキストメニューは出せません。

元々組み込んでいた対応ブラウザと非対応ブラウザの判別処理によりFirefox 85以降は適切に非対応ブラウザとして処理されるようになっていましたので、こちらでの変更は行いません。
今後バージョン84以前のFirefoxのサポートはできなくなりました。

なお、コンテキストメニューの独自項目にアンドゥ・リドゥがありますが、これは内部実装の機能なのでブラウザ標準のアンドゥ・リドゥとは動作が違う可能性があります。
<menuitem>による実装ではコンテキストメニューにブラウザ標準のアンドゥ・リドゥも存在しましたが表示できなくなりました。
キーボードでCtrl+ZまたはCtrl+Shift+Zを押した場合も捕捉しているため内部実装の機能となります。
ブラウザメニューバー等他の方法でアンドゥ・リドゥを行った場合はブラウザ標準の機能になります。

独自実装の機能はすべてコンテキストメニュー風の独自UIでも表示されるのでブログエディターの機能自体は変わりませんが、
ブラウザ標準のUIではなくなるため外観の問題と、検索や翻訳といったブラウザの機能をブログエディター上のコンテキストメニューから利用することができなくなりました。