折りたたみを改造する方法について
折りたたみを開いたり閉じたりすることでできることは今までは隠していたものを表示するだけでした。
しかし、この方法を使えば特定の折りたたみのみスタイルを変えたり、折りたたみを開くことで記事全体を書き換えたりすることができるのです!
やり方： まずはCSSを記事に追加します。
[[module CSS]]
a[name=clearance-1],a[name=clearance-4] {
position: fixed;
top: -9999px;
}
div.collapsible-block.custom div.collapsible-block-unfolded {
display: none;
}
[[/module]]さらに記事内で使う通常の折りたたみ構文ではなく、以下のようなものを使ってください。
[[div class="collapsible-block custom"]]
[[div class="collapsible-block-folded"]]
[[a class="collapsible-block-link" href="#clearance-4"]]+ 実験記録1を表示[[/a]]
[[/div]]
[[div class="collapsible-block-unfolded"]]
[[a class="collapsible-block-link" href="#clearance-1"]]- 隠す[[/a]]
[[div class="collapsible-block-content"]]
折りたたみテキスト
[[/div]]
[[/div]]
[[/div]]最後に記事の一番上の部分に以下の文を入れることで記事全体を書き換えることが可能になります。clearance-1とclearance-4は任意に書き換えることができます。
[[# clearance-1]][[#clearance-4]]例えば、記事の文字色を書き換えたい時は、
[[module CSS]]
#clearnce-4:target ~p {
color: red;
}
[[/module]]とすれば赤になります。
解説： これはページ内リンクとAタグの仕様、:target擬似クラスを利用しています。
詳しくはMDNなどを参照してください。
URLの最後に#から始まる文字列を付け加えるとその文字列と等しいnameまたはid属性を持つ部分にページをフォーカスします。
この時、ページ遷移や読み込みによるラグは発生しません。フォーカスした状態の時、フォーカスされた要素は:target擬似クラスを持つようになります。このクラスを持つことができるのはid属性のある要素とname属性がある要素だけです。
このいずれかを記事内のトップ部分に配置することで、element:target ~ elementというセレクタを使ってフォーカスされているときのみスタイルを変更可能です。
さらにフォーカスによるページの自動スクロールを防ぐために、フォーカスされている要素の位置をfixedに設定しています。