読者です 読者をやめる 読者になる 読者になる

ポジ熊の人生記

雑記ブログの育て方をメインコンテンツに、時事オピニオンや書評などを日々更新中です。

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

blog blog-hatenablog


スポンサーリンク

2016年11月27日更新

 

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

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

「脚注」ってなんだ?

 

f:id:pojihiguma:20151126222826p:plain

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

 

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

 

使用例(画像で解説)

 

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の色見本サイトへのリンク

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

 

 

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