ブロガーでウェブクリップアイコン

質問

Google Bloggerでウェブクリップアイコンを挿入したいのですが、上手く出来ません。

Bloggerで、「テンプレート」　＞　「HTMLの編集」　で、<header></header>内に、<link rel="apple-touch-icon-precomposed" href="画像の保存先アドレス/アイコン名.png">を挿入しましたが、エラーが出るとともに内容が保存できません。

エラー: XML の解析中にエラーが発生しました。行 1153、列 7: The element type "link" must be terminated by the matching end-tag "</link>".

PCとモバイルの両方に挿入したいと思っています。

ファビコンは、「レイアウト」編集画面からできたのですが。

わかるかたがいらっしゃいましたら、教えて頂けますでしょうか？
よろしくお願いします。

回答No.3

ORUKA1951 · ベストアンサー

いいえ、XHTMLもXMLです。
　HTMLを、SGMLの子孫であるXMLの文法にあわせたものがXHTMLで、それもXMLです。
　HTMLは、SGMLを参考に作られましたが、SGMLでもXMLでもありません。
XMLは、すべての要素は<element attriblue="">内容</element>になります。要素名,属性名は小文字、すべての要素はかならず開始タグと終了タグで、その内容を括らなければなりません。内容のない要素は、<element attriblue="" />とすることもできます。属性値はかならず""で括らなければなりません。
HTMLは、
・要素名・属性名が大文字でも良いです。
・属性の値が一つの場合でascii文字だけのときは""で括らなくても良い
　値だけ書けば良い属性もあります。<option selected>
・内容のない要素は終了タグが不要　<br><img><link>
と随分と簡単になっています。

