FC2ブログ主要公式プラグインをHTML5 validに修正

投稿 2018年12月18日
0
カスタマイズ
HTMLInstructionEducation初心者向けトラブル対処

FC2ブログのテンプレートは公式・共有を問わず 様々なバージョンのhtmlやhtml以外(xhtmlなど) が混在しています ので、自身の設定テンプレートが HTML5 である、という方だけ実行してください。バージョンによってルールが違いますので、まずこの点をしっかり把握してから読んでくださいね。
(私がリリースしているテンプレートは全てhtml5です)

何故修正するのか、その理由

バリデーション(正当性)にこだわるべき!とかそういう意味ではないです (´・ω・`)
もちろんそれもありますが一番ではない。そんなガチガチにやったって検索上位に優遇されるわけでもないですし。

最低でもテンプレートは綺麗な状態に保っておかないと、何か起きた時に自己解決できない。
というのが理由です。

起きる「何か」とは、例えば カラム落ち、また例えば ページの一部に表示の乱れ、はたまた 表示されるべきものが表示されない表示されたくないものが表示される などなど。

例えばいきなり特定ページでカラム落ちが発生したとします。テンプレートのhtml, CSSがvalid(正統)であると知っていれば「個別記事が原因」とすぐに判断できます。
ところがテンプレートのhtmlがinvalid(不正確)であれば、もしかしたらテンプレートの方が悪さをしているかもしれないですよね。あるいは何かとの相互作用で起きているのかもしれないですし、ともかく原因の特定が困難。そうなると何から手をつけたら良いのかわからず無為に時間だけが過ぎていく、と。

ここで言う テンプレート ですが、今回は FC2プラグイン を含めます。が実際はテンプレートの内容とプラグインのそれは無関係です。テンプレートにはテンプレート専用のhtml, CSSがあり、プラグインはプラグインでまた別のhtml, CSSです。ページ内にプラグインがテンプレートに取り込まれて表示されるのは FC2独自変数 で出力しているに過ぎません。

独自変数によるプラグイン出力は、仮にそのプラグインのhtml, CSSにミスがあったとしてもそれをそのまま引き継ぎます。ですからプラグイン内容についてはテンプレート製作者の責任の範疇です。

今回はテンプレートは当然validである、と仮定して、プラグイン の方を修正しましょう、という趣旨です。そうすれば事が起きた時の原因は「記事内容」だとすぐにわかるようになりますよね。これって大事なことですよ。時間を無駄に使わないで済む(笑)

問題が生じたらすぐにバリデート

「おかしい」「変だ」と感じたらすぐに W3C validator にかけてみることです。それが解決への一番の近道。

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

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

上記記事の中にW3C validatorにすぐアクセス及び検証できるブックマークレットを掲載しています。クリックするだけで問題点を表示してくれます。

このバリデート(検証) を行った際に、繰り返しになりますがテンプレート(プラグイン含む)が不正確だとそれこそドバーっと指摘が出てくるわけですから、初心者の方だと身動き取れなくなってしまいます。「これはテンプレートのエラーなの?こっちはプラグイン?で、こっちは何?!」ともうパニック(笑)

FC2ブログの仕様上、 画像にalt属性がつかない というエラーが不可避な場合があります。だとしてもW3C validatorは 除外設定 ができるようになっていますので、message filteringを以下のように設定します。

チェックを外すことで除外されます。
テンプレートとプラグインがvalidならば エラー(赤字) はゼロになるはずですから問題特定がかなり楽になります。
(FC2の仕様上、警告(warning)は残ります)

修正した方が良いと思われるプラグイン

修正といってもほとんどの場合「ミス」ではありません。時代に合わなくなった、旧式になった、システムの都合上致し方ない、という感じです。

カレンダー

元ソース(赤がinvalid、緑が提案)

<div class="plugin-calender" &align>
  <table summary="カレンダー" class="calender">
    <caption>
      <a href="<%prev_month_link>"><%prev_month></a>
      | <%now_year>/<%now_month> | 
      <a href="<%next_month_link>"><%next_month></a>
    </caption>
    <tr>
      <th abbr="日曜日" scope="col" id="sun">日</th>
      <th abbr="月曜日" scope="col">月</th>
      <th abbr="火曜日" scope="col">火</th>
      <th abbr="水曜日" scope="col">水</th>
      <th abbr="木曜日" scope="col">木</th>
      <th abbr="金曜日" scope="col">金</th>
      <th abbr="土曜日" scope="col" id="sat">土</th>
    </tr>
    <!--calender-->
    <tr>
      <td><%calender_sun></td>
      <td><%calender_mon></td>
      <td><%calender_tue></td>
      <td><%calender_wed></td>
      <td><%calender_thu></td>
      <td><%calender_fri></td>
      <td><%calender_sat></td>
    </tr>
    <!--/calender-->
  </table>
</div>

修正(提案修正含む)

<div class="plugin-calender" &align>
  <table class="calender">
    <caption>
      <a href="<%prev_month_link>" rel="nofollow"><%prev_month></a>
      | <%now_year>/<%now_month> | 
      <a href="<%next_month_link>" rel="nofollow"><%next_month></a>
    </caption>
    <tr>
      <th scope="col" id="sun">日</th>
      <th scope="col">月</th>
      <th scope="col">火</th>
      <th scope="col">水</th>
      <th scope="col">木</th>
      <th scope="col">金</th>
      <th scope="col" id="sat">土</th>
    </tr>
    <!--calender-->
    <tr>
      <td><%calender_sun></td>
      <td><%calender_mon></td>
      <td><%calender_tue></td>
      <td><%calender_wed></td>
      <td><%calender_thu></td>
      <td><%calender_fri></td>
      <td><%calender_sat></td>
    </tr>
    <!--/calender-->
  </table>
</div>

table要素のsummary属性

table要素の summary属性廃止されていますので使えません。従って削除。旧用途は「表に何が書かれているかの概略(不可視)」でした。現在では「表は誰が見てもわかるように書け」という根本的な提案が為されています(笑)
captionで用が足りる、ということでもあります。

th要素のabbr属性

続いてth要素の abbr属性
こちらは廃止されていませんが使い方が微妙。abbrとはabbreviation(あぶれゔぃえぃしょん, 略語)のことで読んで字の如く「セルの略称」を書くものです(html的な読み方は「あばー」です)
これならまだ意味がわかる ↓

<th abbr="曜日" scope="col">月曜日</th>

略称を付ける意味がほとんど無い。そんな闇雲に付けんでも。よって削除。

前後月にrel属性の追加(提案)

理由は以下のページを参照のこと。

Google botはFC2ブログのカレンダーリンクを延々と辿ります

これね、ホントにごめんなさい。 私自身はちゃっかり対策してるんです (´・ω・`) FC2ブログのプラグイン カレンダー ですけれども、 html内容を修正し、リンクに対し rel="nofollow" を追加した方が良いと思う… というのが今回の記事内容です。...

