この際だから公式プラグインのhtmlを書き直してしまうのだ

はじめに

公式プラグインで これは書き直したほうが良いだろうなぁ… と感じでいるもののみ抜粋します。htmlを変更しますので、必要のある方、管理できると自己判断できる方のみおすすめ。
*共有プラグインへの言及は一切ありませんので、ご質問等もご遠慮くださいね。

FC2ブログの歴史は10年を超えていますので、当然その当時からあったプラグインについては 内容が古い 場合が多いです。現在では廃止されて「使ってはいけない」とされる手法などもそのまま残っています。それらをまとめて片付けようじゃないか、と。

そうは言っても、廃止されたhtml属性などはブラウザが後方互換の原則を守ってくれる限り、よほどデザインが崩れるといったことはありませんので、難しいなぁ、と感じる場合には無理に行う必要はありません。

あとは一時的にエラーが生じてしまったプラグインなどもありますので(既に解消済みです)、そちらの情報も掲載します。該当しているかどうかは自身で判断できると思いますのでチェックしてみてください。

そしてプラグインには「位置指定」を簡単に行える工夫がされていますが、何でもそれに従うわけではないので、「どうしても位置合わせが希望通りにいかないんだ」と悩みそうなものについても言及します。簡単に言うと「更新通知ボタン」が該当です。

修正の前に注意点「スタイルの記載」

バリデートが気になる方は <style> から </style> までの内容をテンプレートスタイルシートのプラグイン関連内容よりも「前」に記載してください。その際にはstyleタグを取り除いてください。
また、この方法を取る場合にはテンプレート変更時にスタイルの移植必須です。

この処理はプラグインhtml内にstyle要素があるとエラー(許可されない)になるためです。とはいえほとんどのプラグインがこの形式、つまりhtml + style要素による装飾 という形なので、ある特定のプラグインだけ気にしても仕方がありません(笑)
全ての利用プラグインでhtmlとスタイル(CSS)を分離させるか、逆に全プラグインでこのエラーを容認するかのいずれかになるかと思います。なので他のプラグインも気を使っている、という方はスタイルのみスタイルシートへ移されることをおすすめします。また、 この注意は本記事で言及されるstyle要素を含む全てのプラグインに適用されます。

また、スタイルシート内での記述位置は プラグイン関連スタイルよりも「前(先)」です。弊テンプレートの場合は official plug-in あるいは 公式プラグイン と目印を入れてありますので、それよりも先に記載。この記載順序を守らないと、テンプレートでのプラグイン関連スタイル指定は デフォルト内容に対する上書き(再装飾)を想定している ので、想定通りのスタイリングにならなくなってしまいます。
* CSSは後に記されている内容が前に記される内容を上書きする仕組みです。

テンプレート変更時の移植がめんどう、忘れそう、という方は以下の記事を参照してJSでスタイルを適用させる方法を検討してください。

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

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

vanillaice000.blog.fc2.com

更新通知ボタン

デフォルトの状態はこうですよね。

そしてプラグインの設定は以下のように対応しています。

仮に文章とボタンを中央に合わせたいとします。以下が理想の表示形態。

タイトルとコンテンツ共に位置変更したい、ということで設定の①と②をそれぞれ 中央合わせ に変更してみると…

①の「タイトル」は中央になりましたが、②の「コンテンツ」の方は 指定が効いていません。ここで位置の指定を行っても、更新通知プラグインについては「コンテンツ」である文章もボタンも中央に寄ってはくれないんですね。

仕組みを簡単に説明すると、「コンテンツの文字設定」で「中央」あるいは「右」を指定すると、text-align: center(or right) というのがhtmlに追加されます。けれどもこの text-align というプロパティはなんでもかんでも位置を操作できるわけではないんですね。詳細はhtml講座になってしまうので今回は省きますが、更新通知プラグインの特性上(iframe)、通常での(設定での)操作は効力がありません。