<link rel="apple-touch-icon-precomposed" href="[URL]">
はHTMLとしては正しいのですが、XMLでは解析エラーですので
<link rel="apple-touch-icon-precomposed" href="[URL]"></link>
または、
<link rel="apple-touch-icon-precomposed" href="[URL]" />
としなければなりません。
　ところがブラウザによると、<link rel="apple-touch-icon-precomposed" href="[URL]"></link>
　は解釈できませんので、
<link rel="apple-touch-icon-precomposed" href="[URL]" />
　が必然的に唯一の選択肢になります。
　⇒HTMLからXHTMLへ（基礎知識）( http://www.w-frontier.com/xhtml.html )

　XHTML(Extensible HyperText Markup Language)は、文法に厳格ですが、完全なXMLその代わりすべてが統一された文法になっていますから機械処理が容易です。ブラウザへの負担が取っても少ない。その負担の軽減でHTML以外のXML要素を任意に加えることも可能です。

　しかし、文法が厳密になるため、人の側からすると扱うのが難しく。「HTMLは4.01で終了、今後はXHTML」とW3Cがいくら笛や太鼓を叩いても普及が進みませんでした。そしてブラウザベンダーは、独自に新しいHTML5を策定し始めた。
　結果的に、W3Cも「難しすぎる技術は普及しない」と認めて、XMLの開発は中止して、HTML5を進めることになった。
　⇒HTML5が持つ本当の意味 － ＠IT( http://www.atmarkit.co.jp/news/200801/25/html.html )

★HTMLとXHTMLの違いは、XHTMLでページを作成するときは、必須の知識ですからしっかりと確実に身につけておきましょう。
　あちこちから、ソースだけをつまみ食いしてつぎはぎしても、応用は利きません。理系科目の勉強と同じです。基礎からコツコツと積み上げていくほうが、はるかに簡単で楽で応用が利きますよ。

お礼

再度、詳しくご説明を頂きありがとうございます！

htmlの事は、大まかにわかるのですが、XHTMLやXMLなどは知らなかったので、今回とても勉強になりました。

自分のhtmlを使用したWebサイトでは、終了タグのいらない<link>タグで問題なくウェブクリップアイコンが表示されていたので、Googleブロガーがなぜ表示できないまたエラーが出ることに理解ができなかったのですが、ORUKA1951さんが丁寧にご説明いただいたおかげで納得できました。

確かに、ブロガーで<link rel="apple-touch-icon-precomposed" href="[URL]"></link>で保存したのですが、もう一度htmlの編集を開いたら、（多分）自動で<link rel="apple-touch-icon-precomposed" href="[URL]" />に勝手に書き換わっていました。

色々と理解するために、ネットを見ていたら、ブロガーで有名なクリボウさんのブログにもこう書いてありました。
”Blogger で使われているページの書式は、正確には XHTML といいます。これは XML をうけついだ「HTML」だということなんですが、そのため XHTML 文書には XML としての宣言も必要になります。”
http://blogger.kuribo.info/2006/03/blog-post.html?m=1
（今回のウェブクリップとは関係ないトピックだったのですが、一部文章に記載されていました。）

また、HTMLとXHTM、HTML5の推移を簡潔にわかり易く書いていただきありがとうございました。確かにおっしゃるとおりだと思います。基本的な事を理解しておけば、何が間違っていたのか、もう少し検討の幅が広がっていたと思いますし、悩んでいた時間も短縮できたかと思います。

今回は、本当にありがとうございました！！！

回答No.2

ORUKA1951

XMLですから、終了タグが必要と答えが書かれている。
<link>は、<link ***** />
としなさいということ

お礼

色々実験を重ねて、これだという原因がわかりました。
まだブログを設定している段階で、一般公開にしていなかったのが主な原因のようです。ショートカットを保存しようとするとグーグルのログインの画面のスクリーンショットでブックマークが保存されるようです。
ブロガーの設定を一般公開にしたらウェブクリップアイコンが反映されました。

エラーに関してはおっしゃられるとおり、</link>で閉じることを求められていますが、ウェブクリップアイコンをのコードを挿入するとき</link>が必要なのかどうかは少し疑問が残りますが。。。

今回は、お答え頂きありがとうございました。

補足

早速の回答を頂きありがとうございます。<link/>でしょうか？<link/>で試しましたら、</link>にするようにというエラーが出たので、</link>で試しました。一応、携帯端末からウェブクリップアイコンが反映されたのが確認できたのですが、ブロガーのhtmlの編集画面では、</link>と</header>の部分が赤くハイライトされるようになってしまいました。
また、ネットで色々とウェブクリップアイコンの設定の仕方を調べたのですが、</link>で閉じる例を見なかったのですが。。。ブロガーが特殊と言うことでしょうか？

回答No.1

noname#247307

エラーメッセージに書いてある通りでしょう。<link>タグの後に、</link>タグがないからじゃないですか。

<link rel="apple-touch-icon-precomposed" href="画像の保存先アドレス/アイコン名.png"></link>

とすればいけるんじゃないですか。

お礼

色々実験を重ねて、これだという原因がわかりました。
まだブログを設定している段階で、一般公開にしていなかったのが主な原因のようです。ショートカットを保存しようとするとグーグルのログインの画面のスクリーンショットでブックマークが保存されるようです。
ブロガーの設定を一般公開にしたらウェブクリップアイコンが反映されました。

エラーに関してはおっしゃられるとおり、</link>で閉じることを求められていますが、ウェブクリップアイコンをのコードを挿入するとき</link>が必要なのかどうかは少し疑問が残りますが。。。

今回は、お答え頂きありがとうございました。

補足

早速の回答を頂きありがとうございます。また、わかりやすい説明を頂きありがとうございます。

<link/>で試しましたら、携帯端末からウェブクリップアイコンが反映されたのが確認できたのですが、ブロガーのhtmlの編集画面では、</link>と</header>の部分が赤くハイライトされるようになってしまいました。
また、ネットで色々とウェブクリップアイコンの設定の仕方を調べたのですが、</link>で閉じる例を見なかったのですが。。。ブロガーが特殊と言うことでしょうか？