settings
フォントを変える
code:style.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&family=Zen+Kaku+Gothic+Antique:wght@300;400;500;700;900&family=Zen+Maru+Gothic:wght@400;500;700;900&family=Edu+VIC+WA+NT+Beginner:wght@400;500;600;700&display=swap');
/* 本文用 */
body, .title, .description, .line-title, .editor {
font-family: 'Inter', 'Zen Kaku Gothic Antique', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
}
/* 見出し用 */
.project-home .title,
.line-title,
strong.level-3,
strong.level-4,
strong.level-5,
strong.level-6,
strong.level-7,
strong.level-8,
strong.level-9,
strong.level-10 {
font-family: 'Edu VIC WA NT Beginner', 'Zen Maru Gothic', sans-serif;
}
サイト名の部分
code:style.css
.project-home .title {
font-size: 140%;
color: #363c49;
}
背景色を変える
code:style.css
:root {
--page-bg-color: #d9dfdf;
}
body {
background-color: var(--page-bg-color);
}
.grid li.page-list-item a {
background-color: var(--page-bg-color);
}
.page {
background-color: var(--page-bg-color);
}
.line span.code-block .code-block-start {
background-color: #acacac;
}
パラメータ調整機能を非表示
code:style.css_DISABLED
input.grid-size-range {
display: none;
}
div.page-sort-menu {
display: none;
}
a#dropdownMenuSort{
display: none;
}
ヘッダーまわりの調整
code:style.css
.navbar-default {
background-color: var(--page-bg-color);
}
.search-form .form-group input {
background-color: #f1f1f1;
border: none;
}
.navbar .navbar-menu > li > a > .kamon {
color: #4a4a4a;
}
.navbar-default .navbar-form {
border-color: transparent;
}
タイトルの調整
code:style.css
.line.line-title .text {
font-size: 1.3em;
line-height: 1.3;
font-weight: 200;
text-align: left;
margin-bottom: 2em;
}
@media screen and (max-width: 614px) {
.line.line-title .text {
font-size: 1.1em;
}
}
タイトルの下にちょっぴり線を引く
code:style.css.DISABLED
.line.line-title .text:before {
text-align: center;
content: '';
position: absolute;
bottom: 0em;
width: 2em;
height: 0.15em;
background-color: #ddd;
}
各アイテムまわりの調整
code:style.css
.grid li.page-list-item a {
background-color: #f1f1f1;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.grid li.page-list-item a:hover {
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.grid li.page-list-item a .header {
border-top: 0;
}
.grid li.page-list-item a .title {
font-weight: 400 !important;
}
リンク関連:色・見た目の調整
code:style.css
:root {
--page-link-color: #8b9c9c;
--card-description-link-color: #8b9c9c;
--page-link-hover-color: #7ac2c1;
--relation-label-links-bg: #7ac2c1;
}
.line a.page-link {
color: var(--page-text-color);
border-bottom: 1px solid var(--page-link-color);
}
.line a.page-link:hover {
/*color: #93c2c1;*/
}
.line a.empty-page-link {
color: #4a4a4a;
background: none;
border-bottom: 1px dashed #93c2c1;
}
各ページの調整
code:style.css
.page {
box-shadow: none;
}
スリムなテロメア from /scrasobox/スリムなテロメア
code:style.css
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #bbb }
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: transparent; width: 2px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: transparent; width: 5px }
ヘッダーメニューをカスタマイズ from /scrasobox/ヘッダーメニューをカスタマイズ
code:style.css_DISABLED
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #aaa; }
/* 2. ページ追加ボタンを検索ボックスの右に移動 */
.navbar-form { flex-flow: row-reverse }
.new-button { margin-left: 10px; margin-right: 0 }
箇条書きを控えめにする Fork from /scrasobox/箇条書きを控えめにする
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em;
width: .5em;
border-radius: 0;
background-color: rgba(200,200,200,1);
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0;
}
テーブルのセルをわかりやすく Fork from /scrasobox/テーブルのセルをわかりやすくする
code:style.css
.table-block table {
background-color: transparent;
border-collapse: separate;
border-spacing: 2px;
}
.table-block table tr td {
padding: .2em .6em;
background-color: rgba(0,0,0,0.04);
}
.table-block table tr:nth-child(even) td {
background-color: rgba(0,0,0,0.06);
}
/* 偶数行を濃くする */
.table-block table tr:first-child td {
font-weight: bolder;
text-align: center;
}
/* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child {
padding: 0;
background-color: transparent;
border-width: 0;
}
ハッシュタグをラベル風にする from /ootaki/settings
code:style.css
/* #で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: var(--page-link-hover-color);
color: white !important;
font-size: 0.8em;
border-bottom: none !important;
border-radius: 3px;
}
/* 野良サイン事例集 */
atype="hashTag"href$="/%E9%87%8E%E8%89%AF%E3%82%B5%E3%82%A4%E3%83%B3%E4%BA%8B%E4%BE%8B%E9%9B%86" {
background: #d6bb61 !important;
}
atype="hashTag":hover{
/*background: #e3e3e3 !important;*/
opacity: 0.8;
}
@media print {
atype="hashTag" {display:none;}
}
ピン留めを小さなパネルにする
from /arpla/ピン留めを小さなパネルにするUserCSS
code:style.css
.page-list ul.grid li.pin {
width: 100%;
}
@media screen and (max-width: 614px) {
/* モバイルの小さい画面でも3列表示にしたいな〜 */
.page-list ul.grid {
grid-template-columns: repeat(auto-fill, minmax(110px, 1fr))
}
.page-list ul.grid li.pin {
grid-column: 1 / -1;
width: 100%;
height: 5rem;
margin-bottom: 0;
}
}
.grid li.pin a {
background-color: var(--page-link-color);
background-image: none;
}
.grid li.pin .header {
border-top: none;
padding: 5px 10px !important;
}
.grid li.pin .content :is(.description,.icon) {
display: none;
}
.grid li.pin.page-list-item a .title {
font-weight: 700;
color: #fff;
}
.grid li.page-list-item a .pin {
background: none;
}
/* ピン留めされてるカードの段を分ける */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
settingsのカードを薄くする
code:style.css
.grid li.page-list-item > ahref^="/eidantoei/settings" {
opacity: 0.3;
}
.grid li.page-list-item > ahref^="/eidantoei/settings":hover {
opacity: 0.5;
}
.grid li.page-list-item > ahref^="/eidantoei/settings" * {
opacity: 0;
}
.grid li.page-list-item > ahref^="/eidantoei/settings":hover * {
opacity: 1;
}
見せなくて良いカードを消し去る
code:style.css
.grid li.page-list-item:has(> ahref^="/eidantoei/misc"),
.grid li.page-list-item:has(> ahref^="/eidantoei/optional_item") {
display: none;
}
カードのタイトル部分の高さ調整
code:style.css
.grid li.page-list-item a .title {
min-height: 40px;
}
カードの角丸の調整
code:style.css
.grid li.page-list-item a {
border-radius: 5px;
}
.grid.grid-md li.page-list-item a {
border-radius: 8px;
}
水平線をクリックさせない
code:style.css
.line a.iconhref="/icons/hr",
.line a.iconhref="./hr" {
pointer-events: none;
}
その他、パーツとして表示させてる画像をクリックさせない
code:style.css
.line .modal-image a[href="https://scrapbox.io/api/pages/eidantoei/misc/icon#.png"] {
pointer-events: none;
}
カードをマウスオーバーしたときの影を消す
code:style.css
data-hover-visible .grid li.page-list-item a:hover {
box-shadow: none;
}
カードの画像をグレースケールにする
code:style.css
li.page-list-item .icon img {
filter: grayscale(100%) sepia(50%) hue-rotate(130deg) contrast(0.6);
}
li.page-list-item:hover .icon img {
filter: grayscale(0%) contrast(1);
}
サイト名を中央に表示
code:style.css.DISABLED
.quick-launch .flex-box {
flex-direction: column;
}
.quick-launch .left-box {
justify-content: center;
}
コードブロックの左側が白くなる問題の対処
code:style.css
.line span.code-block .code-block-margin {
background-color: var(--page-bg-color);
}