settings
code:style.css
/* --- htmra完全再現：中央寄せ & 記号隠し --- */
/* 1. [[ ]] を「大きくする」のではなく「中央寄せ」に変える */
.line .deco-\{ {
display: flex !important;
justify-content: center !important;
align-items: center !important;
width: 100% !important;
font-size: 1em !important; /* 文字が大きくなるのをリセット */
font-weight: normal !important; /* 太字をリセット */
border: none !important;
background: transparent !important;
}
/* 2. 画像そのものの設定 */
.line .deco-\{ .image {
display: inline-block !important;
max-width: 100% !important;
height: auto !important;
}
/* 3. 画面上の記号 [[ ]] を物理的に消す */
.line .deco-\{ > span {
display: none !important;
}
/* 4. 画像エリア（modal-image）だけは表示する */
.line .deco-\{ > .modal-image {
display: inline-block !important;
}
/* --- 関連ページ（Links）のカードのズレを強制修正 --- */
.links-1-hop > ul.grid {
display: flex !important;
flex-wrap: wrap !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.links-1-hop > ul.grid > li {
position: static !important;
top: auto !important;
left: auto !important;
margin: 10px !important;
transform: none !important;
}
.relation-label {
display: none !important;
}
/* --- 1. 既存のカード一覧から「特定の3枚」をボタンとして画面上部に隔離する --- */
position: fixed !important; /* 画面に対して固定位置にする */
top: 60px; /* 画面上部からの距離 */
z-index: 1000;
width: 130px !important;
height: 43px !important;
background-color: #f0f0f0 !important; border-radius: 18px !important;
border: 1px solid #ccc !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* 3つのボタンを横に並べる位置調整 */
/* --- 2. ボタン内の余計な装飾（折込・画像）を消す --- */
.page-list-item.pin::after,
.page-list-item.pin .pin-mark,
.page-list-item.pin .icon {
display: none !important;
}
/* 文字の中央寄せ */
.page-list-item.pin .title {
display: flex !important;
justify-content: center;
align-items: center;
height: 100% !important;
padding: 0 !important;
font-size: 13px;
}
/* --- 3. 一般カード（LOGOSなど）がボタンに被らないよう、開始位置を下げる --- */
.grid {
padding-top: 100px !important; /* ボタンの分だけ余白を作る */
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
}
/* 一般カードのサイズを元に戻す */
.page-list-item:not(.pin) {
position: relative !important;
left: auto !important;
top: auto !important;
width: 240px !important;
height: auto !important;
margin: 10px !important;
}
/* --- 関連ページエリアの青いラベルを完全に消去する --- */
/* 1. ラベル（Links）本体を非表示にする */
.relation-label.links {
display: none !important;
}
/* 2. カードが並ぶエリア（ul.grid）の余白と構造をリセット */
/* これにより、ラベルが消えた後の左側の巨大な隙間が埋まります */
.links-1-hop > ul.grid {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* 3. 各カード（li）を、絶対配置ではなく自然な並びにする */
.links-1-hop > ul.grid > li {
position: static !important;
margin: 10px !important;
}
/* 4. ページカードの装飾を剥ぎ取って画像のみにする */
.related-page-list .grid-item .title {
display: none !important;
}
.related-page-list .grid-item {
box-shadow: none !important;
background: transparent !important;
border: none !important;
}
/* 5. 念のため「3 pages」などのテキストも非表示に */
.relation-label.links a.title {
display: none !important;
}
/* --- 1. 全ページの関連ページラベル（青い帯など）を完全に隠す --- */
.relation-label,
.relation-label.links,
.relation-label.project-links,
.relation-label.external-links {
display: none !important;
}
/* --- 2. ラベルを消した後の左側の余白を詰める --- */
.links-1-hop > ul.grid,
.project-links > ul.grid,
.external-links > ul.grid {
margin-left: 0 !important;
padding-left: 0 !important;
}
/* --- 3. #center タグ自体を画面から隠す --- */ display: none !important;
}
/* --- バッククォートで囲った #center を画面から隠す --- */ .line code:contains("#center"),
display: none !important;
}
/* もし上記で消えない場合はこちら（コード要素自体を消す） */
.line code {
background-color: transparent !important;
border: none !important;
padding: 0 !important;
}
display: none !important;
}
/* --- htmra式：関連ページのズレを根絶し、綺麗に整列させる --- */
/* 1. 関連ページエリア全体を、Scrapboxの計算が効かない「自由な広場」にする */
.related-page-list {
display: block !important;
}
/* 2. ラベルとカードを仕切る「箱」の制限をすべて解除する */
.related-page-list .flex-box {
display: contents !important; /* 親の枠組みを無視して中身を直接並べる */
}
/* 3. カードが並ぶリスト(ul)を、Scrapboxの座標計算(absolute)から解放する */
.related-page-list ul.grid {
display: flex !important;
flex-wrap: wrap !important;
gap: 12px !important; /* カード同士の間隔をここで固定 */
padding: 0 !important;
margin: 20px 0 !important;
width: 100% !important;
height: auto !important; /* Scrapboxが計算した高さを無視 */
}
/* 4. 各カード(li)の「ズレ」の元凶である座標指定(top, left)を完全に殺す */
.related-page-list ul.grid li.grid-style-item {
position: relative !important; /* absolute（絶対配置）を解除 */
top: 0 !important; /* 上からのズレをリセット */
left: 0 !important; /* 左からのズレをリセット */
margin: 0 !important;
transform: none !important; /* 回転やズレの変形をリセット */
width: 140px !important; /* カードの横幅を固定（お好みで調整） */
}
/* 5. 青いラベル(Links)や縦棒を非表示にする */
.relation-label,
.page-list-status,
.status-bar {
display: none !important;
}
/* 6. カードを画像のみにする（htmra仕様） */
.related-page-list .grid-item .title {
display: none !important;
}
.related-page-list .grid-item {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}