プロフィール

元ソース(緑は提案)

<!--myimage-->
<p class="plugin-myimage" &align>
  <img src="<%image>" alt="<%author_name>" />
</p>
<!--/myimage-->
<p &align>
  Author:<%author_name><br /><%introduction2>
</p>

修正

<!--myimage-->
<p class="plugin-myimage" &align>
  <img src="<%image>" alt="<%author_name>">
</p>
<!--/myimage-->
<div &align>
  Author:<%author_name><br><%introduction2>
</div>

プロフィール文を囲うpタグ

プロフィールについては構文的に何も問題が無いのですが、文章をp要素ではなくdiv要素にしておいた方が安全です。理由は以下の記事を参照のこと(本来はプロフィール文にp要素を利用しない、という方がおすすめ)

FC2ブログのプロフィール文にhtmlを使わない方が良い理由

環境設定 プロフィール の あなたの紹介文 のことです。全てとは言いませんが、htmlはなるべく使わない方が良い、という理由と仕組みの説明です。...

改行要素・空要素の書き方

htmlでclosing shash(閉じスラッシュ)は不要です。<br /> はxhtmlの書き方であってhtmlは <br> です。同様にimg要素などのvoid element(空要素)もclosing shash不要。FC2ブログはxhmtlテンプレートもありますのでこうした処理にせざるを得ません。なので能動的に修正。
修正しなくてもエラーにはなりませんが警告はされます。

ブロマガ購読者数

元ソース(緑は提案)

<div class="plugin-blomaga-count" &align>
<p>現在<strong>&blomagacount</strong>人が購読中です</p>
<p>
<a href="/?blomaga">ブロマガ一覧を見る</a>
</p>
</div>

修正

<div class="plugin-blomaga-count" &align>
<p>現在<span style="font-weight: bold;">&blomagacount</span>人が購読中です</p>
<p>
<a href="/?blomaga">ブロマガ一覧を見る</a>
</p>
</div>

strong要素の利用

なんでstrong使うねん。strong要素は 強い意味的強調 であって太字にすることではありません。数字が強意というのはおかしいですね。できれば変えておきたいところです。

最新記事(サムネイル付)

元ソース(赤字はエラー、緑が提案)