個人的には「別に左寄りでも… (´・ｪ・｀)」と思ったりしますが、こだわりは人それぞれ。特に画像なんかを中央にしたり、見た目をきれいに整えている人はここだけ左というのは納得いかないだろうと思います。

更新通知 おすすめ修正

本来はJavaScriptでもってiframe要素を形成、という方式なんですが(理解が困難な方は特に考えなくてOKです)、iframeは原則外部からのスタイル変更を受け付けませんので、この際ごっそり書き直します。

<style>
/* 更新通知プラグイン */
.notification_btn {
  text-align: center;/* ボタンの位置合わせ */
  margin: 10px 0 0;
}
.fc2_user_update_notification_btn {
  background: #fafafa;
  border: 1px solid #e2e2e2;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
  color: #4d4d4d;
  display: inline-block;
  font-size: 14px;
  padding: 0.5rem 0.8rem;
  white-space: nowrap;
  text-decoration: none !important;
}
.fc2_user_update_notification_btn:hover {
  text-decoration: none !important;
}
.fc2_user_update_notification_btn img {
  vertical-align: middle;
}
/* 更新通知プラグインここまで */
</style>

<div &align>更新通知で新しい記事をいち早くお届けします</div>
<div class="notification_btn">
  <a class="fc2_user_update_notification_btn" href="javascript:window.open('https://blog.fc2.com/notification/manage/confirmsubs?id=<%blog_id>', 'mywindow1', 'width=640, height=565, menubar=no, toolbar=no, scrollbars=yes');"><img src="https://static.fc2.com/image/ja/user_update_notification/user_notification_btn_icon.svg" width="12" height="15"> 通知を受け取る</a>
</div>

プロフィール

デフォルトでは プロフィール文のアウトラインが p要素 で形成されている んですが、p要素でのマークアップは危険。何故ならFC2ブログのプロフィール文は htmlの利用が許可されている からです。

p要素は入れ子できる要素がかなり限定されていますので、うっかりルールに反してしまうことがあります。p要素の構文エラーは見た目に影響しやすいので div要素 への変更をおすすめします。プロフィール文設定(作成)時にhtmlを利用していない、という場合は編集の必要はありません。

プロフィール おすすめ修正

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

カレンダー

カレンダーの装飾についてはテンプレート作者に一任されているというか、基本スタイル設定が含まれていません。また、廃止属性てんこもり です。table要素 というのはソースコードの見た目が煩雑で管理しづらく、エラー指摘時などに「わけがわらかない」と混乱しやすい要素と言えます。

