BloggerのHTML編集でエラーを起こさないための注意点

自分の写真結城永人 -

Bloggerは非常に古いWebサービスのせいか、ブログのテンプレートのファイルがXMLだから独自タグによる基本構造を踏まえてHTMLで編集可能な場所を選んでも普通のマークアップではエラーになってサーバーに保存できなくなるかも知れない。

梯子を登りながら女性が上を見上げている

カスタマイズでhead内にWebフォントのGoogle Fontsをlinkタグで読み込む場合を例として起こり易いエラーと修正法を掲載する。

XMLファイルでありがちな三つのエラー

BloggerでGoogle Fontsのlinkタグを使う場合は管理画面のHTML編集かバックアップと元に戻すでテンプレートのソースコードのhead内などに記載することになる。

<head>
(中略)
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" rel="stylesheet">
(中略)
</head>

Google Fontsで取得できるNoto Sans JapaneseのRegular 400の外部ファイルのソースコードのlinkタグは三つあるけど、しかしBloggerのテンプレートに記載すると全てエラーになってサーバーに保存できなくて使えない。

エラー①HTML要素の終了タグがない

BloggerのXMLファイルではHTML要素の終了タグが必須になっている。

大丈夫なマークアップ

<link rel="preconnect" href="https://fonts.googleapis.com"/>

linkタグのように中身がないHTML要素ならば開始タグの最後の半角山括弧(>)の直前に半角スラッシュ(/)を記載すると終了タグとして扱われる。

因みに中身があるHTML要素ならば<div>中身</div>のような開始タグと終了タグか二つに分かれたマークアップになる。

linkタグなどの中身がないものに終了タグを分けて付けても構わない。

HTML5以降ではHTMLファイルだと逆に中身がないのが当たり前の一部の要素に終了タグを全く付けないマークアップが正しいから混同してはならない。

参考:【初心者でもわかる】HTML(HTML5)で閉じタグがいらない要素の一覧

エラー②HTML要素の属性の値がない

HTML要素に追加される属性には必ず値を入力する。

大丈夫なマークアップ

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="crossorigin"/>

※元のコードからは終了タグも追加済み。

値がない属性は属性名を値に入れて記載する。XMLファイルはHTMLよりも厳格だからマークアップの省略はできない。属性に値がない場合はないものとしてあるものと同じように扱う。

参考:XML文書の文法が厳格な理由

エラー③一部の予約語が含まれている

予約語というマークアップの指定に割り当てられた記号の多くはBloggerのはXMLファイルで自動的にエスケープされてソースコードにエラーを起こさないけれども一部のものが残ってしまうようだ。

Bloggerのテンプレートの基本構造でHTMLを記載てきる領域ならばおよそ大丈夫なんだけれどもどうも半角アンパサンド(&)だけはどこでも自動的にエスケープされずにエラーを引き起こすようだ。

大丈夫なマークアップ

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&amp;display=swap" rel="stylesheet"/>

※元のコードからは終了タグも追加済み。

エスケープは実体参照に変える。

半角アンパサンドの「&」は「&amp;」と置き換えて記載する。

記事/追加ページの投稿のHTMLビューで画像の前に「&」を記載するとインデックスページや人気の投稿のスニペットのサムネイルが取得できなくなるけど、やはりエスケープで改善できる。

もう一つの作成ビューでは自動的に実体参照の「&amp;」に置き換えられるから大丈夫なんだ。

その他、タグ付けの半角山括弧(<>)を片方だけ使うと適切な場所でもエスケープされず、エラーになるから「&lt;」(<)か「&gt;」(>)に置き換える必要がある。

JavaScriptの比較演算子の「<」か「>」やアロー関数の「=>」が良く引っかかる。

参考:XMLでのエスケープ処理 (テキスト要素の値に""", "\", 改行 を含める場合の処理)

BloggerではCSSのstyle内のマークアップかJavaScriptのscript内のプログラムをそれ自体でXMLファイルの解析から除外することもできる。

style内を普通に使用する

<style>
/* <![CDATA[ */
CSSのマークアップ
/* ]]> */
</style>

script内を普通に使用する

<script>
// <![CDATA[
JavaScriptのプログラム
// ]]>
</script>

どちらもXMLファイルで通常の文字の記載するためのCDATAセクション(<![[CDATA]]>)をコメントアウトして使っている。

予約語が、そのまま、使えるので、CSSやJavaScriptのソースコードがBloggerで自動的にエスケープされた実体参照が増えて後から見辛くなることがない。

ただしCDATAセクションでは独自タグが使えなくなるからソースコードに独自タグが必要ならば外さなくてはならない。

参考:La balise CDATA/The CDATA tag: <![CDATA[...]]>

BloggerのXMLファイルのエラーは管理画面のHTML編集だとソースコードのミスと同じように表示されるけれどもバックアップと元に戻すだと只単に保存できなくなって何が原因かと混乱せざるを得ないから覚えておかなくてはならない。

コメント