Settings
いらっしゃませ。
横幅
code:style.css
.col-page {
max-width: 1200px;
}
窓辺の砂場さんの白デザイン
「読むだけの人にとって、Scrapboxは読みやすいのか？」という点が気になる src 同感だったterang.icon
code:style.css
/* 白っぽくするためのスタイル定義 */
body, .page { background-color: #fff; box-shadow: unset } :root {
--search-form-text-color: #262626 !important; --search-form-icon-color: #262626 !important; }
/* .page {padding-bottom: 21px } */
.page {
padding: 42px 10em 21px;
}
@media (min-width: 768px) and (max-width: 991px){
.page {
padding: 42px 42px 21px;
}
}
@media (max-width: 767px){
.page {
padding: 28px 21px 21px;
}
}
.navbar {
padding-left: 8px;
padding-right: 8px;
}
.navbar-default { background-color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(0,0,0,.067) }
.navbar-default:hover { background-color: rgba(245,245,245,.9) }
.navbar .navbar-brand .icon-arrow-down { display: none }
.search-form .form-group input { border: 1px solid rgba(0,0,0,.13) }
.search-form .form-group button { color: rgba(0,0,0,.13) }
.navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.067) }
.navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }
.brand-icon {
opacity: 40%;
}
.navbar .row {
height: 42px;
gap: 12px;
}
/* 検索ボックスを右寄せにする仕掛け */
.navbar .row .col-menu { width: unset }
.navbar .row:has(.col-search) {
grid-template-columns: 1fr 1.2fr 32px;
}
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 130% }
/* 本文のフォント設定: 文字詰め */
.line .text:not(.code-block) { font-feature-settings: "pkna" }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
/*font-size: calc(1.2vw + 2rem); font-weight: 600; */ line-height: 1.2 !important;
border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem; margin-bottom: 2rem } }
@media (max-width: 767px){
.app:not(.presentation) .editor { font-size: 110% }
}
/* カード型ページリンクの枠 */
.grid li.page-list-item a { border: 1px solid rgba(0,0,0,.14) }
.grid li.page-list-item a .header { border-top: unset }
本文の最後にテキスト挿入
code:style.css
.app:not(.presentation) .page.not-persistent::after {
white-space: pre-wrap;
display: block;
margin-top: 3rem;
padding: 0;
text-align: center;
content: 'ごめんなさい。まだ本文がありません。';
font: 500 normal 1.5rem/1 sans-serif;
}
.app:not(.presentation) .drag-and-drop-enter::after {
content: '';
border-bottom: solid rgba(0,0,0,.2);
border-width: 1px 0;
margin-bottom: 6px;
display: block;
}
本文の最後にテキスト挿入の続き
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
バッジ等の非表示
code:style.css
.quick-launch .private-badge, .quick-launch .plan-badge {
display: none !important;
}
display: none !important;
}
赤リンクの関連ページリストの非表示
code:style.css
.related-page-list .empy-links {
display: none;
}
特定のアイコンのクリックを不可にする
code:style.css
pointer-events: none;
}
UserCSSを書いたページを非表示
code:style.css
:is(.page-list-item, .stream .page):is(
) {
display: none !important;
}
タイトル周辺
code:style.css
.project-home > .title {
line-height: 1.2em;
font-size: 1.37em;
text-align: left;
display: block;
font-weight: normal;
}
.project-home > .title::before {
content: '';
background-size: contain;
width: 42px;
height: 34px;
display: inline-block;
margin-right: .2em;
}
/* .navbar .row .project-home { */
/* padding-top: 3px; */
/* } */
番号付きリストにFont Awesomeを使う
code:style.css
.line.number-list .indent-mark .dot {
background-color: transparent;
}
.line.number-list .dot {
background-color: transparent;
display: list-item; /* 表示する */
}
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
top: calc(100% - .8em);
content: '\f292'; /* # */
font-weight: 900;
font-size: 11px;
}
トップのグリッド
code:style.css
.page-list ul.grid {
margin-right: 0;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
@media (min-width: 480px) {
.page-list ul.grid {
margin-right: 0;
grid-template-columns: repeat(auto-fill, minmax(173px, 1fr));
}
}
/* Default (Small): 6 columns */
.page-list .grid li.page-list-item,
.list li.page-list-item {
height: 210px;
padding: 0.5%;
margin: 0;
}
.page-list .grid li.page-list-item {
width: 100%;
height: 250px;
}
.list li.page-list-item {
background: none;
box-shadow: none;
}
.related-page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(149px, 1fr));
}
@media (min-width: 480px) {
.related-page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
}
}
@media (min-width: 768px) {
.page-list .grid li.page-list-item {
width: 100%;
height: 230px;
}
.related-page-list .grid li {
width: 100%;
height: 210px;
}
}
@media (min-width: 1050px) {
.page-list .grid li.page-list-item {
width: 100%;
height: 210px;
}
}
.list li.page-list-item a,
.grid li.page-list-item a {
position: relative;
overflow: hidden;
padding: 1em;
width: 100%;
height: 100%;
box-shadow: 4px 1px 10px rgba(0, 0, 0, .15);
/* border-radius: 0 !important; */
}
.list li.page-list-item a {
grid-template-rows: 100%;
}
/* Header */
.grid li.page-list-item a .header,
.list li.page-list-item a .title-with-description {
/* border: none; */
padding: .8em 0 !important;
margin: 0;
}
.related-page-list .grid li.page-list-item a .header, .related-page-list .list li.page-list-item a .title-with-description {
padding-top: .5em !important;
}
.list li.page-list-item a .title-with-description {
max-height: none;
font-size: 1.7em;
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
}
.grid li.page-list-item a .header {
grid-row: 1;
grid-column: 1 / 3;
}
/* .page-list .grid li.page-list-item.pin a .header { */
/* grid-column: 1; */
/* } */
/* @media (min-width: 1050px) { */
/* .page-list .grid li.page-list-item.pin a .header { */
/* grid-column: 1 / 3; */
/* } */
/* } */
.related-page-list .grid li.page-list-item .header {
padding: 0;
}
/* Title */
@media (min-width: 480px) {
.grid li.page-list-item a .title {
display: block;
font-size: 1.1em !important;
max-height: none !important;
}
.grid li.relation-label a .title {
font-size: 1.1em !important;
}
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item. a .title {
font-size: 1.3em !important;
}
}
@media (min-width: 1050px) {
.page-list .grid.grid-md li.page-list-item a .title {
font-size: 1.3em !important;
}
.page-list .grid.grid-lg li.page-list-item a .title {
font-size: 1.6em !important;
}
}
/* Description */
.list li.page-list-item a .description,
.grid li.page-list-item a .description {
margin: 0 !important;
padding: 0 !important;
height: auto;
transition: inherit;
max-height: 100%;
grid-row: 2;
grid-column: 1 / 3;
line-height: 1.5;
}
@media (min-width: 480px) {
.list li.page-list-item a .description,
.grid li.page-list-item a .description {
font-size: 0.9em !important;
}
}
@media (min-width: 768px) {
.page-list .grid.grid-lg li.page-list-item a .description {
font-size: 1.1em !important;
}
}
@media (min-width: 1050px) {
.page-list .grid.grid-md li.page-list-item a .description {
font-size: 1.1em !important;
}
.page-list .grid.grid-lg li.page-list-item a .description {
font-size: 1.3em !important;
}
}
/* .page-list .grid li.page-list-item.pin:first-child a .description { */
/* grid-column: 1 / 3 !important; */
/* } */
.related-page-list .grid li.page-list-item .description {
padding: 0;
}
.related-page-list .grid li.page-list-item.empty .description {
display: none;
}
外部リンクにアイコンを表示する
code:style.css
div.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon):is(
)::after {
display: none;
}
.line span:not(.deco-\.) > span > a.link:is(
)::before {
display: inline-block;
width: 1em; /*16px;*/
height: 1em; /*16px;*/
vertical-align: -1px;/*-3px;*/
font-size: .8em;
text-align: center;
background-size: contain;
background-repeat: no-repeat;
font-family:"Font Awesome 5 Free","Font Awesome 5 Brands";
/* margin-right: 2px; */
}
content: '\f1c1';
font-weight: 400; /* use Regular Style */
margin-right: 1px;
}
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f09b';
font-weight: 400;
margin-right: 1px;
}
:is(.line, .line .deco) a.link:is(
)::before {
content: '\f266';
font-weight: 400;
margin-right: 4px;
}
.line .deco-\. a.link:is(
) span.char-index {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line .deco-\. a.link:is(
) span.char-index:nth-of-type(30) ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
/* External link にアイコンをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
font-size: 1.1rem;
display: inline-block;
}
引用の表示制御
code:style.css
.line .quote {
font-size: 95%;
}
/* インライン引用 */
.deco-\" {
border-radius: .2em;
padding: 0 .4em;
/* background-color: rgba(128,128,128,0.1); */
background-color: var(--quote-bg-color, rgba(0, 0, 0, 0.05));
font-size: 95%;
font-style: italic;
}
.line:not(.cursor-line) .deco-\"::before {
font-size: 85%;
/* font-family: 'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: '\f10d';
position: relative;
top: -0.5em;
left: -0.2em;
}
出典記法
code:style.css
.line .deco-\. {
font-size: .62em;
position: relative;
top: -0.5em;
}
.line:not(.cursor-line) .deco-\. a:is(.page-link:not(.icon), .link) span:not(.empty-char-index) + span + span ~ span {
display: inline-block;
width: 0;
text-indent: -9999px;
}
.line:not(.cursor-line) .deco-\. .page-link:not(.icon) span.empty-char-index ~ span.char-index {
display: inherit;
width: inherit;
text-indent: inherit;
}
.line:not(.cursor-line) .deco-\. a.page-link:not(.icon) span.empty-char-index + span::before {
content: "#";
}
.line .deco-\. :is(.page-link:not(.icon), .link)::before {
display: inline-block;
min-width: 1.15em;
padding-left: 1px;
/* padding: 0 1px; */
font-family: "Font Awesome 5 Free","Font Awesome 5 Brands";
text-align: center;
vertical-align: middle;
font-weight: 900;
content: "\f02d";
}
/* 斜体を取り消す */
.line .deco-\..deco-\/ {
font-style: initial;
}
.line .deco-\..deco-\/ :is(.page-link:not(.icon), .link)::before {
font-weight: 400;
content: "\f15c";
}
Youtubeを大きく表示しない
code:style.css
iframe.youtube {
max-width: 60%;
max-height: 25vw;
}
本文の最後にテキスト挿入
code:style.css
.app:not(.presentation) section.related-page-list {
position: relative;
padding-top: 5.5rem;
margin-top: 0;
}
.app:not(.presentation) section.related-page-list::before {
position: absolute;
display: inline-block;
content: '';
background-size: contain;
height: 3.5rem;
width: 18.5rem;
top: 0;
right: 0;
}
ピン留めのデザイン
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
.grid li.pin {
height: 56px !important;
margin-bottom: 5px !important;
}
@media screen and (max-width: 480px) {
.grid li.pin {
width: 30vw !important;
height: 52px !important;
margin-right: 2.5vw !important;
}
.grid li.page-list-item.pin a .title {
text-align: left !important;
}
}
@media (min-width: 480px) {
}
.grid li.page-list-item.pin a {
margin: none;
}
.grid li.page-list-item.pin a .content {
height: auto;
}
.grid li.page-list-item a .header.pinned {
border-top:none;
padding: 0 !important;
}
.grid li.page-list-item.pin a .title {
font-size: 12px;
max-height: 20px !important;
text-align: center;
}
.grid li.page-list-item.pin a .content :is(.description,.icon) {display: none;}
.grid li.page-list-item a .pin {background: none;}
code:style.css
.line .quote:has(.indent-mark) {
display: flex;
padding-right: 3px;
}
![https://i.gyazo.com/e197e8a2929bf478662025c39da90bf2.png");](https://i.gyazo.com/e197e8a2929bf478662025c39da90bf2.png");){kind=link}
![https://i.gyazo.com/36bcf3166e37234ee088c9e7d3978414.png");](https://i.gyazo.com/36bcf3166e37234ee088c9e7d3978414.png");){kind=link}