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

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

FC2ブログのあれこれ
2020/03/20 9
vanillaice (Akira)
vanillaice (Akira)
トラブル対処

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

本件は修正済です。詳細は以下のリンク先ページを御覧ください。

公式プラグイン「ユーザータグ」の構文エラーについて回答がありました

公式プラグイン「ユーザータグ」の新コードがhtml構文エラーですよ、という件への運営からの返信と共にhtml修正が入りました。...

公式プラグイン「タグ」の仕様変更

「いつ」行われたのか不明です。今気づいた (´・ω・`)

これまでの 公式プラグイン「タグ」(以降は簡潔に「タグ」と表現します)のhtml内容は以下のようなものでした。

<p class="plugin-tag" &align>
  <!--ctag-->
  <a href="<%ctag_url>"><%ctag_name></a>&nbsp;
  <!--/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>&nbsp;
  <!--/ctag-->
</p>

赤い部分が新たに追加された内容です。この赤字部位と緑部位の関連がとても重要。説明できるか不安(笑)

&alignstyle="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)は エラー だ、ということですね。

というわけで改めて正しい対処法を掲載したいと思います。順序としては以下の流れです。

  1. 公式プラグイン「タグ」を再DL
  2. ユーザータグの設定のラジオボタン「カスタマイズ」にチェック
  3. &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>&nbsp;
  <!--/ctag-->
</p>

で、ここからちょっと余談というか副情報というか。上級者向け説明になります。

本来弊テンプレートの利用者さんであれば旧内容のままでレイアウトが崩れることはありませんし、新コードの word-break: break-alldisplay: 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-wrapoverflow-wrap は同じプロパティで旧名称と新名称です。超古いブラウザだと overflow-wrapが解釈できないのでword-wrapを使う という感じです。

運営が break-word(半角スペースが折り返しの機会)にしたかったのか、それとも break-all(右端まで到達したらどこでも折り返す)にしたかったのかが不明ですが、まぁ普通は break-word だろうと思うけれども。でも運営的にはこれは break-all にしたかったのだろうと思いますので、コピー用コードはその指定に変更しておきました。

製造番号とか、英語の長い造語などをタグ名にしている方は break-all の指定にしておいた方が安全です。

例) 長いシリアルナンバー, ハイフンなし

2222359AUE9999992819EOWK49812391287388829TTKD

例) 英語の造語, ハイフン・半角スペースなし

supercalifragilisticexpialidocious

ちなみに弊テンプレートでは word-break: break-all に指定してあります。「リンクがはみ出すと嫌」派なんで。
* 長いリンクアドレスが記事の右側を超過するのはよくあることです。

とどのつまり 追加内容がそもそも間違っている(非推奨指定) ということですね。ますますユーザーカスタマイズが必須になってしまうんですが (;`ー´)o
修正されるとは思いますが、既にDL済の方は軒並みエラー…。ねぇやっぱこれはさ、製作者側が対処すべきだったと思うよ (´・ω・`)

 9

There are no comments yet.
bon

Akiraさん
おはようございます。

新ブログ
https://bon3te.fc2.net

旧ブログ
https://bon3te.blog.fc2.com/

ともに、プラグイン→タグ詳細→設定ボタンを押しました。
これで解消されたでしょうか。

あと、便乗となってしまいますが、バリデートした際にいろいろとエラーが出ておりましたが、このタグのエラーもそのうちの一つでしょうか。
※バリデートしたのは良いものの、やはり表示されている意味がわからないので、該当記事にてご質問させていただこうかと考えておりました。

2020/03/21 (Sat) 10:04
vanillaice (Akira)
Akira
To bonさん

bonさん、こんにちは ('0')/
今内容を訂正しました。結果的に「バリデートエラー解消にはユーザー個人カスタマイズ必須」ということです。これアカンやつや (´・ω・`)
やっぱ製作者側に任せた方が良かったんじゃ… ^^;

2020/03/21 (Sat) 12:06
bon

Akiraさん
こんにちは。
タグのダウンロードし直し、html編集が新・旧ブログともに完了しました。わかりやすく書いて下さりありがとうございます。
これからもAkiraさんのサイトを教本にしてブログをよりよくしていきたいと思いますので、よろしくお願い致します。

追伸
昨夜にお伺いしたブログカードのファビコンも表示されるようになりました。ありがとうございました!

