やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

はてなブログの目次記法とid記法

 え、こんなのあったんだ。知らんかった。

きっかけ

 はてなブログ開発ブログにて気になるお知らせがあった。

 このとき以下の情報をみつけた。

情報源

 なにそれ、そんなのあったの? 今まで気づかなかった!

涙ぐましい苦労

 だから私はかつて以下のようなものを自作したというのに! あの苦労は一体。まあ、使ってないんだけど。

もう間違えないために

 はてな記法一覧を調べてみた。まだ知らないものがあるかもしれないし。

 google記法wikipedia記法あたりは使うかもしれない。でもふつうにリンクを貼ればいいだけのような気もする。

目次記法

[:contents]

 これで見出しをリンク化できる。

 でも、以下のように目次を見出しにしちゃったら、目次自体も項目に出ちゃう。

# 目次

[:contents]

 この記事で書いてみたら以下のようになった。

id記法

id:ytyaru
id:ytyaru:detail
id:ytyaru:detail:large
id:ytyaru:image
ID記法 結果
id:ytyaru id:ytyaru
id:ytyaru:detail id:ytyaru
id:ytyaru:detail:large id:ytyaru
id:ytyaru:image id:ytyaru

 ちなみにリンクは http://blog.hatena.ne.jp/ytyaru/ だった。ようするに自分のブログへのリンク。

IDコール

 あと、他人のはてなID記法を使ったらその人へ「あなたへのお知らせ」に通知されるらしい。これを「IDコール」と呼ぶのだとか。

 まあ、ぼっちの私には関係ないかな。

もっといい感じにしたい

 どうでもいいけどid:っていらなくない? あと私ならtitle属性にはてなIDをセットする。そうすればマウスオーバーではてなIDがポップアップされるはず。まあスマホでは見えなくなっちゃうけど。それにURLはブログでなくプロフィールページに飛ばしたい。そのほうがユーザーを指定したっぽい感じだし。というわけで、HTMLで書いてみよう。

 プロフィール画像取得URLは以下を参考にした。

<a href="https://profile.hatena.ne.jp/ytyaru/"><img src="https://cdn.profile-image.st-hatena.com/users/ytyaru/profile.png"></img><span>ytyaru</span></a>

 私はytyaruです。

 うーん、IDは画像の上か下に表示したい。

<a href="https://profile.hatena.ne.jp/ytyaru/"><div><img style="display:block;" src="https://cdn.profile-image.st-hatena.com/users/ytyaru/profile.png"></img><span style="display:block;">ytyaru</span></div></a>

 私は

です。

 ブロック要素になってしまった。改行されないインライン要素のまま、画像と名前を縦に表示したかったのだが。それはできないらしい。

 <br>で改行するとさらに残念なことになった。

 私は
ytyaru

です。

 仕方ない。縦並べは諦めて、サイズを調整しよう。できれば1emで表現したかったが、16pxのようにピクセル単位で絶対指定せねばならないっぽい。

<a href="https://profile.hatena.ne.jp/ytyaru/"><img width="16px" height="16px" src="https://cdn.profile-image.st-hatena.com/users/ytyaru/profile.png"></img><span>ytyaru</span></a>

 私はytyaruです。

 はてなIDはタイトル属性にして隠してしまおう。

<a href="https://profile.hatena.ne.jp/ytyaru/" title="ytyaru"><img width="16px" height="16px" src="https://cdn.profile-image.st-hatena.com/users/ytyaru/profile.png"></img></a>

 私はです。

 あとはこれをuser:ytyaruという文字列から上記HTMLに変換するJavaScriptを書いて実行させればいい。もちろんユーザ名は変数にする。でも、絶対に使わない自信があるので作らない。

 もし作るとしたら以下のようになるだろう。

function getUserHtml(username) {
    return `<a href="https://profile.hatena.ne.jp/{username}/" title="{username}"><img width="16px" height="16px" src="https://cdn.profile-image.st-hatena.com/users/{username}/profile.png"></img></a>`
}

対象環境