1. 🏠ホーム
  2. Blogger
  3. Bloggerで左上にコメントアウトの記号が表示される問題と対策

Bloggerで左上にコメントアウトの記号が表示される問題と対策

先刻、ワタクシが保有するブログの内の一つで、トップページの左上に明らかに不自然な「どこかで見た覚えがある記号」が表示されていました。

Bloggerでコメントアウトの記号が表示される問題

記憶を辿ってみたところ、Bloggerカスタム界隈では有名な「toshi」さんのブログで取り上げられていた問題でした。
参照　Bloggerのブログ上部に「-->」が表示される
thumbnail
サイト上部に見慣れぬ「-->」の文字がありました。Bloggerの仕様変更が絡む問題のようです。発生条件は「Blogger側の自動追加ヘッダーをコメントアウトする処理」と…
https://www.bugbugnow.net/2020/09/blogger.html

【発生条件】</head>のコメントアウトだけなら問題ないが…

ワタクシを含め、Bloggerユーザーの多くはページの表示速度を上げるために、ソースコードから

</head> or <head/>

をコメントアウトして「追加ヘッダー」が自動挿入されないようにする措置を施しているかと思われます。
自動追加ヘッダーを除外する措置
</head>をコメントアウトする措置

ところが、この措置を施した状態で、管理画面の「収益」タブで「ADSENSEをリンク」のボタンを押してしまうと、何故かAdSense用のコードがコメントアウトされた状態で自動追加ヘッダー内に強制挿入されてしまいます。
Blogger 管理画面 収益タブ
管理画面の収益タブ
↓
収益タブ AdSenseとのリンクボタン
AdSenseとのリンクボタン
↓
収益タブ AdSenseとの接続が完了した状態
AdSenseとの接続が完了した状態
↓
二重の</head>に挟まれた部分が画面に表示される

コメントアウト状態のAdSenseコードが強制挿入された結果、もう一つ余分に発生した</head>に挟まれた部分が画面に表示されてしまう…というのが、問題の全容です。

【対策】空のコメントアウトを差し込む

この問題の対策として、先述のtoshiさんのブログ記事では、問題の箇所を下記のコードに置き換える提案をしています。

&lt;!--</head>&lt;!-- --&gt;

引用
元々のコードは、正規の</head>をコメントアウトして、偽物の&lt;/head&gt;で<head>を閉じていました。

新規のコードは、通常の場合、正規の</head>をコメントアウトして、</head>を省略します。2重コメントとなった場合、正規の</head>と&lt;!-- --&gt;（空のコメントアウト）として動作します。

ただし、上記のコードに差し替えた場合、画面に「-->」が表示される事は無くなりますが、二重コメントになる事は変わらない為、W3Cのチェッカーではエラーになるとの事です。

【別の対策】非表示の<textarea>で囲う

ところが、この問題、ワタクシが保有するブログの中でも、海外製のテンプレートを適用しているものに関しては発生していないなぁ…という事に気づき、改めてソースコードを確認してみました。

すると、下記のように</head> or <head/>を非表示の<textarea>（サイト内検索などで使われる文字入力用の窓）タグで囲っているという事が判明しました。
非表示の<textarea>で</head>を囲っている

非表示の<textarea>で問題の箇所を囲っている。

上記ソースの、HTML編集画面での記述。 
<textarea readonly disabled style='display:none'>
<!--<head/>-->
</textarea>

上記の方法であれば、コメントアウトタグの開始（<!--）と終了（-->）の位置と数が完全に噛み合いますので、前述のW3Cのチェッカーでもエラーにはなりません。

また、上記の方法だと本来の</head>が結局は省略される形となるので、「それはそれで、エラーにならないの？」と思われるかもしれませんが、前述のtoshi氏の当該記事で、

※HTML5では、</head>は、条件を満たせば省略することが可能です。

との説明がありますので、これにて本件は収束するものと思われます。

QooQ