脚注の諸所


自動スクロールの機能停止

Created by physicslikephysicslike


皆さんはスマートフォンなどで記事を閲覧する際、脚注を読もうと思って数字をタップした際、強制的にスクロールして面倒だと思ったことは無いでしょうか?一応再度脚注一覧内の数字をタップすれば元の場所に戻れますが、誤爆の危険性があるのでPCでのマウスオーバー時みたいに小さいカラムで表示して貰いたいと考えている人も多いはずです。

そんな場合、以下のようにCollapsible BlocksとFootnoteblockの構文を組み合わせて脚注を隠すことで、強制スクロールを防止することができます。

[[collapsible show="脚注" hide="脚注を閉じる" hideLocation="bottom"]]
[[footnoteblock]]
[[/collapsible]]

脚注が多いこのような記事で特に有効ですので、記事を書いていて脚注がどうしても多くなってしまったな、というときは使用してみてはいかがでしょうか

デモ

脚注消失

Created by ukarayakaraukarayakara


脚注で割り込んでくるナニカがいる報告書を書きたい、しかし「脚注」で下にズラズラ並ぶと見栄えが悪いし冷める……。

そんなときに!

[[module css]]
.footnotes-footer {
display:none;
}
[[/module]]

このモジュールでスッキリ! 脚注の文章が下に並ばなくなります。あなたの記事の脚注はもはや脚注ではなく、おぞましい何かの囁きになります!あとは単に脚注がやたら多い時も助かると思いますが、「これ脚注として機能してないじゃん」というツッコミを受けるでしょう、たぶん、おそらく。

デモ


脚注の位置及びタイトル変更

Produced by krt_wkrt_w


脚注の非表示は、実は↓これでもできます。

[[size 0%]][[footnoteblock]][[/size]]

また、[[footnoteblock]]を利用すれば、

脚注の位置とタイトルを変えることができます。

[[footnoteblock title="ここにタイトル"]]

↑これを置いた位置に脚注が来ます。

日本語表現用Wiki構文拡張スタイルの偽造タグを使用するとき、[[footnoteblock]]を偽造タグのすぐ上に置けば、より本物のタグに似せることもできます。

デモ

footnote-blockのhtml構成

Created by C-takeC-take


脚注の小ネタです。脚注には画像を載せる事ができます。例えば下記のように書くと

財団のロゴマーク[[footnote]]
このようなマーク
[[image http://www.scp-wiki.net/local--files/component:theme/logo.png]]
[[/footnote]]は良い

と書くと脚注内に画像を表示できます。

で、下記のCSSを適用すると画面下([[footnoteblock]]で位置調整をできる脚注)からのみ画像を消す事ができます。

[[module css]]
.footnote-footer img{
display:none;
}
[[/module]]

脚注番号にカーソルを合わせた時のみビックリ系画像を表示するギミックを作ったりする事ができます



デモ

脚注ウィンドゥの色変更

Produced by C-takeC-take


下記のCSSで脚注番号にカーソルを合わせた時に表示されるウィンドゥの色を変更する事ができます。

[[module css]]
.hovertip {
border:ridge #EEE 3px !important;
}
.hovertip .content {
background-color: #000;
color:#FFF;
}
[[/module]]

上記の内hovertipはウィンドゥの枠線のstyle、hovertip .contentはその中にある文章等のstyleを設定します。
このCSSの場合は黒背景に白字が書かれたウィンドゥが出るようになります。

脚注を使ったちょっとした演出に使えれば幸いです。

デモ

スマートフォン時のみ脚注の自動スクロールの機能停止

Created by C-takeC-take


physicslikephysicslikeさんが紹介した構文の発展形です。スマートフォン時(正確に言えば閲覧している画面サイズが小さい時)のみ、[[footnoteblock]]の脚注を折り畳み文に格納します。

まず下記のCSSを作ります。

[[module css]]
@media (min-width: 768px) {
.responsivecollapsible .collapsible-block-folded{
display:none !important;
}

.responsivecollapsible .collapsible-block-unfolded{
display:block !important;
}

.responsivecollapsible .collapsible-block-unfolded-link{
display:none !importat;
}
}
[[/module]]

上記CSSを適用した後、[[footnoteblock]]を下記の様に記します。

[[div class="responsivecollapsible"]]
[[collapsible show="脚注" hide="脚注を閉じる" hideLocation="bottom"]]
[[footnoteblock]]
[[/collapsible]]
[[/div]]

これで脚注部分はスマートフォンで閲覧した時折り畳みに格納され、それ以外の場合は通常通りに表示されるようになります。

仕組みを簡単に説明すると、最初に提示したCSSによって[[div class="responsivecollapsible"]]の中に入れられた[[collapsible]]はスマートフォン(ぐらいのサイズの画面)で閲覧した時のみ機能する様になるのです。その中に[[footnoteblock]]を入れただけなので、もし「スマートフォン閲覧時のみ機能する[[collapsible]]が欲しい」と思っている方には色々と応用が効くと思います。

デモ

2重脚注

Created by C-takeC-take


[[footnote]]の中に[[footnote]]を入れる事はできませんが[[bibliography]](参考文献)を用いる事で疑似的に入れ子にする事ができます。

ただし、[[bibliography]]の場合は参考文献の名前付きのリストを作成し、その名前を本文に埋め込む事によって使用するものなので[[footnote]]と使い勝手が違います。ご注意ください。

bibliographyの詳細は下記をご参照ください。
参考文献

また、脚注の見た目(文字の右上に数字がつく)なら^^文字^^という上付き文字の構文で再現できます。
行の装飾

ただし、この方法には欠陥があります。それは[[bibliography]]@@ではカーソルを合わせた時に出る表示で「click to scroll to bibliography」と「参考文献にスクロールする」と表示されてしまう事です。

そこで下記のCSSを使ってこの部分を書き換える事ができます(脚注と参考文献、両方のclick to scroll to…が書き換わります)。

[[module css]]
 
.hovertip .content div:nth-child(3) {
color:transparent;
   -ms-user-select: none; /* IE 10+ */
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
position:relative;
}
.hovertip .content div:nth-child(3):after {
content:"(click to scroll to にゃーん)";
color:#222;
position:absolute;
top:0;
left:0;
display:block;
}
[[/module]]

上記のCSSの中で

content:"(click to scroll to にゃーん)"

をご自身の好きな言葉に書き換えてください。

デモ

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License