●「関連リンクを左列に持ってくる」に集中モードを追加する
どういうこと
●関連リンクを左列に持ってくるについて
関係ない文字列が視界に入ると煩わしいこともある（執筆に使っていてそう感じることがある）
よって、普段は見えないようにする設定を作ってみる
挙動
普段は非表示（存在しているが透明になっている状態）
関連リンクの領域をマウスオーバーで表示する
https://gyazo.com/5c9456f6327bd8ebd5e4becda405770e
※思いついたのを適当に書いた段階なので動作の保証はできません。
_CSS_related-page-list_leftに加えて以下のコードをSettingsに追加する
code:style.css
@media screen and (min-width: 768px) {
.related-page-list:not(:hover),
.related-page-list:not(:hover) *,
.related-page-list:not(:hover) *::before {
visibility: hidden;
}
.related-page-list:not(:hover) .grid li.relation-label {
border: unset;
}
}
※現在Noratetsu's Room（このプロジェクト）には適用していません。
備考
関連リンクが隠れているということが設定した人以外にはわからないため、自分以外の閲覧者が存在するプロジェクトでは何かしらの表示をしておく必要がある
よって個人の非公開プロジェクトでの利用を想定
code:style.css
@media screen and (min-width: 768px) {
.related-page-list:not(:hover):before {
visibility: visible;
content: 'マウスオーバーで\A関連リンク表示↓';
white-space: pre;
text-align: center;
margin: 0 auto;
}
}
一応こんな感じのを書いておけばわかるにはわかる（このままだと見た目が残念なので整える必要はある）
#UserCSS