不明点が多く「絶対」と言い切れず。そして私の日本語力の限界にもチャレンジだ！な記事でございます。うまく説明する自信がない… （￣∀￣；）
本件は修正済です。詳細は以下のリンク先ページを御覧ください。
公式プラグイン「ユーザータグ」の構文エラーについて回答がありました
公式プラグイン「ユーザータグ」の新コードがhtml構文エラーですよ、という件への運営からの返信と共にhtml修正が入りました。...
公式プラグイン「タグ」の仕様変更
「いつ」行われたのか不明です。今気づいた (´・ω・｀)
これまでの 公式プラグイン「タグ」(以降は簡潔に「タグ」と表現します)のhtml内容は以下のようなものでした。
<p class="plugin-tag" &align>
<!--ctag-->
<a href="<%ctag_url>"><%ctag_name></a>
<!--/ctag-->
</p>インデントの調整だけしていますけども内容は上記の通り。緑の部位 &align は 位置揃え の設定を反映させるための独自変数です。
コンテンツの文字設定 という項目ですね。小難しいhtmlソースコードを見ることなく直感的に 位置揃え を行うための項目です。これが反映されると以下のようなhtml内容として出力されます。
<p class="plugin-tag" style="text-align="left">冒頭部分p開始タグのみを取り出して記載しています。緑部位 style="text-align="left" が &align が書き換えられた部位です。左寄せならleft、中央ならcenter、右寄せならrightとそれぞれのユーザー設定を踏襲します。デフォルトは left です。
で、いつ変更になったかわかりませんが以下のようなhtmlに修正されています。
<p class="plugin-tag" style="word-break:break-word;" &align>
<!--ctag-->
<a href="<%ctag_url>" style="display:inline-block;"><%ctag_name></a>
<!--/ctag-->
</p>赤い部分が新たに追加された内容です。この赤字部位と緑部位の関連がとても重要。説明できるか不安(笑)
&align は style="text-align="left" と出力される、と説明しましたよね。位置揃え指定を style属性 を用いて付加しています。ところが新しいhtml見てください。既にstyle属性が使われています。
これまでの規則に従えば単純にこうなります ↓
<p class="plugin-tag" style="word-break:break-word;" style="text-align:left;">style属性 が2つあります。これは完全にhtml構文エラーです。
実は2020年3月20日現在でどう処理されているかというと、
<p class="plugin-tag" style="word-break:break-word;">
個人設定されているはずの位置揃えが 無視 されている形です。そうすることでバリデートエラーを防いでいます。でも位置揃えの個人設定は無効(笑)
2020.3.21
毎度毎度ごめんなさい。「ブラウザが無視している」だけでした(明らかな構文エラーのため)
従って表示上の影響は何もなくとも バリデートエラーです。詳細は本記事末尾に追記します。申し訳ございません。
位置揃えが無効になることについては特に問題ないと思います。タグリスト表示の形式上、中央寄せや右寄せというのは考えにくいので、左寄せ一本で良いんじゃないかな、と。なので問題はそこではない。
ユーザーによってはstyle属性重複エラーになっている可能性がある
これが問題点。あぁー。説明できるかなー不安 （￣∀￣；）
システムの段階的調整が有った「かも」
2020.3.21
この章の内容は正しくありません。詳細は本記事末尾に追記します。申し訳ございません。
これも不明です。もしかしたら現在のhtml出力
<p class="plugin-tag" style="word-break:break-word;">この形になる前に
<p class="plugin-tag" style="word-break:break-word;" style="text-align:left;">この処理を経由しているかもしれません。というのは、実際に「カスタマイズをした記憶はない」というユーザーさんがこのstyle属性重複エラーを発症しているからです。なので可能性は十分考えられますね。つまり 段階的修正の間に不運にもタグプラグインをダウンロードした人はhtml構文エラーになっている可能性がある ということです。
現時点でのプラグインタグ編集の仕組みと対処の仕方
一度でも「設定」ボタン(更新, 保存目的のボタン)を押した時点で、最新のhtmlに自動的に書き換わります。
htmlを含め修正を全く何も行わずに「設定」を押しただけで書き換わります。逆に言えば 押さなきゃ書き換わらない という意味です。このように修正自体は超簡単なんですが、気付けるかどうか です。問題は(笑)
「自分が対象になっているかどうかわかんないけど、なんか不安」という方は、ともかく一度プラグイン設定画面を開いて「設定」ボタンを押して更新をしてくださいね。バリデートの仕方はわかる、という方は一度チェックされると良いと思います。
テンプレートカスタマイズをする方へバリデートのススメ
何度か啓蒙として記事にしています。なので再々々々々掲とかそんな感じ (´・ω・｀) 「テンプレートをカスタマイズする」ということは、htmlやCSSの内容を 変更する ということですから十分注意しなければいけません。...
仕様変更の背景
私的推察なので絶対とは言いません。あくまで推測。
最近の共有テンプレートの多くは flexレイアウト という手法が用いられています。flexというのは落とし穴が結構あってですね、プラグインタグがその落とし穴の代表的なものに引っかかっていました。
で、実は共有テンプレートを拝見しますと、デザインが著しく崩れているもの というのがとてもたくさんあったんですね。その理由は
- word-break
- inline-block
上記の特性に対する処理がキモで、結構な数のテンプレートが該当(処理をしていない)でした。で、この件を運営に報告するのかどうか一時悩みまして (´・ω・｀)
私は他デザイナーさんのところへ伺って意見をしたり、アドバイスをしたり、ミスの指摘をしたり、ということは絶対にしません。交流があったり、弊ブログへ訪問してもらうことがあれば別ですが。なのでこの件が果たして「製作者側が対処すべき」なのか「運営が対処すべき」なのか熟考した結果「製作者側である」と判断したので運営への報告はしていません。
というわけで、共有プラグインのプレビューを見たときにいろいろなテンプレートが大崩れしている、という場合にはプラグインタグの再DLあるいは保存しなおし(設定ボタン押下)を行うと解消されると思います。
* プラグインタグを入れていない人は崩れません。
該当数が多かったので運営が現状を鑑みて自主的に修正をしてくれたのではないかなぁ、と思います。
まとめ
というわけで、公式プラグイン「タグ」についての情報でした。気になる方、心配な方、検証が面倒な方は再DLまたは更新保存(設定ボタンクリック)で対応してくださいね。
追記 2020.3.21
誤情報を含んでいましたことをお詫びします。情報を整理します。
- 更新(設定ボタン押下)でhtml内容が書き換わる
- バリデートエラーが回避できる(text-align指定反映なし)
内容が書き換わるのは確かですが、出力される内容はこれまでのシステム通り
<p class="plugin-tag" style="word-break:break-word;" style="text-align:left;">
です。つまり バリデートエラー(html構文エラー) です。ただしブラウザは後述の style="text-align="left" を無視します。FC2ブログのシステムが意図的に無視しているのではなく、ブラウザが自主的に無視している、ということです。あくまでもraw html(生のhtml, 素のhtml)は エラー だ、ということですね。
というわけで改めて正しい対処法を掲載したいと思います。順序としては以下の流れです。
- 公式プラグイン「タグ」を再DL
- ユーザータグの設定のラジオボタン「カスタマイズ」にチェック
- &align を削除
手持ちのタグプラグインの「更新」でも良いんですが作業の統一のために再DLをおすすめします。既に「更新」あるいは「再DL」を済ませている方は1の手順は省いて構いません。
「カスタマイズ」のラジオボタンに必ずチェックを入れてください。でないとhtml編集して更新してもデフォルトの内容が戻ってきてしまいます。
&align の部位は直前にある 半角スペースを含めて削除 します。不安な方は全内容を以下のコードと差し替えてください。
<p class="plugin-tag" style="word-break: break-all;">
<!--ctag-->
<a href="<%ctag_url>" style="display: inline-block;"><%ctag_name></a>
<!--/ctag-->
</p>で、ここからちょっと余談というか副情報というか。上級者向け説明になります。
本来弊テンプレートの利用者さんであれば旧内容のままでレイアウトが崩れることはありませんし、新コードの word-break: break-all も display: inline-block も最初からテンプレートでそう指定しているのでまったくもって不要な内容です。
今回運営が行った修正というのは、style属性 を用いています。この方法のデメリットは
- DOM構築を邪魔する(レンダリングブロック)
- テンプレートCSSと二重指定
なので長くタグプラグインを利用しており、現時点でバリデートエラーが発生していない方はそのまま何もしなくても良いですよ。ただし他デザイナーさんのテンプレートに変更した際にも同じ条件とは限りません。なら結局プラグインのhtmlを直した方が良いような気もしますし、そうでない気も(笑)
なので上級者さんの対処はお任せします。
結論ですが、これはFC2ブログへの修正依頼を行うべき案件ですね。でもたぶん関連記事リストの構文エラーと同じで「見送り」になる可能性が高い。何故なら &align 変数は既に出来上がっていてタグだけでなくあらゆるプラグインで併用されているためです。タグのためだけに出力内容を変更する、というわけにはいかないと思うので (´・ｪ・｀)
ともかく期待薄だとしても運営には報告したいと思います。結果は本記事に追記の形でお知らせします。
2020.3.21
さらによろしくない点に気づいたので追記します。
運営が今回追加したhtml内容の word-break:break-word なんですが、これ正しくないです(笑)
やっだー。コピペしてたから全然気が付かなかった… （￣∀￣；）
正しいのは word-break: breal-all または word-wrap: break-word または overflow-wrap: break-word のいずれかです。2つ目と3つ目は同じ意味で word-wrap と overflow-wrap は同じプロパティで旧名称と新名称です。超古いブラウザだと overflow-wrapが解釈できないのでword-wrapを使う という感じです。
運営が break-word(半角スペースが折り返しの機会)にしたかったのか、それとも break-all(右端まで到達したらどこでも折り返す)にしたかったのかが不明ですが、まぁ普通は break-word だろうと思うけれども。でも運営的にはこれは break-all にしたかったのだろうと思いますので、コピー用コードはその指定に変更しておきました。
製造番号とか、英語の長い造語などをタグ名にしている方は break-all の指定にしておいた方が安全です。
例) 長いシリアルナンバー, ハイフンなし
2222359AUE9999992819EOWK49812391287388829TTKD
例) 英語の造語, ハイフン・半角スペースなし
supercalifragilisticexpialidocious
ちなみに弊テンプレートでは word-break: break-all に指定してあります。「リンクがはみ出すと嫌」派なんで。
* 長いリンクアドレスが記事の右側を超過するのはよくあることです。
とどのつまり 追加内容がそもそも間違っている(非推奨指定) ということですね。ますますユーザーカスタマイズが必須になってしまうんですが (;`ｰ´)o
修正されるとは思いますが、既にDL済の方は軒並みエラー…。ねぇやっぱこれはさ、製作者側が対処すべきだったと思うよ (´・ω・｀)
There are no comments yet.