関連ページ一覧をページの横に表示するUserCSS(井戸端版)
注意
そしてここのCSSはもう既にサポートしていません！
概要
https://gyazo.com/6942f74521f8f1bdf7422d5aaa3cc58a
井戸端版とは言うけど、プロジェクト設定のテーマがDefault Lightであればどのプロジェクトでも使えると思う。 それ以外のテーマでの動作検証はしていない。
ソースコード
使う時は色とスタイルの両方を自分のページにコピーしてください。 スタイルだけコピーすると表示が一部バグります。
コピーせずに直接インポートしても構いませんが、自己責任でお願いします。
特に、Mijinko_SD.iconがソースを修正している最中は直接影響を受けてしまいます。
色
code:style.css
body {
--card-hover-bg : rgba(0, 0, 0, 0.05);
--relation-label-2-hop-bg : #333; --relation-label-2-hop-hover-bg: #666; --relation-label-height : 20px; /* 関連リンクのラベルの高さ */
}
任意でbodyに以下の変数を追加できる
code:css
--card-border : ; /* 関連リンクの右側のライン */
--card-hover-title-color: ; /* 関連リンクをホバーした時のタイトル文字の色 */
--related-page-list-bg : ; /* 関連リストエリアの背景 */
--relation-title-font : ; /* 関連リンクのタイトル文字のフォント */
--relation-label-border : ; /* 関連リンクのラベルの下の線 */
スタイル
code: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;
background-color: var(--related-page-list-bg);
}
/* 関連リンク一覧形状変更 */
div.related-page-list{
font-family: var(--relation-title-font);
}
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: var(--relation-label-height);
margin-bottom: 0;
}
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;
background-color: inherit;
border-bottom: 2px solid var(--relation-label-border);
}
.related-page-list li.page-list-item a {
/* 関連リンク カード */
border-right: 6px solid var(--card-border);
}
.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 div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: var(--relation-label-2-hop-bg);
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: var(--relation-label-2-hop-hover-bg);
}
.related-page-list li.relation-label a:hover {
/* 関連リンク ラベル（ホバー時） */
filter: brightness(80%);
}
.related-page-list li.page-list-item a:hover {
/* 関連リンク カード（ホバー時） */
/* background-color: var(--card-hover-bg); */
}
.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;
line-height: var(--relation-label-height);
}
.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-family: var(--relation-title-font);
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:hover span.title {
/* リンクのタイトル文字（ラベル、ホバー時） */
}
.related-page-list ul.grid li.page-list-item a:hover .header .title {
/* リンクのタイトル文字（カード、ホバー時） */
color: var(--card-hover-title-color);
}
.related-page-list ul.grid li.page-list-item a:hover .hover {
/* opacity: 0 !important; */
}
.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: 25px; */
height: 100%;
}
.related-page-list ul.grid li.page-list-item a .icon {
/* リンクのアイコン（カード） */
height: 50px;
}
.related-page-list ul.grid li.splitter {
height: 5px;
}
}
code:disabled-style.css
.daiiz-text-bubble.related-page-list.daiiz-card.daiiz-card-root {
}