settings

下にある関連記事を左に持ってくる

https://gyazo.com/0f1ceb568903ee3a90b4ca533022a823

:has(.links-container) は、子や孫要素にclass=.links-containerがあれば有効化される指定

.links-containerが他ページの枠

code:style.css

/* 外部リンクにマークをつける */

.line a.link:not(.icon):after {

content: '\f35d';

font-family: 'Font Awesome 5 Free';

font-weight: 900;

font-size: .8em;

margin-left: .2em;

text-decoration: none;

display: inline-block; // inline 要素だと underline 残る

}

@media (min-width: 768px) {

/* 要素横並び */

div.page-wrapper:has(.links-container) {

display: flex;

justify-content: space-around;

}

div.col-page:has(.links-container) {

max-width: calc(960px + 216px + 34px)

}

div.page-wrapper:has(.links-container) .page:is(div, main){

/* ページ本体（下に余白を作ってスクロールしやすくする） */

margin-bottom: calc(100vh - 200px);

}

div.page-wrapper:has(.links-container) div.drag-and-drop-enter {

order: 2;

width: calc(100% - 250px);

}

.related-page-list:is(div, section):has(> .links-container) {

order: 1;

flex-basis: 216px;

padding: 0 8px;

}

.related-page-list:is(div, section):has(> .links-container) .grid {

gap: 0;

}

.related-page-list:is(div, section):has(> .links-container) .links-container {

/* 関連ページリストを種類ごとに格納したコンテナ */

gap: 1em;

}

/* 関連ページリスト形状変更 */

.related-page-list:is(div, section):has(> .links-container) .grid li.relation-label,

.related-page-list:is(div, section):has(> .links-container) li.page-list-item,

.related-page-list:is(div, section):has(> .links-container) li.ellipsis {

/* サイズ変更（共通） */

width: 200px;

aspect-ratio: unset;

}

.related-page-list:is(div, section):has(> .links-container) .grid li.relation-label {

/* ラベルサイズ変更 */

height: auto;

margin-bottom: 2px;

}

.related-page-list:is(div, section):has(> .links-container) li.page-list-item,

.related-page-list:is(div, section):has(> .links-container) li.ellipsis,

.related-page-list:is(div, section):has(> .links-container) li.expand-stack {

/* カードサイズ変更 */

height: 50px;

margin-bottom: 3px;

}

.related-page-list:is(div, section):has(> .links-container) .grid li.relation-label .arrow {

display: none;

}

.related-page-list:has(> .links-container) li.relation-label a {

/* 関連リンク ラベル */

display: flex !important;

padding: 0 !important;

align-items: stretch;

}

.related-page-list:has(> .links-container) li.relation-label a,

.related-page-list:has(> .links-container) li.page-list-item a {

/* 関連リンク ラベル・カード（共通） */

border-radius: 0;

}

.related-page-list:has(> .links-container) ul.grid:hover li.relation-label a,

.related-page-list:has(> .links-container) div.links-2-hop ul.grid:hover li.relation-label a,

.related-page-list:has(> .links-container) li.page-list-item a:hover {

/* 関連リンク ラベル・カード（共通、ホバー時） */

transition: 0s;

}

.related-page-list:has(> .links-container) li.relation-label a:hover {

/* 関連リンク ラベル（ホバー時） */

filter: brightness(80%);

}

.related-page-list:has(> .links-container) li.ellipsis a {

/* 2 hopが大きすぎるときに出る三点ボタン */

padding: 0;

}

.related-page-list:has(> .links-container) li.ellipsis a div.circle {

/* 三点ボタンをホバーした時に表示される丸 */

height: auto;

}

.related-page-list:has(> .links-container) li.expand-stack {

/* カード展開ボタン */

width: 200px;

margin-bottom: 6px;

}

.related-page-list:has(> .links-container) li.expand-stack a {

/* カード展開ボタンの当たり判定と文字 */

display: block;

width: 200px;

padding: 7px 3px 7px 42px;

text-align: left;

}

.related-page-list:has(> .links-container) span.kamon::before {

/* 鎖マークの大きさ */

font-size: 14px;

}

.related-page-list:has(> .links-container) li.page-list-item .content > .description {

display: none;

}

.related-page-list:has(> .links-container) li.relation-label a span.title,

.related-page-list:has(> .links-container) 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:has(> .links-container) li.relation-label a span.title {

/* リンクのタイトル文字がある空間（ラベル） */

padding: 0 3px;

}

.related-page-list:has(> .links-container) ul.grid li.page-list-item a .header {

/* リンクのタイトル文字がある空間（カード） */

padding: 7px 3px;

}

.related-page-list:has(> .links-container) li.relation-label a span.title,

.related-page-list:has(> .links-container) ul.grid li.page-list-item a .header .title {

/* リンクのタイトル文字（共通） */

font-size: 14px;

font-weight: bold;

}

.related-page-list:has(> .links-container) li.relation-label a:hover span.title,

.related-page-list:has(> .links-container) ul.grid li.page-list-item a:hover .header .title {

/* リンクのタイトル文字（共通、ホバー時） */

transition: 0s;

}

.related-page-list:has(> .links-container) li.relation-label a span.kamon.icon-lg,

.related-page-list:has(> .links-container) 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:has(> .links-container) li.relation-label a span.kamon.icon-lg {

/* リンクのアイコン（ラベル） */

height: 100%;

}

.related-page-list:has(> .links-container) ul.grid li.page-list-item a .icon {

/* リンクのアイコン（カード） */

height: 50px;

}

.related-page-list:has(> .links-container) ul.grid li.splitter {

height: 5px;

}

.related-page-list:has(> .links-container) div.toolbar {

/* 関連ページリストのツールバー */

flex-direction: column;

align-items: flex-end;

grid-template-columns: unset;

height: auto;

}

.related-page-list:has(> .links-container) div.toolbar .related-page-list-search {

/* 関連ページリストの検索ボックス */

flex-direction: row;

display: flex;

vertical-align: middle;

width: 100%;

}

.related-page-list:has(> .links-container) div.toolbar .related-page-list-search > .fa {

/* 検索アイコン */

vertical-align: middle;

height: fit-content;

margin: auto 1px;

}

.related-page-list:has(> .links-container) div.toolbar .related-page-list-search input {

/* 検索ボックスの入力欄の大きさを抑える */

max-width: 180px;

}

}