<style type="text/css">
#fc2_recent_entry_thumb_xxxxxx{padding:0 5px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_link{display:table;table-layout:fixed;width:100%}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img,#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_text{display:table-cell;vertical-align:middle;padding:9px 0;line-height:1.4em}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img{padding:4px 0;width:84px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img img{margin: 0 9px 0 0;padding: 0;width:72px;height:72px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_text{width:100%;word-break:break-all}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_link:hover .fc2_recent_entry_thumb_img{opacity:.9}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_blogtitle,#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_date{display:block;word-wrap:break-word}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_date{font-size:.8em}
</style>
<div id="fc2_recent_entry_thumb_xxxxxx">
  <!--recent-->
    <div class="fc2_recent_entry_thumb_item" &align>
      <a class="fc2_recent_entry_thumb_link" href="<%recent_link>" title="<%recent_title>">
        <span class="fc2_recent_entry_thumb_img"><!--recent_image_72_with_alt--></span>
        <span class="fc2_recent_entry_thumb_text">
          <span class="fc2_recent_entry_thumb_blogtitle"><%recent_title></span>
          <span class="fc2_recent_entry_thumb_date">&dateformat</span>
        </span>
      </a>
    </div>
  <!--/recent-->
</div>

修正 (注意! ソース内の xxxxxx はユーザー固有文字列なので書き換え必須です)

<div id="fc2_recent_entry_thumb_xxxxxx">
  <!--recent-->
    <div class="fc2_recent_entry_thumb_item" &align>
      <a class="fc2_recent_entry_thumb_link" href="<%recent_link>" title="<%recent_title>">
        <span class="fc2_recent_entry_thumb_img"><!--recent_image_72_with_alt--></span>
        <span class="fc2_recent_entry_thumb_text">
          <span class="fc2_recent_entry_thumb_blogtitle"><%recent_title></span>
          <span class="fc2_recent_entry_thumb_date">&dateformat</span>
        </span>
      </a>
    </div>
  <!--/recent-->
</div>
#fc2_recent_entry_thumb_xxxxxx{padding:0 5px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_link{display:table;table-layout:fixed;width:100%}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img,#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_text{display:table-cell;vertical-align:middle;padding:9px 0;line-height:1.4em}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img{padding:4px 0;width:84px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_img img{margin: 0 9px 0 0;padding: 0;width:72px;height:72px}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_text{width:100%;word-break:break-all}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_link:hover .fc2_recent_entry_thumb_img{opacity:.9}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_blogtitle,#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_date{display:block;word-wrap:break-word}
#fc2_recent_entry_thumb_xxxxxx .fc2_recent_entry_thumb_date{font-size:.8em}

style要素を移動

プラグインhtmlの中にstyle要素が含まれていますがこれはエラーです。なのでhtmlはプラグインhtmlの中に、style要素はプラグインhtmlからは切り離してテンプレートのスタイルシートに移設した方が良いですね。ただしテンプレート変更時には再度移設が必要になるので忘れないようにしてください。それが煩わしい方は以下の記事を参考に。

body内のstyle要素が一定条件下で再びエラーに

head内限定だったstyle要素の記載がHTML5.2からはbody内にも書けるようになりました ということで私のその件を記事にしております。 ところがW3C validatorでbody内style要素が再びエラー対象に。その理由と解決策など。...

上記ページの方法を使う場合にはプラグインhtmlの「下」にscript要素を記載すればOKです。テンプレート変更にも左右されません。

画像のalt属性なし

html内には <!--recent_image_72_with_alt--> があり、独自変数によるalt属性付与を示唆しているように見えますが実際には付きません。新着サムネイルについてはもっと良い方法があり、altも付けられますし低解像度の画像を使う必要もなくNo image画像もCSSも自由になるのですが、非公開変数を利用するため責任が持てませんので今回は控えようと思います。
というわけで今回はalt属性の対処は無し。バリデート時にはmessage filteringを使ってください。
あーでも私の既存テンプレートで非公開変数使ってサムネイル新着をデフォルト表示(プラグイン導入なしでも表示)しているのがあったような気がします。ちょっとどのテンプレートか忘れちゃった ←

まとめ

主要プラグインの修正点を挙げてみました。もちろんテンプレート自体がvalidでないこともありますのでその場合は製作者に相談か自力で直すしか (´・ェ・`)
ともかくバリデータというのは英語ですし赤い字でたくさん指摘されれば読む前に閉じてしまう方もいらっしゃると思います(笑)
プラグインについては一度修正すれば後は何もしなくて良いわけですから、お時間のあるときにでもやってみてください。トラブル発生時には自分が楽できると思います。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

0 COMMENTS

There are no comments yet.

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)