関連ページリストを左側に
井戸端でも関連ページ一覧を左側に持ってきてみた
/Mijinko/関連ページ一覧をページの横に表示するUserCSS(井戸端版)
リンクをクリックするためだけにいちいち下までスクロールしなくていい利点があります
そのために移植した
面白そうだったので入れてみた
最初は気が散ってたけど慣れた
.description
も表示できないかな
やってみた
サムネイルが存在するリンクはそもそも .description
が存在しない
あーそうだった。
.description
が常に存在するのはトップページだけだった
表示しても、縦に長くするか文字を小さくするかしないと長文を表示できない
2列にしようかとも一瞬思ったけどめんどくさいのでやめた
試していただいてサンクスです
関連ページの位置を動的に切り替えることはできるのだろうか
ボタンクリックやキーボードショートカットで
CSSの変数の値を書き換えるUserScriptを作ればいける?
入れてみてるが、すごく便利とも感じられずにいる
2022/2/10
本文の幅が狭くなるのは良くない
最新版では修正しました
それでもウィンドウ幅によっては細くなりますが
(もしページ左右に余白が余っているなら、)ページの
max-width
を広げる手もあると思います
まぁもう少し使ってみよう
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;
}
}