羆の人生記

ひとり暮らしに役立つ情報を更新します。

はてなブログ「脚注」使い方を画像で解説 脚注背景色変更CSSも

スポンサーリンク 

皆さん、はてなブログで記事を書く際に「脚注」って使ってますか?

今回はその使い方をレクチャーします! 

「脚注」ってなんだ?

f:id:pojihiguma:20151126222826p:plain

エディターのツールバーにあるコレです。あるのは気が付いていたのですが、何回かいたずらに使って「あれ、なんだこりゃ、()が二重に表示されるだけじゃないか、使い方がわからん!

 

それから現在まで使用してきませんでした。しかし、これは書籍などでもよく見る、本文の流れをぶった切らないための効果的なシステムだったのですね(´・ω・`)

 

・本文中の記述に対する解釈・典拠・引用文献・参考文献などを明示するとき
・本文中の用語に対して詳細な解説が必要なとき
・記述内容に対して別途詳細な補足が必要なとき
上記に列挙したその注記の必要性にもかかわらず、それを割注で本文中に記述すると本文の文脈を分断することになり逆に可読性を著しく損なう場合がある。このような場合に、可読性を確保したまま注記を加える方法の一つが脚注である。

脚注 - Wikipedia

 

使用例(画像で解説)

 

f:id:pojihiguma:20151126223155p:plain

例を挙げてみます。この一文に脚注を使ってみましょう。例文では「色相が濁っちゃう(´Д`)」などと意味不明のことを書いております。

 

というわけで、ここに説明書きを加えてみます。

 

f:id:pojihiguma:20151126223621p:plain

ここにこのような説明書きを加え、そこを範囲選択して「脚注」をクリックしてみると...

 

f:id:pojihiguma:20151126223728p:plain

二重()の中に、説明書きがくくられました。さて、これをプレビューで見てみるとどうなっているのでしょうか?

 

f:id:pojihiguma:20151126223829p:plain

先ほどの二重()が、くくられた文字と共に消えており、かわりに*1が出現!記事末を見てみると

 

f:id:pojihiguma:20151126223952p:plain

大成功。このように、本文に説明書きを加えると邪魔になる説明文などは、このように脚注にして文末に飛ばしてやれば良いのですね。

 

なにかの書物を参考にした部分であれば、引用元の書籍名や著者名を脚注として書いてあげるのも良いのではないでしょうか。

 

※なお、半角の()で2重にくくれば、「脚注」ボタンを使わずとも脚注になってしまうことに注意ましょう。

 

脚注背景色を変えるデザインCSS

ちなみに、今回の画像で文末の脚注背景が灰色になっているのは、とある記事で勉強してデザインCSSに手を加えたからです。

 

ここで紹介されているとある文字列を「デザイン」「カスタマイズ」「デザインCSS」にコピーペーストするだけで脚注の地をカラーにすることができるのです♫

 

脚注背景色変更手順(PC版)画像解説

f:id:pojihiguma:20151126224525p:plain

 

f:id:pojihiguma:20151126224601p:plain

 

f:id:pojihiguma:20151126224906p:plain

これで設定できると思います!

 

脚注背景色変更手順(スマホ版)画像解説<Pro限定>

f:id:pojihiguma:20151127081214p:plain

f:id:pojihiguma:20151127081219p:plain

f:id:pojihiguma:20151127081225p:plain

HTMLの色見本サイトへのリンク

こちらを参考にさせて頂きました。

 

 

というわけで本当に今さらなのですが、私のように知らない人もいらっしゃるでしょうから、はてなブログにおける「脚注」の使い方を説明させて頂きました!

 

あなたにおすすめしたい記事