表示がおかしい時はバリデートを行いましょう

表示がおかしい時はバリデートを行いましょう

カスタマイズ HTML, CSS, JavaScript
2019/02/17
4
vanillaice (Akira)
vanillaice (Akira)
初心者向けHTMLトラブル対処Validation

例えば カラムが崩れている、例えば フリーズが起こる など。

原因はいろいろありますが、最も多いのは htmlシンタックスエラー(構文エラー) です。

構文エラーの悪影響

テンプレートのせいにしたくなりますけれど、実際には みなさんが書いた記事内容みなさんが任意追加したプラグイン(フリーエリア含む) などに起因していることがほとんどです。今回の説明も他者製作テンプレートへの言及はありません。私が製作したものに限ります。

htmlの知識が無い方が原因を探すというのはそもそもが無理な話ですから、バリデート(検証)にかけてください。自身ページに構文エラーが有るか無いかだけでも即座にわかります。

私のテンプレートはhtml validを謳っていますので、プラグイン内容・ユーザーの任意追加html・記事内容 にエラーが無ければ以下のような表示になるはずです。

検証テンプレートは「Belong」です。Nu HTML Checkerの下の方に緑色のバーが出ていますよね。検証ページ内にhtmlエラーが一つも無い場合のみ Document checking completed. No errors or warnings to show. と表示されます。

で、私のテンプレートは要約・全文問わずトップページではこの状態になっているはずなので、検証した際にエラーがある場合は

  • プラグイン
  • 自身でテンプレートに追加したhtml
  • 自身が書いた記事内容 (全文タイプの場合)

このいずれかです。特に 全文表示タイプテンプレート はユーザーが記事内に書いたhtmlがそっくりそのままトップページに出てきますので、テンプレートがいくら完全valid(正当)だとしてもみなさん自身の内容によってvalidではなくなってしまいます。

html構文のエラーはクリティカル(致命的)なものであった場合には フリーズなど 閲覧が著しく困難な状態に陥ることもあります。

検証手順

バリデータ用ブックマークレットを登録

以下のページ内にある「W3C validation」をブックマーク登録してください。

ブログ作成に役立つブックマークレット

ブログ作成に役立つブックマークレット

FC2ブログで記事を書く際に 役立つかもしれない、という条件付きです。 特に 旧投稿画面を利用し、htmlを使うことが多い 方向けです。 他の方が製作したものについてはここでの二次配布は致しません。ご紹介するだけです。 リンクを掲載しますので直接赴き、提供者様の規約・ルールに則ってご利用ください。...

検証はまずトップページで行います。要約タイプテンプレートの場合は原因はプラグインで確定 です。
要約タイプは個人の記事内容を検証できませんので、個別記事は各ページで改めて行うようにしてください。

全文タイプテンプレートの場合はプラグインか記事内容のいずれか です。
仮に100を超えるような大量のエラーが出ている場合には恐らく記事内容です。修正が無理だと思われましたら一時的に要約タイプに変更をしてください。個別記事をコツコツと修正し、その後全文に戻すなりご検討ください。個人の記事内容をテンプレートでどうこうする、といったことはできませんので地道に修正するしかありません。それか要約に変更。要約トップの場合は個別記事にエラーがあってもテンプレートさえ綺麗ならばvalidの状態を保てます。

プラグインを全て非表示に

バリデートでエラーの有無がわかりましたら、一旦全てのプラグインを非表示にしてください。その状態で同じページを再検証し、エラーの増減を確認します。エラーが全て解消されればプラグインに集中すれば良いのですが、そうではない場合は 原因が個別記事にもあると確定 します。

黄色のwarningと赤のerrorとが出てくると思います。黄色はとりあえずスルーで構いません。赤のerrorに意識を集中してください。

「Use CSS instead」は後回しで良い

warning, errorの別に関わらず、指摘内容の末尾に Use CSS instead とあるものについてはすぐに解決する必要はありません。これは「いつまでも廃止された要素を使うな。ある日突然ブラウザサポートが終了しても知らんぞ」という意味で、要するに「時代遅れのhtml」を指摘しています。こちらについては「今後は正しく書く」ぐらいで良いです。

最優先事項

  • script関連エラー
  • End tag xxx seen, but there were open elements.
  • Unclosed element xxx

ページ自体がアクセス不能になるほどひどい状態になる場合には JavaScript 関連エラーの可能性があります。修正困難と判断出来る場合にはページ内から排除するようにしてください。

htmlエラーの詳細については以下の記事を参考に。

W3C validatorのエラーの説明

W3C validatorのエラーの説明

