関連ページ一覧をページの横に表示するUserCSS(最小版)
概要
関連ページ一覧をページの横に表示するUserCSS(井戸端版)から余計な記述を削ったもの。
メンテナンス性を損なわないためにコメントは敢えて残してあります。
余計だと思う人は自分で削除してください。
相変わらず余計かどうかのチェックが甘いので、まだ削れる部分があるかもしれない（やりません）。
表示を極力変えないことを前提として削ったので、表示が多少変わってもいいならもう少し省略できるかも。
更新履歴
2024/09/20 関連ページリストのソートメニューが隠れていた不具合を修正
2024/06/01 公式のapp.css変更に伴って関連ページリストの検索ボックスの位置がずれていた問題を修正
2024/04/28 公式のapp.css変更に伴うスタイル崩れを修正
2023/04/16 関連ページリストの検索ボックスがまた埋もれていたのを修正
2023/01/30 関連ページリストの検索ボックスが埋もれていた問題を修正
ソース
style.css@media (min-width: 768px) {
/* 要素横並び */
div.page-wrapper {
display: flex;
justify-content: space-around;
}
div.col-page {
max-width: calc(960px + 216px + 34px)
}
.page:is(div, main) {
/* ページ本体（下に余白を作ってスクロールしやすくする） */
margin-bottom: calc(100vh - 200px);
}
div.drag-and-drop-enter {
order: 2;
width: calc(100% - 250px);
}
.related-page-list:is(div, section) {
order: 1;
flex-basis: 216px;
padding: 0 8px;
}
.related-page-list:is(div, section) .grid {
gap: 0;
}
.related-page-list:is(div, section) .links-container {
/* 関連ページリストを種類ごとに格納したコンテナ */
gap: 1em;
}
/* 関連ページリスト形状変更 */
.related-page-list:is(div, section) .grid li.relation-label,
.related-page-list:is(div, section) li.page-list-item,
.related-page-list:is(div, section) li.ellipsis {
/* サイズ変更（共通） */
width: 200px;
aspect-ratio: unset;
}
.related-page-list:is(div, section) .grid li.relation-label {
/* ラベルサイズ変更 */
height: auto;
margin-bottom: 2px;
}
.related-page-list:is(div, section) li.page-list-item,
.related-page-list:is(div, section) li.ellipsis,
.related-page-list:is(div, section) li.expand-stack {
/* カードサイズ変更 */
height: 50px;
margin-bottom: 3px;
}
.related-page-list:is(div, section) .grid li.relation-label .arrow {
display: none;
}
.related-page-list li.relation-label a {
/* 関連リンク ラベル */
display: flex !important;
padding: 0 !important;
align-items: stretch;
}
.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 li.expand-stack {
/* カード展開ボタン */
width: 200px;
margin-bottom: 6px;
}
.related-page-list li.expand-stack a {
/* カード展開ボタンの当たり判定と文字 */
display: block;
width: 200px;
padding: 7px 3px 7px 42px;
text-align: left;
}
.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;
}
.related-page-list div.toolbar {
/* 関連ページリストのツールバー */
display: flex;
flex-direction: column;
align-items: flex-end;
grid-template-columns: unset;
height: auto;
}
.related-page-list div.toolbar .related-page-list-search {
/* 関連ページリストの検索ボックス */
flex-direction: row;
display: flex;
vertical-align: middle;
width: 100%;
}
.related-page-list div.toolbar .related-page-list-search > .fa {
/* 検索アイコン */
vertical-align: middle;
height: fit-content;
margin: auto 1px;
}
.related-page-list div.toolbar .related-page-list-search input {
/* 検索ボックスの入力欄の大きさを抑える */
max-width: 180px;
}
}2 hop linkのラベル色を変えたい人向けの追加のCSS
css@media (min-width: 768px) {
.related-page-list div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: #333;
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: #666;
}
}