FC2ブログ機能「タグをリンクにする」と弊ブログ提供ブログカードのとの衝突について

結論から言うと弊ブログカード利用時には 「タグをリンクにする」機能をopt out (オフ)にしてご利用ください。という追加注意事項です。ブログカード提供を開始した際に注意点として明記すべき内容でしたが、完全に失念しておりました。申し訳ございません。

FC2ブログの「タグをリンクにする」機能

ユーザー各個人が「タグ」を設定したい場合があるかと思います。htmlタグのことではなくハッシュタグのことです。
* ただしFC2ブログではワードの前にハッシュ(#)は付きません

タグは新・旧各投稿画面の以下の部位で指定できます。

あまり大差無いデザインですが、新管理画面の新投稿画面の場合は「ユーザータグ設定」は設定項目内で独立して存在しています。旧管理画面の旧投稿画面の場合は別の設定項目と一緒にまとまっています。

ちょっとここで余談になりますが、なるべく早めに新管理画面に切り替える ことをおすすめします。現状ですと、名称が「新デザインの管理画面の〜」「旧デザインの新投稿画面と、新デザインの新投稿画面は〜」みたいな感じでわっけわからん （￣∀￣；）
「新」とか「旧」とかで区別してしまうと混乱してしまいますよね。「標準」と「旧」ならもう少しなんとかなったかな、と思いますけども。あるいは「プリフィックス(接頭語)何もなし」と「旧」とか。

名称が複雑になっている点はたぶん運営側でも気がかりにはなっているような。そして切り替えをすすめる一番の理由は「互換性」の問題です。「投稿画面」と書くと却ってわかりづらいのでここからは「新エディター」「旧エディター」と称しますが、新エディター(新投稿画面/ 旧投稿画面どちらにもありますがデザインが全く異なります)と旧エディター(これは旧管理画面でしか利用できません)には互換性を期待しない方が良い (´・ω・｀)

原因は旧エディターの「改行の扱い『自動』」という機能にあります。自動改行(Enter押下で<br>タグ入力とみなす)で記事を書いていた方が、新旧エディターのhtmlモードで記事を書き直すときに非常に苦労するのは明白。実際に経験した方たくさんいらっしゃると思います。「文章やhtmlタグが全部横につながっている」というアレです。

仕組みについては今回省きますけども、「旧」とされる機能は「いずれ提供が終了される可能性がある」ことを示唆していますので、既に「新」が登場している段階においてはあまり利用を重ねないほうが賢明です。

話を戻しまして、新旧いずれのエディターでも タグをリンクにする というチェック項目が準備されています。

「タグをリンクにする」を利用した場

ここからは新エディターのスクリーンショットで説明します。旧エディターでも得られる結果は同じです。仮に blockquote でマークアップしたとします。引用を意味するhtml要素です。

ブログでの表示結果はリンクになっているのがわかりやすいよう赤い下線を付けています。要するにタグワードと合致するテキストが存在していたら 全てaタグで囲ってFC2ブログのタグポータルページへ遷移するようになる という仕組みです。遷移先は自身のブログ内の「タグページ」ではなく、FC2ブログのポータルで、target="_self" なので同タブ遷移です(閲覧中ページが切り替わる、という意味です)

「タグをリンクにする」はチェックされているのがデフォルト

恐らくopt in状態がデフォルトだと思います。一旦opt outした後はそれが引き継がれます。また、時期的に「新管理画面」と「旧管理画面」を行き来して比較したり試したり、ということもあるかと思います。新/旧 管理画面の切り替えを行うとput in状態に初期化されます。

「タグをリンクにする」機能がhtml構文エラーを招くことがある

ブログカードとの衝突もここに関連しています。

2021年現在のHTML標準は HTML Living Standard7。です。2021年1月までは HTML5 で、取りまとめる団体は W3C という非営利団体で日本だと慶應義塾大学がホストを努めていたりするんですが、W3Cについては「現場を知らないお役人」的な体質であったせいか、現在では Apple/ Mozilla/ Opera の現場ゴリゴリの3社が設立した WHATWG という団体がliving standardを取りまとめています。つまり「HTML + バージョン名」という形式は廃止され、正規の後継として「HTML Living standard + バージョン名」という規格に切り替わった、ということですね。ただ内容はHTML5のから大きくかけ離れているわけではなくて、現場の都合をより取り入れた改正を重ねる、みたいな感じになっています。

で、「タグをリンクにする」機能というのはHTML5よりも以前、HTML 4とかそんな古い時代から存在しているものです。当時は aタグに入れ子できるのはインライン要素のみ といった仕様でした。

① 旧仕様 --- 正当構文

<a href="遷移先アドレス">リンクのテキスト</a>

② 旧仕様 --- 正当構文

<a href="遷移先アドレス"><span style="font-weight: bold;">リンクのテキスト</span></a>

③ 旧仕様 --- 不正構文(エラー)

<a href="遷移先">
  <div style="padding: 10px">
    <img src="画像アドレス">
    <p>文章</p>
  </div>
</a>

HTML5以降は③の内容でも構文エラーではありません。正規構文として認められており、寧ろよく利用されるようになっています。スマートフォンでは「タップ範囲が小さすぎないこと」がとても大事で、以下の操作比較で理解できると思います。

テキスト部位のみがリンク

全体がリンク

これはリンクです

ちなみにバージョンアップしたブログカードの構文は③に該当します。以下のカードが実証サンプルです。

ブログカード作成ブックマークレットをアップデートしました

FC2ブログのみならず汎くお使い頂いているようで甲斐があったなぁ、と思っております ブログカード なんですが、アップデート、というか少しhtml内容を変更しました。...

vanillaice000.blog.fc2.com

というわけで、恐らく③のパターンとしては「タグをリンクにする」機能のリリース時点で考慮はされていなかったはずです。 では当時正規構文として認められていた①と②はどうかというと ②のパターンに合致すると構文エラー なんですね。残念なことに。これは自動タグリンク作成のアルゴリズムがそうなっているためです。

構文エラーになるパターン、ならないパターン

サンプルの文章をそのまま利用すると、リンク対象として認識されるのは「相対性理論」「相対性原理」「自然科学会」ですよね。仮に記事作成画面で

相対性理論

とベタ打ちして記事を保存した場合、ブラウザに表示される際には以下のように変換されています。

<a href="遷移先アドレス" class="tagword">相対性理論</a>

こうして自動で class="tagword" 付きのa要素として変換されている。けれどもこの内容というのは ユーザーが記事作成画面で目視することはできません。なぜならFC2サーバーを経由した際にaタグが付加される仕組みだからです。なので新/旧いずれのエディターでも、モードが「見たまま」であっても「HTML」であっても不可視。

そして、自動でリンクになるとは言っても、ユーザーが意図的にリンクを作成する場合 というのがありますよね。例えば「相対性理論の説明ページへ」といったテキスト。このパターンは大いに可能性があるのでないでしょうか。すると既に「相対性理論」という自動リンク化のワードを含んでいることになるんですが、どうなるでしょう。

構文エラーにならないパターン

<a href="">相対性理論の説明ページへ</a>

上記のように素直にa要素でマークアップした場合。これは自動リンクの対象から外すアルゴリズムになっているようなので、FC2サーバーを経由してレスポンスがブラウザで表示される際には書いたそのままの内容、つまり上記構文のままです。

構文エラーになるパターン

<a href=""><span style="font-weight: bold;">相対性理論</span>の説明ページへ</a>

上記は「相対性理論」の単語部位を意図的に太字に指定した上でa要素としてマークアップしたものです。このパターンは比較的高い頻度で登場するかと思います。この場合の結果は

FC2による変換

<a href="">
  <span style="font-weight: bold;">
    <a href="遷移先アドレス" class="tagword">相対性理論</a>
  </span>
   の説明ページへ
</a>

これは 完全に構文エラー です。a要素に中にさらにa要素が含まれています。この構文は認められません。構文的にはありえないものなので、ブラウザは能動的に「補完」を行います。すると以下のような内容として解釈が行われます。

ブラウザの解釈

<a href="">
  <span style="font-weight: bold;"></span>
</a>
<a href="遷移先アドレス" class="tagword">相対性理論</a>

自動でこうなります。このhtml内容自体はかろうじて構文エラーではありません。「変なhtml」というだけです。致命的エラーを防ぐべくブラウザがこうしてくれてる、というか。まぁでもここまで変なのは構文エラーに近いですけどね (´・ｪ・｀)

要は、開始タグ <a> と終了タグ </a> の間になにかしらのhtmlタグが無ければ上手くいくけれども、構文的には正当の span要素 や b要素(* 現在では太字にするためのbタグの利用は禁じられています) だとしても間に入っていたら即構文エラー、ということです。

でもって、ブログカードの場合は新仕様(現標準)の a要素にdivやpなどのブロックレベル要素を入れ子しても良い という仕様に従って作成しています。これこそが「現場の声」という感じで、スマートフォン全盛の今では主流の方法。ブログカードはサンプルのエラー対象構文よりもさらに複雑です。結果的には「タグをリンクにする」機能によってエラーを生じさせてしまいます。
* 現在においては「ブロックレベル要素」という考え方自体廃止されていますが、説明の便宜上伝わりやすいと判断しました。

まとめ

ここまでで「何故自動リンク機能とブログカードが衝突するのか」はおわかり頂けたのではないかなぁ、と思います。で、個人的には以前より自動タグリンク非推奨、というのをお伝えしています。理由は以下の通り。

• 文章内で多用すると見た目に煩わしい
• 記事閲覧中にクリックされると、そのままアクセスを失う可能性が低くない

記事内のそこらじゅうにリンクがある、というなんだか不自然な見た目になりがちなのと、記事を読んでいる最中に意図的にしろそうでないにしろクリックされた場合、その別タブではなく閲覧中ページが切り替わって、もし遷移した先に気になる記事を発見したらそのままもう戻って来てくれない可能性(笑)

というわけで、ブログカードの記事の方へは「タグをリンクにする」機能の利用不可、という追記をしておきたいと思います。ブログカードを利用していなくとも、場合によっては構文エラーが発生しますよ、ということでよろしくお願いします。