html構文をチェックすることができる W3C validator W3Cというのはweb技術の標準化を制定する非営利団体で、日本では慶應義塾大学がホストを担っています。その団体が提供しているのがW3C validatorというツールです。 構文チェックは他にもLintなどがありますが、個人的にLintは信用していませんのでここでは紹介しません(笑) 実際に検証を行ってみると様々な指摘を受けることがあります。 html構文は 英語 ですし、...

さいごに

htmlを直さないことにはテンプレートを変えようとどうしようと改善されることはありません。ただし全文タイプで苦しんでいる場合には要約タイプに変更するだけで「表面上は」解決することもあります。トップページにプラグインが表示されないタイプ(サイドメニューが無い など)であればなおさら。

これまで書き溜めてきた記事全てが修正対象になってしまうこともあります。ミスが含まれる内容を慣習的にコピペで使いまわしたりするとそうなりますね。ですから 記事内でhtmlを利用する時はほんの僅かな内容であっても投稿前に必ずバリデートにかける ぐらいの気持ちで。ひどく面倒のように思っても、後々大量エラーを修正するはめになるよりはずっと良いですよね。

エラーを防ぐ・修正を楽にするためのtipsもご参照ください。

FC2ブログのレイアウトが崩れた時に試すこと

FC2ブログのレイアウトが崩れた時に試すこと

なんか知らんがレイアウト崩れてしもたがな となった時にですね、んもーテンパっちゃって何したら良いかわかんない! な状態に陥る方が多いわけなんですよ(笑) 何から手をつけたら良いかさえわからん、ってやつ。 そういう時は慌てず騒がず、とりまコーヒーでも飲んで一息入れまして。 そのまま忘却の彼方へ… となってはいけませんが、落ち着いた頃に以下のような対処法を試されてはいかがでしょうか。...

レイアウトを崩してしまうhtmlの凡ミスいろいろ

レイアウトを崩してしまうhtmlの凡ミスいろいろ

凡ミスなんですよ (´・ω・`) 凡とはいえ、htmlでは 記号ひとつ打ち間違えても内容が狂ってしまう んですね。 そんな凡ミスのよく見かけるパターンを挙げてみようと思います。 htmlのありがちなミスには 入れ子のミス (開始タグと終了タグの 位置 間違い) タグの閉じ忘れ (開始タグに対応する終了タグが 欠損) 開始タグと終了タグの数が違う (一部の空要素以外は 開始タグと終了タグの数が一致している必要あり) ...

顔文字がレイアウトに悪影響を与えることがあります【FC2ブログ旧投稿画面】

顔文字がレイアウトに悪影響を与えることがあります【FC2ブログ旧投稿画面】

「FC2ブログの旧投稿画面では」という括りつき。 2017年10月現在、FC2ブログで記事を書くには2種類のエディターを選べます。 旧投稿画面 新投稿画面 旧投稿画面(旧エディター)というのは htmlタグを直接受け付けるエディター です。 つまり「htmlエディター」なんですね (´・ω・`) 一方、新投稿画面の方は htmlを直接は受け付けないエディター。 こういうのを「WYSIWYG(ウィジウィグ)」と言います。...

htmlの絶対的NGそれは「全角の利用」

htmlの絶対的NGそれは「全角の利用」

やっぱりすごく多いんですね。うっかり全角を利用して全てが台無しになっている というケース。 母国語が日本語の場合は普段からキーボードが「ひらがな」の状態になっているのではないかと思います。 htmlを操作する際にはまず最初に「半角英数字」にキーボードを変換する ことを癖づけされると良いと思います。...

クラス名をつけることの重要性

クラス名をつけることの重要性

記事内でhtmlをよく利用する、という方は、その要素にクラス名を書く というのを癖づけされた方が良いと思います。 つまり本記事内容は クラス名付与のススメ ( ゚Д゚)ノ...

Related post

Comments  4

hige
2019/02/17 (Sun) 22:55

エディターのVisual Studio CodeだとW3Cのバリデーターが内蔵できて、リアルタイムのチェックができてめっちゃ便利です。
https://haniwaman.com/vdcode-w3c/
で、https://blgid1974.blog.fc2.com/blog-entry-1396.html なんて紹介記事も書きました。

エディターって解って嵌まってしまうともう手離せないです。
記事を書くのも捗るし、書いてるのが楽しい時もあります。
あと、CSSを色々試したりできるし。
そこそこ、HTML/CSSに嵌まってしまった人には強くお勧めです。
なんどもコメントしてますが
FC2ブログのテンプレをカスタマイズしたり、記事をデザインしたい方は、専用エディターが必須です。
私は Visual Studio Editor を強くお勧め。

