attention admin about comments trackbacks you may also like

FC2ブログのテンプレート作成で複数のGoogle Fontsの読み込み時のW3Cエラーを簡単回避する方法

2020年03月30日
Topics
9
FC2ブログ テンプレート Google Fonts W3Cエラー

実は筆者、今月いっぱいで、長年続けて来たちっちゃな事業のCEO兼社長を引退して、暇待て余し高齢者になるんですが「これからはいっぱいテンプレート作成の勉強が出来るぞぉ うへへ♪」とも喜んでおります、ああ、こんなの余談過ぎますよね(笑) この段落は後日に削除するかもしれません。

またまたW3Cバリデーションエラーの記事になりますが、今回は、ちょっと特殊ぽっくてすみません(笑)

いえね、FC2ブログの「共有テンプレート作者さん」には、様々に個性的なテンプレート公開をしてくださってて、筆者はその「新着テンプレート」を、自分のブログに当ててプレビューしては「なるほどぉ、こりゃなかなか良いよねぇ むふっ♪」なんて、悦に入ることしばしばなんですが、必ずその時にはW3Cバリデーションチェックするようになったんですよね、つい最近からですけど。

今回「あっ なんだぁ、このエラーだったら簡単に回避出来るのに、何故放置しているんだろうか?」と、キョトンとしてしまう事例を見つけてしまいましたから「こうしたらそれを回避出来るよね」と言う記事を書いてみます。


このW3Cバリデーションエラーは簡単に直せる

そのエラーシーンのスクショを貼ります。

W3Cバリデーション結果の様子

このエラーをGoogle翻訳で直訳(笑)すると
エラー: 要素リンクの属性 href に対して無効な値 //fonts.googleapis.com/icon?family=Material+Icons|Cabin+Sketch&display=swap: クエリで無効な文字: |は許可されません。
こんなふうに指摘しているんですが、これは、ブログテンプレート設定で、その<head>~</head>内で「Google Fonts を複数読み込み」したい目的で記述している時に発生しているW3Cバリデーションエラーなんです。

そして、このエラーを指摘されているテンプレート作者さんご本人も、これには「自覚」なさっておられるご様子なんですが「Googleが推奨している方法で設定しているのに、W3Cではエラーってなんやねん」 W3Cって「Google>W3Cなんじゃないの?」って感覚なんでしょうか?(笑)

まぁまぁ、ちょっと落ち着きましょう。

このエラーの原因はたった1文字であること

このW3Cバリデーションエラーが指摘しているのは縦棒(笑) | ←これ1文字を指摘しているんですが、これっていろいろな呼び方があって、筆者は今までの業務柄、サーバーを直接操作するコマンドで頻繁に使って来たパイプ(パイプライン)と呼び、とても便利な縦棒(笑)でして、前後の命令(コマンド)を繋げる目的でこのパイプを挿入するんです。

筆者はこの方法でこのエラーは解消出来た

ただ、このパイプ | 文字って、HTML内で利用する時には、エンコードして %7C のように記述してあげる必要がある場合があるんですが、試しにこのエラーが出ているテンプレートをダウンロードさせて戴いて、この | をエンコードした %7C に置き換えてみましたら、やはり同エラーは消えました。

W3CバリデーションErrorやWarningが全くない時の表示

このW3Cバリデーションエラーの放置はいけませんよ

同エラーは、実行不能な致命的エラーではありませんが、こんなに簡単にこのW3Cバリデーションエラーは消せるんですから、同エラーが発生しているテンプレートの大勢の利用者さんには、エラー回避方法を是非知らしめてあげて戴きたいものですね、作者としての責任に於いて。


これがエラーの解消方法と黒板に書いた教師

この
W3Cバリデーションエラーは
エンコードしたら
直るよ


自身のブログを各種ツールで分析しましょう

スマホで正しく表示されるかテストする!
モバイル フレンドリー テスト

スマホ表示速度分析は PSI が強力です!
Google PageSpeed Insights

検索からの方はトップページへもどうぞ


関連する記事
ぼっちん
Author: ぼっちん
記事に関わらないコメントでもOKですからね~ ^^

コメント(9)

There are no comments yet.

ススム  

2020/03/30 (Mon) 22:24

驚きました

こんばんは、ぼっちんさん。
少し前の記事にあったコメント関連の警告は、私も以前から気になっていました。
でも、今回の記事で例に挙げられたGoogle Fonts関連の場合は、警告ではなくエラーですから無視できないですね。

しかも作者さんご自身が自覚していて修正しないのは、ちょっと理解に苦しみますね。
ぼっちんさんが言われるように、ユーザーさんへの責任としてエラーを修正する必要があるはずですが・・・
まさか、エラーを認めて修正するようにアナウンスするのは、プライドが許さないとかって事はないと思いますが (苦笑)

バリデートチェックに対する意識は、普段から参考にしているサイトやブログによっても変わってくると思います。
私もAkiraさんやぼっちんさんのブログをチェックしているうちに、今ではテンプレートのカスタマイズや記事を投稿した際には、当然やるべきという意識を持つことができました。

特に、あまり詳しくない初心者さんがエラーのあるテンプレートを選ぶと、そういう意識も持てなくなりそうで気の毒ですね。

-  

2020/03/30 (Mon) 22:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

ぼっちん  

2020/03/31 (Tue) 07:42
ぼっちん

To ススムさん

ススムさん、おはようございます ^^

> しかも作者さんご自身が自覚していて修正しないのは、ちょっと理解に苦しみますね。

いえいえ、Webだけを扱う知識の方は「こんな方法には気がつかない」かと思うんですよ。
ススムさんもご存知なかったかと思います。
たまたま私が普段からコマンド叩いているから、経験値として知り得た知識ってことです。

