●関連リンクを左列に持ってくる - Noratetsu's Room（のらてつ研究所）

●関連リンクを左列に持ってくる

https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20

意図

関連リンクを見ながら考えたいケースが多々あるので同時に表示されていてほしいと思った

https://gyazo.com/e31e8551319639cb183a9f1ca15b77bb

現在のコード→_CSS_related-page-list_left

特徴

ウインドウサイズが768px以上の場合のみ適用

エディタ部分の左側に関連リンク一覧を表示する

エディタ部分のスクロールに影響を受けず、関連リンクは関連リンクでスクロールする

関連リンクの件数をカウント（だいたいどのくらいあるのかがわかる、程度の意味）

空リンクは非表示（※なお表示する形に容易に戻せるようにしました）

オプション

普段は非表示にする→●「関連リンクを左列に持ってくる」に集中モードを追加する

PageMenuでオンオフする→●PageMenu：「関連リンクを左列に持ってくる」をオンオフする

/icons/水平線.icon

以下経緯や更新履歴

参考　/kiito-themes/ページ

鍵になるCSS

code: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に余計な記述があり自分の画面だけバグってたパターン…