はてなブログの脚注のツールチップを見やすく、カワイイにするCSS - タオルケット体操

前置き はてなブログは(())で囲むことで脚注*1をつけることができます。 この脚注、ブラウザ標準のツールチップで読めるんですけども、出てくるのが遅いし、小さくて読みにくいし、見た目が可愛くないですよね。 というわけで無理矢理ツールチップを追加するCSSを作りました。導入すると以下みたいなツールチップが出るようになります。 解説 最初の例はわかりやすいようにstylusで書かれているので、もしも自分もブログで使いたいという奇特な方がいたら、一番最後にコピペ用CSS版を貼っておくので自己責任でそいつを導入してください。 ユーザ定義なCSSの追加はデザインカスタマイズの画面から行えます。 a[name^="fn-"] position: relative &:hover:before z-index: 99999 position: absolute content: "" display: