テンプレートカスタマイズの「これはダメ！」

カスタマイズ

2020/04/29

2022/10/02 0

vanillaice (Akira)

初心者向けトラブル対処 Validation

なかなかですね head要素のミスが後を絶たないようなので再々々々々掲とかそのぐらい。

head要素のミスが多い理由

Google Analytics
アクセス解析
Twitterカード

これらを記載するのが head要素内だからです。テンプレートのデザインカスタマイズを行わない方でもこれらを導入すればそれはカスタマイズです。

FC2ブログは個人設定に「Google analyticsを入れる人は〜」「アクセス解析入れる人は〜」といった単独の項目が無いのでテンプレートhtmlに手を加えることになります。それがミスを生む原因でもあります。

目次へ戻る↑

headタグは補完が働きます

一部のhtmlタグはブラウザによる補完処理が働きます。私は日頃「p要素は実は使い方がとても難しいので終了タグは省略しない方が良い」とすすめています。

補完というのは例えば以下のようなもの。

<p>これは段落です。

上記のように記したとします。p終了タグは省略が許可されています。するとブラウザが能動的に

<p>これは段落です。</p>

こうして終了タグを追加するんですね。それが「補完」の意味です。では以下のような場合

<p>これは段落です。
<div>これは段落内のdiv要素(のつもり)です</div>
これは後続の文章です。</p>

全体がp要素、というつもりで上記のように書いたとします。ところがこれは構文エラーです。p要素内にdiv要素を入れ子することはできません。

p要素はブラウザ補完が働く、と説明しました。この構文エラーの場合もブラウザは

<p>これは段落です。
</p><div>これは段落内のdiv要素(のつもり)です</div>
これは後続の文章です。<p></p>

こうして修正してしまうんですね。何故ならこれが正しい形だからです。p終了タグよりも前にdiv開始タグが来ることは構文上あり得ないので、div開始タグの直前で「p終了タグが省略されている」と判断するためこういうことが起こります。

コーダー(htmlを書く人)がp終了タグを省略する方針かそうでないかはブラウザ側では知る由もありませんので、構文上「正しい」「当然」とされる処理を行います。

headも同じくミスがあれば補完処理が行われます。

「ミスがあれば」という言い方には語弊がありますが、まだhead要素が続いているのにも関わらずブラウザがhead要素を閉じてしまうことがある、という意味です。するとhead内にしか書いてはいけないとされる要素でもhead要素の「外」つまり </head> よりも「後」に記されているとみなされ、全てエラーとなってしまいます。そしてこの状態(headの強制終了)がFC2では非常に多いと。そゆこと (o'ω')ﾉ

目次へ戻る↑

最も多いミス「全角スペース」の利用

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
　<!-- Global site tag (gtag.js) - Google Analytics -->
　<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
　<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
  内容
</body>
</html>

テンプレートのhead内にはもっとたくさんの情報が詰まっていますが、ほぼ必須となるのは上記内容です。

緑部位はGoogle analyticsのコードです。この内容はエラーです。

ブラウザは以下のように補完を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
</head>　<!-- Global site tag (gtag.js) - Google Analytics -->
　<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
　<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
  内容
</body>
</html>

緑が補完処理されたhead終了タグ。以降赤字は全てエラー扱いです。

Stray end tag head.(head終了タグがはぐれています)
Start tag body seen but an element of the same type was already open.(bodyタグがありますが先行要素が閉じていません)
その他多岐にわたるエラー

ソースを見てもわかりづらいですが、このエラーは全角スペースが原因です。全角スペースを視覚化したものが以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
</head>■<!-- Global site tag (gtag.js) - Google Analytics -->
■<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
■<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
  内容
</body>
</html>

head要素内は全角文字(スペース)を含めてはいけないというルールですから、head内に全角スペースが混じっていることはありえないわけです。そのため補完が行われ、全角スペースの直前でhead終了タグが追加される、つまりhead要素が閉じられてしまいます。

ところが元々書いてある </head> は削除されることはありませんので浮いてしまう、つまり「はぐれてしまう」んですね。それ以降は延々とエラーを量産します。