更新通知プラグイン同様、設定での位置指定は効きませんので取り除いてあります(意味が無いため)
大抵の場合はテンプレート側でカレンダーのtable全体が中央に位置するよう調整されていることが多いと思いますが、作者による調整が無い場合に備えて予め中央に寄せるようにしています。その他細かいスタイリングはテンプレート作者に「スタイリングしてください (´;ｪ;`)」とお願いしましょう(それか自力で)

あと注意点は、構文内に id属性 を含んでいますので、重複掲載NGです。カレンダーを2つ3つ掲載する人は居ないだろうと思いますが念の為。
* デフォルト・修正 共に重複NG

また、カレンダーは前後月へのリンクが表示され、ブログ開設以前の年月日 や まだ訪れていない未来の年月日 のページまで生成されてしまいますので、前後リンクへは rel="nofollow" の追加を推奨。
* ただし現在での nofollow はクローラーに対する「指示」ではなく「ヒント」として扱われます

カレンダー おすすめ修正

<div class="plugin-calender">
  <table class="calender" style="margin: auto;">
    <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>

カテゴリ

カテゴリ一覧を表示するプラグインは2種あって

1. カテゴリ --- div要素
2. カテゴリ(カスタマイズ向け) --- ul要素

といった違いがありますが、今回は①の方。div要素 のマークアップである上、各プラグインを識別する class属性 または id属性 を持ちませんので、テンプレート作者側でのスタイリングが非常に厳しい、といった状態です。公式プラグインは全て識別子を付けて欲しい んですが無いものは無いので各個人で対処。

識別のために class="plugin-category" を追加していますが、このclassがあるかどうかはテンプレート作者にはわかりませんので、個人のカスタマイズ用に付加していると考えてください。なので公式プラグインはデフォルトでclass付与して欲しいですよね。デフォルトなら全ユーザー共通になるわけなので (´・ｪ・｀)

で、恐らく他のプラグインと比べて「行間が詰まっているなぁ」と感じるのではないかと思います。その場合に備えてstyle要素を入れましたが、不要と思われる場合は削除してください。style要素ではなく style属性 できそうな雰囲気がありますが実際には設定による位置指定を有効にしておきたいのならばできません。設定を無効にしても良い、という場合には &align を削除した上で style="margin-bottom: 8px;" など、marginで行間を設けると良いでしょう。リンク要素の距離・行間が近すぎるとLighthouseで警告を受けますので、気になる方はmarginを取った方が良いと思います。実際モバイルでリンクが近すぎると押しづらいですしね。

&align が付与されている同じ要素に style属性 を追加しても無効化されるため共存不可。これはstyle属性の重複を防ぐためのシステムのはずです。

カテゴリ おすすめ修正

<style>
/* カテゴリプラグイン */
.plugin-category > div {
  margin-bottom: 8px;
}
/* カテゴリプラグインここまで */
</style>

<div class="plugin-category">
  <!--category-->
  <div &align>
    <!--category_sub_hasnext-->┣&nbsp;<!--/category_sub_hasnext-->
    <!--category_sub_end-->┗&nbsp;<!--/category_sub_end-->
    <a href="<%category_link>" title="<%category_name>"><%category_name> (<%category_count>)</a>
  </div>
  <!--/category-->
</div>

ユーザータグ

こちらのプラグインは一時期バリデートエラーを発症させていました。

【修正済】公式プラグイン「タグ」の仕様変更について

不明点が多く「絶対」と言い切れず。そして私の日本語力の限界にもチャレンジだ！な記事でございます。うまく説明する自信がない… （￣∀￣；）...

vanillaice000.blog.fc2.com

既に運営サイドによる修正が入っていますが、たまたまこの時期にタグプラグインをダウンロードしてしまった場合はエラーが引き継がれたままなので、自主的な再DLが必要です。

ソースコードの書き出しが

<p class="plugin-tag" style="word-break:break-word;" &align>

になっている場合が対象なので、自身が当てはまるかどうかチェックされると良いですね。再DLで新しいコードを取得できたら特にそれ以上の修正は必要ありません。

現在ではこの事態を学びとして先程お伝えしたように &align と style属性 の共存不可(style属性が無効化される)、というシステムに改正されています。

まとめ

今回の修正の主旨なんですが、致命的なエラーを察知しやすくするため です。何か表示不備・不具合が生じた再にはバリデータにかける(htmlの正当性を検査する)というのが主な方法になります。けれどもその際に別のエラーが混ざっていると原因の特定が非常に困難になります。やれ「廃止属性が〜」やれ「重複が〜」というエラー項目が作業の邪魔をするんですね。

プラグインについては何度も繰り返しになりますけれど「html + スタイリング」がセットになっており、それ自体もエラー項目に挙がってきます。でも同じ内容のエラーであるため除外項目に含めることができ、バラバラのエラーが存在するよりはよほどマシというか (´・ω・｀)

初心者さんほどエラーの特定は難しいはずで、有識者であっても例えば100も200も存在するエラーの中から特定のクリティカルなのを探し出すのは厳しいです。プラグインの場合は 一度修正してしまえばそれで済む ので、この機会に思い切って修正されると良いと思います :)

運営スタッフ様には 今後新規でプラグインを提供される際には class あるいは id による識別を可能に して頂けると本当にありがたい(笑)