※はてなブログネタです。
皆さん、はてなブログで記事を書く際に「脚注」って使ってますか？
目次
「脚注」ってなんだ？
エディターのツールバーにあるコレです。あるのは気が付いていたのですが、何回かいたずらに使って「あれ、なんだこりゃ、()が二重に表示されるだけじゃないか、使い方がわからん！
などと意固地になり、現在まで使用してきませんでした。しかし、これは書籍などでもよく見る、本文の流れをぶった切らないための効果的なシステムだったのですね(´・ω・｀)
使用例（画像で解説）
例を挙げてみます。この一文に脚注を使ってみましょう。例文では「色相が濁っちゃう(´Д｀)」などと意味不明のことを書いております。
これは、アニメ「サイコパス」の中で、「精神の汚染度が上がってしまう」を意味していますが、知らない人には何のこっちゃですよね。
というわけで、ここに説明書きを加えてみます。
ここにこのような説明書きを加え、そこを範囲選択して「脚注」をクリックしてみると...
二重()の中に、説明書きがくくられました。さて、これをプレビューで見てみるとどうなっているのでしょうか？
先ほどの二重()が、くくられた文字と共に消えており、かわりに*1が出現！記事末を見てみると
大成功。このように、本文に説明書きを加えると邪魔になる説明文などは、このように脚注にして文末に飛ばしてやれば良いのですね。
なにかの書物を参考にした部分であれば、引用元の書籍名や著者名を脚注として書いてあげるのも良いのではないでしょうか。
※なお、半角の()で２重にくくれば、「脚注」ボタンを使わずとも脚注になってしまうことに注意したい。
脚注背景色を変えるデザインCSS
ちなみに、今回の画像で文末の脚注背景が灰色になっているのは、とある記事で勉強してデザインCSSに手を加えたからです。
affiliate-hatekun.hatenablog.com
こちらですね。ここで紹介されているとある文字列を「デザイン」「カスタマイズ」「デザインCSS」にコピーペーストするだけで脚注の地をカラーにすることができるのです♫
その文字列は以下
.footnote {
border-radius: 10px;
background-color: #efebdd;
font-size: 77%;
margin: 0.1em !important;
padding:5px !important;
}
です。これをどこに張り付けるか、いまいちパッときていない方のために、以下に画像でガイダンスします。なお、（スマホ版）は当記事オリジナルのガイダンスです。引用記事内には（PC版）しかなかったので。
脚注背景色変更手順（PC版）画像解説
これで設定できると思います！
脚注背景色変更手順（スマホ版）画像解説＜Pro限定＞
HTMLの色見本サイトへのリンク
こちらを参考にさせて頂きました。
というわけで本当に今さらなのですが、私のように知らない人もいらっしゃるでしょうから、はてなブログにおける「脚注」の使い方を説明させて頂きました～( ´Д｀)ﾉ