●関連リンクを左列に持ってくる
意図
関連リンクを見ながら考えたいケースが多々あるので同時に表示されていてほしいと思った
現在のコード→_CSS_related-page-list_left
特徴
ウインドウサイズが768px以上の場合のみ適用
エディタ部分の左側に関連リンク一覧を表示する
エディタ部分のスクロールに影響を受けず、関連リンクは関連リンクでスクロールする
関連リンクの件数をカウント（だいたいどのくらいあるのかがわかる、程度の意味）
空リンクは非表示（※なお表示する形に容易に戻せるようにしました）
オプション
普段は非表示にする→●「関連リンクを左列に持ってくる」に集中モードを追加する
PageMenuでオンオフする→●PageMenu：「関連リンクを左列に持ってくる」をオンオフする
以下経緯や更新履歴
鍵になるCSS
css@media (min-width: 768px) {
.page-wrapper {
flex-direction: row-reverse;
}
}ポイントは、エディタ部分と関連リンク部分がひとつの箱に入っていて、並べる順番を逆転させれば関連リンクをエディタの手前に持ってこれるということ
持ってきたら色々サイズを変えたりして横に並ぶように
※/kiito-themesは多分本文を選択できないように設定されている
コード上部の「style.css」の部分をクリックすればCSSが別タブにまとめて表示されるのでそこからコピペできます
…ということに「すげぇ！」と思ってスタートしたけど、結局スクロールをあれこれするために
position: fixed; で固定したので flex-direction: row-reverse; は意味をなさなくなった左に移動するという発想はヒントになった
デザインについて
リスト状にしたかったので概要やサムネイルは非表示
文字も小さめ
独立してスクロールする
ついでにエディタ部分もエディタ部分だけでスクロールさせることにした
関連ページの数が表示されたら嬉しいなと思ったのでcounterつけた
のらてつ研究所では関連ページのcounterが一部バグるけどそれは多分
display: none; で非表示にしているページがあるせいそういうことをしていないなら正しく表示されると思います
文字色などは私の環境に合わせているのでテーマによって調整が必要
その他の要素も私の環境で大体良い感じになるようにしているだけなので品質の保証はしません
細かく記述の意味を説明した方が親切だとわかってはいるけどちょっと大変なのでコードを置いておくだけにします
実際のCSS→_CSS_related-page-list_left ↓下に改良版あり
※冒頭のスクリーンショットとは一部異なっています
2021/11/27
やっぱり
flex-direction: row-reverse; 使ったバージョンにした→_CSS_related-page-list_left2 ↓理由あってこれは没（2021/12/01）
見た目はほとんど変わりません
ちなみに
せっかくFlexbox設定なのだから横幅を数値設定しないで1:4とかの比率でやるか、と思って一度やってみたものの、関連ページが存在しないときの挙動がよろしくなくてスマートな改善方法がわからなかったのでウインドウサイズに応じた数値設定をすることにした（一番下の記述）
どうせだからウインドウサイズによって関連ページリストとエディタの幅の割合がちょっと変わるようにした
どっちがどのくらいの幅あると嬉しいかはウインドウサイズによって違うなと思ったので
多分ページを遷移する時の挙動が早くなった
最初のバージョンだと当方の環境では遷移時にレイアウトが一瞬崩れてた
（描画の速さが何によってどう決まるのかは私はよくわかっていません）
謎の挙動
ページリンク踏んで別のページに移るとスクロールの位置を引き継いでしまう？
おおん…なんでじゃ…
あと今チェックしたら元のバージョンのレイアウトがなんか変だな
んん？ 別のプロジェクトにインポートしてチェックしても変にはならない…🤔
→mypageにインポートしているCSSに余計な記述があり自分の画面だけバグってたパターン…
関連ツイート
>見に来た人にとってこの設定が嬉しいかどうかはわからないけど、見に来た人が触れないとどういうことなのかわからないと思ったので設定しておくことにした。 のらてつ(@Foam_Crab)
>
2021/12/01
現状だとページ内検索で自動スクロールしなくて大変に不便なことに気がついたので修正します
関連リンクが左にあるのはいいんだけどエディタ部分にスクロールつけてるのがまずい
→多分直った
_CSS_related-page-list_leftに戻して修正を加えた
2022/02/06
空リンクを非表示にしているが、表示する形にしやすいように修正
2023/03/17
今更ながら関連リンクリストの検索機能追加に対応
自分の環境では良い感じに見えていますが、他の環境はチェックしていません
!importantを設定していた部分を修正して!important除去
2024/03/14
Infobox機能の邪魔をしないように調整（応急処置）
2024/04/26
Scrapbox自体の仕様変更に対応（応急処置）