はてなブログ云云でアフィリエイトがしたい人のブログ

「はてなブログ」でアフィリエイト・ブログカスタマイズ・最適化・色々試行錯誤中!

【スポンサーリンク】

超簡単、はてなブログで脚注(注釈)を付ける方法

f:id:yonta24:20141213194546j:plain

脚注について

他のブログを見ていて文章の後ろに「*1」とかついているのを見かけます。

これをマウスオーバーするとマウスポインタのそばに吹き出しが現れ、文章を補足する文章が現れる。便利そう。

これは「脚注」といって、紙の書籍でみられるものと同じ機能です。本文に書ききれない情報をコンテンツ末にスペースを取って解説する。本文の流れが邪魔されずとても良い手段。


新潮文庫「三四郎」に使われている脚注の例(リアル書籍では本文と巻末の脚注があるページまで行ったり来たりするけどはてなブログPC版ならマウスオーバーで脚注が表示されるので便利)

はてなブログで「脚注」を付ける方法

はてなブログでどうやってこれを使うか方法がわかりませんでしたが、調べてみると使い方はとても簡単でした。

f:id:yonta24:20141212234017p:plain

と、文章の後に「((」半角の二重丸括弧で囲ってやると自動的にできます。試しにやってみると上の文は以下のように、「※1」とリンクが貼られている状態になっています。「見たまま編集モード」でも可能です。

あいうえお*2

おお!簡単。これでこれからは補足的*3な説明*4がバリバリ*5付けられる。面白い。

ちなみに編集画面のツールにある「脚注ボタン」を使ってもできます。文章を書いておいて、脚注にしたい部分を選択し「脚注ボタン」をクリックすれば二重丸カッコが付きます。*6

f:id:yonta24:20141212234949j:plain

(追記)スマホではイマイチなのでやっぱり使わない?

このサイトの脚注をスマホで確認したのですが、スマホではポップアップが出ませんね。脚注をタップすると普通にリンク先が開くのみです。

スマホで脚注を多用すると…嗚呼これは使いにくい!というわけで、脚注を余りしないほうが良いのかもしれません。スマホでも脚注をタップでポップアップが出るようになったらまた利用を考えようかな。

SleipnirというAndroid用のブラウザではエクステンションを付けると、はてなやWikipediaの脚注をポップアップ出来るみたいです。こうなればいいなぁ~。

窓の杜 - 【杜のAndroid研究室】第91回:「Sleipnir Mobile for Android」のエクステンションで快適ブラウジング

はてなでも言及されている方がおられました。

ブログで注釈を多用すると読みにくくなることもある - 有限な時間の果てに

(追記)脚注と本文の境目がわかりにくいのでCSSを追加しました

脚注と本文の境目がわかりにくいのでCSSを追記して脚注エリアを枠で囲み、バックグラウンドカラーとマージン、パディングを設定しました。

/* div.footnote */
div.footnote {
    border-radius: 10px;
    background-color: #efebdd;
    font-size: 77%;
    margin: 0.1em !important;
    padding: 20px 10px 10px 20px !important;
}

です。無効化されちゃう部分には「!importtant」を付けました。コードは「デザイン」⇒「カスタマイズ」⇒「デザインCSS欄」にコピペです。

*1:これが脚注

*2:これはひらがなです

*3:ほそくてき

*4:せつめい

*5:モリモリ

*6:便利なのに今までなんで使わなかったのだろう…