心当たりのある方も多いのではないでしょうか。何故全角スペースを打ってしまうかというと、ソースの見た目、インデントを踏襲しようと考えるからです。htmlソースコードのインデントはプロジェクト管理ために用いるもので必須ではありませんが、付けることで入れ子の状態を可視化できるなどのメリットがあります。インデントは必ず半角スペースを用います(タブによるインデントは非推奨です)

ただし繰り返しますがインデントは必須ではありませんので、上級者以外は以下のような記載を推奨します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=xxx"></script>
<script> window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-67554690-1'); </script>
</head>
<body>
  内容
</body>
</html>

インデントは行わない。これが一番安全です。どうしてもコードの視覚にこだわりたい方はソースコードを扱う際には必ず半角英数字に切り替える癖をつけると良いですね。ただ日本語圏ではなかなか難しいかもしれません。

目次へ戻る↑

何かを追加してはいけない場所

analytics, アクセス解析, 某のコード、「head内に記してください」とされるものは全て以下の位置への掲載をおすすめします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
ここが推奨位置
</head>

</head> の直前。もう全て何もかもここで良いです。というかここにしてください(笑)

以下は掲載禁止位置を視覚化しています。

ここはダメ！
<!DOCTYPE html>
ここはダメ！
<html lang="ja">
ここはダメ！
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <title>タイトル</title>
  <link rel="stylesheet" href="./.css" media="all">
ここが推奨位置
</head>

つまり <head> よりも「前」「上」に入れては絶対にダメです。即クリティカル(致命的)構文エラーです。開始タグと終了タグの違いをしっかり認識してくださいね。とても重要なことです。開始タグは <head>、終了タグは </head> です。

このエラーを生じさせると、以降のmeta要素など全てエラーになりますのでレイアウト, OGPなどの取得情報など視覚的な影響も出ます。ところが影響が出てもみなさん自分が追加した内容ないし追加した位置が原因とはなかなか気づかないんですね。「FC2の不具合？」「テンプレート不具合？」みたいな(笑)

目次へ戻る↑

html5テンプレートは末尾のスラッシュ不要

例えばTwitterカードに必要なmeta要素は以下の通りです。

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@xxx" />

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@xxx">

赤字のにしましたが実際にはこれはエラーではありません。

自身が利用しているテンプレートが現在のweb標準である html5であると確定している場合には末尾のスラッシュ(closing slash)は不要です。これが必要なのはxhtmlやxmlであってhtmlではそもそも要りません。

OGP関連のmeta情報の末尾スラッシュ有り・無しはいずれかに統一してくれ、という仕様書を読んだ記憶があります。随分経っているので出典を探せませんし、今はどうこう言われていないかもしれませんが。いずれにしろ不要なものを書く必要はありません。FC2ブログが挿入するOGPも末尾スラッシュは付いていません。

しつこいですがTwitterカードのmeta要素も記載する位置は </head> の直前ですYO (o'ω')ﾉ

目次へ戻る↑

まとめ

よく引き起こしがちなエラーについて説明をしました。もうワケガワカラナイヨ… という状態に陥ったときにはともかくテンプレートの再ダウンロードを行ってください。そして追加する内容があれば上記説明・手順に従って慎重に行う、と。

「省略できるタグ」について少し触れ、「省略する = 補完が働く」という説明もしました。省略が許可されているタグを実際に書かない、というのは上級者向けです。上級者が何故省略を行うかというと、構文が間違っていないという確信とファイルサイズをわずかでも減らせるからで、Googleも「極力省略してほしい」という意向です。実際にページスピード検証してみると省略が意外と有効であることもわかります。

GoogleのHTML/CSS Style GuideをFC2ブログユーザー向けに解説

上級者の自覚が芽生えた方は省略の練習をされるのも良いかもしれません。他にも省略できる属性値、ダブルクォーテーションやイコールの記号を省略できるパターンなどもあります。タグの省略は厳格なルールがありますので勉強になりますしいろいろな発見があるはずです。ただしゆめゆめ初心者さんは手を出さないようにしましょう ^^;

Twitterでブログカードが表示されない、という問題が解決した直後で、問題発生中にhead内を触ってしまった方も少なくないと思います。修正のためのtipsとしてお役に立てれば幸いです。

Comments 0

コメントに関する注意事項

テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
FC2共有テンプレート一覧ご質問の前に
専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)

管理者にだけ表示を許可する