つくたろうのブログ

ポケモン色違い厳選や国立大学巡りが好きな大学生、つくたろうの気ままな雑記帳です。当サイトは広告を含みます。

はてなブログで「文中のIDコール」をエスケープする。

www.tsukutarou.net
www.tsukutarou.net

こんにちは、つくたろうです。

はてなブログには「IDコール」なる機能が存在しています。

ブログの文中やコメント欄などで「id:tsukutarou」というように「"id:" + "はてなアカウントのid"」の形で記述すると、

id:tsukutarou

のようにリンクとなり、このリンクでそのid主のページに飛べるようになります。

それだけならいいのですが、この形のリンクを含んだ記事が公開されるとそのはてなidの持ち主に通知が行くという仕様になっています。

これはコメント欄で返信するときなどは重宝するのですが、オンオフなどはなく常時発動するという凶悪な仕様になっており正直非常に邪魔です。

特に問題があるのが、「ID:」、「id:」、「iD:」、「Id:」で始まる半角の文字列が問答無用ですべてidコール扱いになってしまう点です。

IDコール扱いになると、全部小文字の「id:」にされるのも地味にイラっと来ます。

記述:

id:tsukutarou
Id:tsukutarou
iD:tsukutarou
ID:tsukutarou

出力:
id:tsukutarou
id:tsukutarou
id:tsukutarou
id:tsukutarou

2ちゃんねる(5ちゃんねる)のまとめなど、「ID:」という文字列を扱う局面って非常に多いので、どうしてもこれを回避しなければいけない。

理想は「ID:tsukutarou」というように、idコールにならずに「"id:" + "半角の文字列"」を記述すること。

ということで、はてなブログの文章中のidコールをエスケープする方法を調べたものの全く出てこない。

出てこないなら仕方ない、ということで僕が編み出したidコールのエスケープ方法を書いておきます。

編み出したといっても全然大したことは無くて、「"id:"と"文字列"との間にコメントを挟んでしまう」という方法でこれを回避できます。

具体的には以下のようになります。

記述:

ID:<!---->tsukutarou

出力:
ID:tsukutarou

望み通りの出力ができました。

また、ほかのタグで囲まれていても大丈夫です。

記述:

<b>ID:<!---->tsukutarou</b>
<span style="color: #ff0000">ID:<!---->tsukutarou</span>

出力:
ID:tsukutarou
ID:tsukutarou

今回の手法について、htmlが分かる人は何をしているかは一目瞭然だとは思いますが一応説明しておきます。

htmlでは<!---->で囲んだ部分は「コメント」といって、コード内で読み飛ばされる部分となります。つまり、記事の編集画面では見えていても実際の記事では表示されない部分です。

今回の解決策では、この「コメント」を「ID:」と「はてなID」との間に挟み、「ID:」と「はてなID」とが連続して記述されてしまうことを防ぎます。

htmlのコメント部分はブログには表示されないので、見た目上は「ID:はてなID」という連続した形を保って表記されるようになるわけですね。

「コメントエスケープ」とでも名付けておきましょう。

*追記:はてなブログ運営公式様からメールが。問い合わせていたのを忘れていました。

[]id:tsukutarou[]

と書けば、「ID:tsukutarou」という風にIDコールを回避できるそうです。

でもこれは今度は[]で囲まれた文字列を表記できないという問題が浮上しませんか。

でも、大丈夫。

「コメントエスケープ」を使えばこれも表示できます。

記述:

[<!---->]test[]

出力:
[]test[]

両端の[]が表示されましたね!

このように、「適当な部分にコメント<!---->を挟む」という手法を使えば、IDコールだけでなく連続した特定の文字列に発動してしまうものは大体回避できると思います。疑似エスケープですね。

とりあえず、これでIDコールを回避しつつ「ID:」から始まる文字列を記事中に記述することができました。

調べても全く出てこなかったので途方に暮れかけましたが、解決できてほっとしています。

www.tsukutarou.net

今回の記事はここまでになります。

読んでいただき、ありがとうございました!

2021/11/30 つくたろう

www.tsukutarou.net
www.tsukutarou.net


大学生ランキング

www.tsukutarou.net

www.tsukutarou.net

www.tsukutarou.net