私は MS の回し者です。(^_^)v

サイドカラムがいつもと違う所に行ってしまったとか、いつもと違う表示になってるとか、プレビューや投稿後の画面の確認は必須の作業だと思います。

 

vanillaice (Akira)
Akira
2019/02/19 (Tue) 15:14

To higeさん

higeさん、こんにちは ('0')/

記事をテキストエディターで書く、というのはちょっと難しいかもしれませんね。初心者の方はツールバーに頼っている方がほとんどだと思います。
ただテンプレートのカスタマイズはもう絶対にエディターに移して行って欲しいですね、長大なhtmlをブラウザ画面上で触る事自体が無理筋なので(笑)

vanillaice (Akira)
Akira
2019/02/19 (Tue) 15:33

To くぅさん(移動先)

「iPhoneでフリーズする件」

errorとwarningの合計が757、errorだけで390あります。これはもうなんとかしないと、というレベルです。
フリーズの原因がある特定の「何か」なのか、総合的なものなのかの判断にかなり時間かかると思いますのでまた追記します。少しづつ書き足していきます。

-----
・httpsが不正
テンプレート内にある http スキームを全て https に変更されているのではないでしょうか。
テンプレート内に http のまま残してあるものは書き換えしないようにしてください。デフォルトテンプレート内にSSLの害になるものは含まれていません。

×
https://www.w3.org/2000/svg

http://www.w3.org/2000/svg

これはxmlを利用する宣言であってアクセスが行われるわけではありませんのでスキーム変更不可です。他にもhttpスキームを含むURLが存在しますが、いずれも書き換え不可なのでご注意ください。
行う作業 --- https を http に修正。クリティカルエラー

-----
属性間のスペースが欠落しています。

×
bnr.gif"alt="FC2ブログランキング

bnr.gif" alt="FC2ブログランキング

クリティカルではありませんが各記事ごとでなくテンプレートに記しているということなので修正容易なはずですから今のうちに。

-----
ランキングバナーの貼り付け位置と内容が不正

×
<!--/more_link-->
<!--/●●fc2ブログランキング投票ボタン-->
<a href="アドレス" target="_blank"><img src="画像アドレス"alt="FC2ブログランキング投票ボタン" style="border:0px;"></a> <b> ←</b> ポチッ!よろしく(*^ー^)/ <b>=</b> 日記-写真日記 で何位?
<BR><BR>
<!--/●●人気ページランキング/ここまで-->
<!--more-->


<%topentry_body>
<!-- ブログランキングここから -->
<a href="アドレス" target="_blank"><img src="画像アドレス" alt="FC2ブログランキング投票ボタン" style="border:0;"></a> <span style="font-weight: bold;">←</span>ポチッ!よろしく(*^ー^)/ <span style="font-weight: bold;">=</span> 日記-写真日記 で何位?
<br><br>
<!-- ブログランキングここまで -->
<!--more_link-->

機種依存文字は例えコメントアウトであってもおすすめしません。
また、コメントアウト内の装飾的 /(スラッシュ) の利用もおすすめしません。
コメントは内容理解のために使用しますので、後で自分や第三者が見た時に意味がすぐにわかるように書くようにしてください。

<!--more_link-->というのは「追記」の利用がある場合に表示させる(主に「続きを読む」のリンクなど)のに使います。
くぅさんの場合は追記を利用していませんので<%topentry_body>の直下に記すようにしてください。

-----
プラグイン内「プロフィール」のhtmlが不正

×
<p class="plugin-myimage" style="text-align:left">
<img src="画像アドレス" alt="くぅ">
</p>
<p style="text-align:left">
■  プロフィールは→<A href="アドレス" target="_blank"> <u><strong>「ここ」</strong></u> ←をclick</font></A><br />■  FC2ブログランキング(写真日記)参加中<br /><a href="アドレス" target="_blank"><img src="画像アドレス"alt="FC2ブログランキング投票ボタン" style="border:0px;"></a> ← ポチッ!
</p>


<p class="plugin-myimage" style="text-align:left">
<img src="画像アドレス" alt="くぅ">
</p>
<p style="text-align:left">
■  プロフィールは→<a href="アドレス" target="_blank"> <span style="font-weight: bold; text-decoration: underline;">「ここ」</span></a> ←をclick<br>
■  FC2ブログランキング(写真日記)参加中<br>
<a href="アドレス" target="_blank"><img src="画像アドレス" alt="FC2ブログランキング投票ボタン" style="border:0;"></a> ← ポチッ!
</p>

属性間スペースの有無(alt属性の前)に注意。htmlに大文字アルファベットは利用しない。
この内容のクリティカルエラーは </font> です。対応する開始タグが存在あしませんので以降の内容にも影響しています。