> まさか、エラーを認めて修正するようにアナウンスするのは、プライドが許さないとかって事はないと思いますが (苦笑)

いやぁ、そんなことがあったら、FC2ブログ用テンプレートを公に提供する資格なんてないんじゃありませんか?
身を引いた方かよろしいと思いますが。
あっ この同様エラーって「複数人」見ておりますから、特定個人のテンプレート提供者ってことではありません。

> 特に、あまり詳しくない初心者さんがエラーのあるテンプレートを選ぶと、そういう意識も持てなくなりそうで気の毒ですね。

そこなんですよね~ 私もこの解決策を大雑把に書きましたけど、ブログ初心者さんが「エラーすら知らない」ままにそんなテンプレートでブログライフを楽しんでおられるのを見かけると「う~ん、気の毒に」って、気持ちになるんですよね~。
やっぱり提供者ご自身で既存テンプレートの「エラー解消」のアクションを起こして戴くことしかないと思うんです。

aki  

2020/03/31 (Tue) 13:52

こんにちは。

これまた良い情報を有難うございます。m(__)m
随分昔ですが、当方素材サイトのランキング参加時、コードの中に&(アンパサンド)が有ってバリデーションでエラーになっているのに気が付き、その際に『文字実体参照の&』を使ってエラー回避してました。
例えば今回の『|』もHTMLエンコードでも良いのでしょうか?
変更できるものは使えるのでしょうか?是非知っておきたいです。(^_^)

ぼっちん  

2020/03/31 (Tue) 14:07
ぼっちん

To akiさん

akiさん、こんにちは~ ^^

(笑) その答えって、私に尋ねる前にもうテストなさってるんじゃありません?(笑)
akiさんが、そんなこと私に聞くレベルの方じゃないと思うんですよ(笑)

ご自身で見つけてくださいな、この記事って「考え方」を示しているだけの記事なんですから (≧ω≦。)プププ
「出来る人」には、私ってけっこう厳しいんです(笑)

今日は、あることでちょっと不機嫌なんです、意地悪ですみません (^_^; アハハ…

aki  

2020/03/31 (Tue) 15:39

To ぼっちんさん

いえいえ、聞くレベルなんですよ、これが…。
エンコードで文字列変更してエラーは表示されなくなっても、中身に問題は無いのかな?って思ったもので。
何処かの知識の借り物で運営しているので…いつも心配なんです。
大変失礼致しました。後で試してみます。
返信不要です。m(__)m

ぼっちん  

2020/03/31 (Tue) 16:10
ぼっちん

To akiさん

akiさん、先ほどはごめんなさいね~ ^^

人間って、けっこう自分にズルいもので、あっさり「答え=カンニング」だけを得てしまうと、ず~っとそれを「コピペ利用」してしまって「なんでそうなるの?」ってアルゴリズムは考えなくなってしまって、そこでその事象のスキルアップチャンスを自分で無くしてしまう(笑)
こんなのダメですよね。

私の場合は、コマンドで変換してしまうので「それを覚えてください」とは言えませんから、akiさんに合った方法を見つけて戴きたいと思うんです ^^
そしたら、次からはakiさんご自身で他の方に「akiさん流」で教えてあげられると思います ^^

■ 追記
ヒントを差し上げましょう、このシーンでは「URLエンコード」が必要です ^^
簡単ツールもあると思うんですけどね。

aki  

2020/04/01 (Wed) 16:18

To ぼっちんさん

ご指導有難うございます。m(__)m
エンコードにも色々有るのですね。数値や文字参照でもいけるのかなぁ?と色々疑問も湧いてきました。
|は調べるとバーティカルバーで文字参照でも出ておりましたので、どういう時にこれ・この時はこれ、みたいなのをこれから試して(勉強して)みます。
確かに、分からない事を模索するのが楽しくてテンプレート作っています。(技量無しなのでほぼ暗中模索^^;です)
情報発信有難く、楽しみにしております。

御勇退との事、お疲れ様でした。m(__)m
ご挨拶だけでもと、失礼致しました。

ぼっちん  

2020/04/01 (Wed) 17:00
ぼっちん

To akiさん

akiさん、こんばんは~ ^^

> エンコードにも色々有るのですね。数値や文字参照でもいけるのかなぁ?と色々疑問も湧いてきました。

そうなんですよね、今回の例では、エンコードしたい対象がURLの中にある | でしたから「URLエンコード」でないと処理出来ないと言う訳なんです。
つまりはそのシーンによって違いがあるんですね。

> 情報発信有難く、楽しみにしております。

いやぁ、そんなふうに前向きに受け止めてくださってありがとうございます ^^
もう古希近くなってしまって(笑)年寄りの頑固さが出てきてしまった感じで、偏屈さが鎌首をもたげてきてしまっているようで、反省しております (^_^; アハハ…

> 御勇退との事、お疲れ様でした。m(__)m

ほんとは古希までは会社引っ張るつもりではおりましたが「そろそろ時間を自由に使いたい♪」って思いも強くなって、後任に譲ることにしました。
私以外は、40代1人・以下全員30代20代のメンバー構成の在宅ワーカー(今盛んに言われているテレワーク)のサーバーアナリスト集団のちっちゃな会社です(笑)
もう私の脳みそでは、彼らを引っ張る能力はすっかり衰えましたしね(笑)

私もakiさんに負けないように、時にはakiさんに「これって、どうやって処理したら良いの?」なんて、テンプレートのコーディングを質問させて戴くかもです。
その時には、ビシバシとご教示くださいね ^^
どうぞ、よろしくお願い致します ^^

そうそう、いまとっても面白い記事を書いている最中でして、明日には更新するつもりでおります ^^