generated at
関連ページリストを左側に

井戸端でも関連ページ一覧を左側に持ってきてみたMijinko_SD
/Mijinko/関連ページ一覧をページの横に表示するUserCSS(井戸端版)
/ed/_CSS_Pageの流用
かっこいい!takkerinajobteyoda7blu3mokuuote
リンクをクリックするためだけにいちいち下までスクロールしなくていい利点がありますMijinko_SD
そのために移植した
面白そうだったので入れてみたblu3mo
目に入る関連ページが増えるので、scrapboxサーフィンがとても捗る
最初は気が散ってたけど慣れたteyoda7

.description も表示できないかなtakker
やってみたMijinko_SD
サムネイルが存在するリンクはそもそも .description が存在しない
あーそうだった。 .description が常に存在するのはトップページだけだったtakker
表示しても、縦に長くするか文字を小さくするかしないと長文を表示できない
2列にしようかとも一瞬思ったけどめんどくさいのでやめた
試していただいてサンクスですtakker


関連ページの位置を動的に切り替えることはできるのだろうかyosider
ボタンクリックやキーボードショートカットで
CSSの変数の値を書き換えるUserScriptを作ればいける?Mijinko_SD

入れてみてるが、すごく便利とも感じられずにいる 増井俊之 2022/2/10
本文の幅が狭くなるのは良くない
関連ページリストを左側に#61fe627d1280f0000061afecの値を大きくしてみるのはどうでしょうか?
最新版では修正しましたMijinko_SD
それでもウィンドウ幅によっては細くなりますが
(もしページ左右に余白が余っているなら、)ページの max-width を広げる手もあると思いますblu3mo
full page!!!!(ごり押し感)wogikaze.icon
まぁもう少し使ってみよう


style.css
@media (min-width: 768px) { /* 要素横並び */ div.page-wrapper { display: flex; justify-content: space-around; } div.col-page { max-width: calc(960px + 216px + 34px) } div.drag-and-drop-enter { order: 2; width: calc(100% - 250px); } div.related-page-list { order: 1; flex-basis: 216px; padding: 0 8px; } /* 関連リンク一覧形状変更 */ div.related-page-list .grid li.relation-label, div.related-page-list li.page-list-item, div.related-page-list li.ellipsis { /* サイズ変更(共通) */ width: 200px; } div.related-page-list .grid li.relation-label { /* ラベルサイズ変更 */ height: auto; margin-bottom: 2px; } div.related-page-list li.page-list-item, div.related-page-list li.ellipsis { /* カードサイズ変更 */ height: 50px; margin-bottom: 3px; } div.related-page-list .grid li.relation-label .arrow { display: none; } .related-page-list li.relation-label a { /* 関連リンク ラベル */ display: flex !important; padding: 0 !important; } .related-page-list li.relation-label a, .related-page-list li.page-list-item a { /* 関連リンク ラベル・カード(共通) */ border-radius: 0; } .related-page-list ul.grid:hover li.relation-label a, .related-page-list div.links-2-hop ul.grid:hover li.relation-label a, .related-page-list li.page-list-item a:hover { /* 関連リンク ラベル・カード(共通、ホバー時) */ transition: 0s; } .related-page-list li.relation-label a:hover { /* 関連リンク ラベル(ホバー時) */ filter: brightness(80%); } .related-page-list li.ellipsis a { /* 2 hopが大きすぎるときに出る三点ボタン */ padding: 0; } .related-page-list li.ellipsis a div.circle { /* 三点ボタンをホバーした時に表示される丸 */ height: auto; } .related-page-list span.kamon::before { /* 鎖マークの大きさ */ font-size: 14px; } .related-page-list li.page-list-item .content > .description { display: none; } .related-page-list li.relation-label a span.title, .related-page-list ul.grid li.page-list-item a .header { /* リンクのタイトル文字がある空間(共通) */ border-top: 0; width: 158px; padding: 7px 3px; margin-left: 42px; text-align: left; } .related-page-list li.relation-label a span.title { /* リンクのタイトル文字がある空間(ラベル) */ padding: 0 3px; } .related-page-list ul.grid li.page-list-item a .header { /* リンクのタイトル文字がある空間(カード) */ padding: 7px 3px; } .related-page-list li.relation-label a span.title, .related-page-list ul.grid li.page-list-item a .header .title { /* リンクのタイトル文字(共通) */ font-size: 14px; font-weight: bold; } .related-page-list li.relation-label a:hover span.title, .related-page-list ul.grid li.page-list-item a:hover .header .title { /* リンクのタイトル文字(共通、ホバー時) */ transition: 0s; } .related-page-list li.relation-label a span.kamon.icon-lg, .related-page-list ul.grid li.page-list-item a .icon { /* リンクのアイコン */ display: flex; position: absolute; align-items: center; justify-content: center; width: 30px; margin: 0; margin-left: 6px; padding: 0; } .related-page-list li.relation-label a span.kamon.icon-lg { /* リンクのアイコン(ラベル) */ height: 100%; } .related-page-list ul.grid li.page-list-item a .icon { /* リンクのアイコン(カード) */ height: 50px; } .related-page-list ul.grid li.splitter { height: 5px; } }