-----
「最近の記事+コメント」プラグイン内容

あまり言いたくはありませんが使用を辞められた方が良いと思います。
現在のweb標準ではscript要素のcharset属性にeuc-jpを指定することは許可されていません。指定可能なのはutf-8のみです(デフォルト値なので省略可能)
そもそもsrc属性の無いscript要素へのchaset属性指定自体が不正です。

×
<script type="text/javascript" charset="euc-jp">

<script src="xxxx.js"></script>
または
<script>JS内容</script>

このエラーが量産されています。解決するにはプラグイン内容を修正する必要があります。
(私の著作物ではありませんので改変のお手伝いは致しません)

-----
プラグイン「全記事タイトル」の内容が不正

×
<div style="height:80px; overflow:auto; border:0px solid #cccccc; padding:3px; "><A href="アドレス" target="_blank"> ■ 全記事タイトル一覧 ■ </A>←click <br>
*クリックすると「全記事一覧」へ移動します<br>
*表示も速いですよ<br>


<div style="height: 80px; overflow: auto; padding: 3px;">
<a href="拡張子前アドレス.html" target="_blank">■ 全記事タイトル一覧 ■ </a>←click<br>
*クリックすると「全記事一覧」へ移動します<br>
*表示も速いですよ
</div>

border:0px solid #cccccc の指定がありますが、border-widthの指定が0値なのでstyle, colorの指定に意味がありません。borderが不要ならばborder指定自体不要、borderが必要ならば太さを0以上の値に変更。
例) border: 1px solid #cccccc

終了タグが一つ足りませんので追加。
URL間違いを修正。

-----
修正すべき点はまだたくさんありますが、フリーズに関係していそうなクリティカルなものを挙げています。
一度お試しください。

くぅさんのコメント欄で表示速度についてのお話が出ていますが、遅い原因は「追記を利用していない」ことです。トップページに掲載した全ての画像が表示され、画像の遅延読み込みも行っていませんので当然遅くなります。
ページの表示速度を落とす原因は
・画像
・JS
・CSS
です。くぅさんの場合は「画像」「JS」の2項目が当てはまります。プラグインを一度見直されると良いと思います。document.write といって、本来そこに無いhtmlを書き出す手法が取られているものがあります。これは非常にスピードを遅くしますのでGoogleは「使用しないように」と警告を出しています。
そして要約タイプへの変更、全文タイプを利用するならば「追記」使用もご検討ください。

参考記事: レスポンシブにすりゃ良いってもんでもない
https://vanillaice000.blog.fc2.com/blog-entry-825.html

参考記事: もったいないなぁと思う記事の書き方【全文表示テンプレート】
https://vanillaice000.blog.fc2.com/blog-entry-783.html

スマホ専用テンプレートの変更して改善されるのは、スマホ専用版は
・プラグインが同じページに表示されない(そもそもPC版とSP版のプラグインは共通ではない)
・トップページに全文が出てこない・サムネイル画像が極小サイズである
・記事・プラグインのhtml, JSエラーがトップには反映されない
ためです。根本的な解決にはなりませんので、お考え違いのないようお伝えしておきます。

もしこの手順で解消されないのであれば、フリーズ現象を目視確認出来ている方にご面倒ですが
https://blog-imgs-111.fc2.com/v/a/n/vanillaice000/belongmin_top.html
上記リンクをクリックして頂き、Belongのデフォルト状態を確認してもらってください。
上記ページは共有しているものとhtml, CSS, JSが全て同じですから、上記ページでフリーズが起こるのであればテンプレートの内容に問題があるか、iOSのバージョン・ブラウザが関係しているかもしれません。
起こらない場合はくぅさんの個人環境(記事内容, プラグイン内容)に起因していることになります。

またスピードについても上記ページはおよそ.4秒で1秒かからないはずなのでご確認ください。画像容量最適化・追記利用・プラグインの選定次第でBelongのスペックであればこのぐらいは速くなるはずです。
よろしくお願いします。

くぅ
2019/02/19 (Tue) 20:24

感謝いたします。

ビックリです。

これだけの内容を即レスいただき、感謝の言葉しかありません。
まさかこんなに丁寧に、しかも早くお返事いただけるとは思ってもおりませんで、
呑気にしておりました。
ゴメンなさい。

ご指示どおりに訂正したつもりでおりますが、
プラグインの検討はこれからさせていただきます。
また、
リンクの参考記事は、読ませていただき、これから手直ししていきます。
とりあえず、取り急ぎお礼を申し上げます。
お返事遅くなってゴメンなさい。

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