2020/03/21 (Sat) 13:22
vanillaice (Akira)
Akira
To bonさん

わ。さらっと見てたけど大変なことに気づきましたわ。
word-break:break-word なんてCSSは無い(笑)

ヤダなんで気づかなかったのかしら。これまた運営に報告… 二度手間 (;_;)
break-wordの値が使えるのはword-breakではなくword-wrap(旧名称), overflow-wrap(新名称)なんです。
word-breakの値はbreak-allです。どちらを間違えたのか、どちらにするつもりだったのか知らないが混同している ( ̄∀ ̄;)

なので大変お手数ですが、記事を再編集しますのでコードを今一度確認・修正をお願いします。申し訳ない ( ̄∀ ̄;)

2020/03/21 (Sat) 16:12
bon
To Akiraさん

タグのhtmlをbreak-wordからbreak-allに書き換え完了しました。
本来は運営さんのお仕事なのにお疲れ様です。こちらは教えていただいたことを実行するのみで、大変感謝しております(^O^)

2020/03/21 (Sat) 16:44
hige
プラグインの横着

大昔(2014年頃)ユーザータグが正常に表示されないことに気づいて、その時の現象はユーザータグの英数字の記事枠より多い部分が、折り返されずに消えてしまってるというものでした。その当時、FC2コミュニティで問い合わせのスレッドを立てても適格な回答は得られませんでした。その少し後からAkira氏が登場されたと記憶しています。当時はコミュニティへの投稿も回答も活発でしたね。

で、その頃調べて知ったのがword-break: break-all; でした。
この頃からですかね、あれこれ興味をもってHTML/CSSに嵌まっていったのは。

「ブログ内検索」というプラグインでも入力欄が記事枠よりはみ出すという事象もあったりして、その頃からプラグインの幾つかをそれぞれプラグイン内で class 指定して CSS で装飾するようになりました。

今もそれがそのまま残ってます。昔から書き足してきたプラグイン用のCSSをテンプレが変わってもずっとコピペしてきました。
つまり、一部のテンプレートではこうした事象に対処してなくてそんなテンプレでは不具合が出るということですね。

Akira氏のテンプレを採用してからもずっとそれらの古の遺産をコピペしてきてます。多分幾つかの私の個人的なCSSは不要なのかと思ってます。例えば私が追加で書いている .・・entry・・ img { max-width: 100%; } !

もう年取って気力がなくて、検証する気が起こらないので、そのままコピペ。

Akira氏のテンプレではそんな不具合に細かく対処されていてものすごく勉強になります。(リセットCSSとかも)

と、思わず感想を書いてしまいました。お聞き流しを。

2020/03/21 (Sat) 18:25
vanillaice (Akira)
Akira
To bonさん(完了のご報告)

書き換えできたとのことで安心しました。複数回に渡る修正になってしまいごめんなさい。
お疲れ様でした :)

2020/03/21 (Sat) 20:49
vanillaice (Akira)
Akira
To higeさん

なかなか難しいんですよね。あるテンプレートでは「無駄」になり、あるテンプレートでは「必要」になる、それがCSS(笑)
なにせ製作者の方針によってどこまでケアするかまちまちなので、ユーザーさんが判断するのは結構大変というか、「無理」と言っても良いかもしれない。

個人的には共有テンプレートの審査はもっと厳しくて良いと思います。本件も結局当初は運営報告しませんでしたが、それは「製作者が対処すべき問題」と結論づけたからです。
といってもすごく判断が難しくて、ブログを開設したときにデフォルトで有効化になっているプラグインがありますよね。これらについては「製作者によるレイアウト必須」ぐらいにしても良いと思うんです。はみ出してたら承認しない、とか。
でもタグの場合はデフォルトではないんですよ。なのですごく悩んだ(笑)

共有の審査基準をもっと高くして、さらに必須事項も明示してもらえると良いんだけど (´・ω・`)

2020/03/21 (Sat) 21:02
hige
To Akiraさん

Akira氏のテンプレートはきめ細かに対応されていて本当に頭が下がります。

でも、ひどいテンプレが野放し状態で、と言ってはいけないんかも知れませんが。
でも何らかの処置がないと被害を被るのはユーザーなんですよね。

FC2の玄関が広い為のデメリットかも知れませんが。

2020/03/21 (Sat) 21:20

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

FC2ブログのあれこれ