settings
2022/10/07更新
Scrapboxのフォントを少しだけカスタマイズ
2022/9/25変更
ピン留めをわけるCSSを削除
ナビゲーションバーを透明にするCSSを削除
ピン留めで端を折ったスタイルを無効化を削除
ナビゲーションバーのScrapboxアイコンサイズを小さくするを削除
参照記事（Thanks!）
下記に記載されたソースのからほとんどそのまま使わせてもらっています。ありがとうございます。
/customize/Dark Theme CSS
/scrasobox/settings
/arpla/ピン留めを小さなパネルにするUserCSS
/tosiiu
小杉丸ゴシックにしよう
なんだかフォントを丸くしたい気持ち
code:style.css
@import url("https://fonts.googleapis.com/css?family=Kosugi Maru");
html, body, #editor, .grid li {
font-family: helvetica, arial, "Kosugi Maru", sans-serif ;
}
strong.level.level-1 {
font-weight: bold;
}
strong.deco-\* {
font-weight: 900;
}
strong.level {
font-weight: bold;
}
見出しとタイトルにスタイルを追加
code:style.css
.line strong {
display: inline-block;
}
.line strong.level-2 {
width: 100%;
margin: 0.1em;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #BFBFBF;
font-weight: 700;
}
.line strong.level-3 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #BFBFBF;
color: #C5C8CA;
}
.line strong.level-5 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 4.5px #BBB;
}
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.25em;
font-weight: bold;
font-size: 36px;
position: relative; left: -15px;
}
引用の調整
幅を広く設定する
code:style.css
span.quote {
padding: 10px;
width: 100%;
display: block;
border-left: solid 4px #4b7ff5;
}
/* 引用箇所の色味を調整 */
.line .quote{
background-color: #f9f9f9;
border-left: solid 4px #d9d9d9;
}
箇条書きの●を控えめにする
code:style.css
/* 箇条書きを控えめにする */
.line .indent-mark .dot { height: 3px; top: 11px; background-color: #AAA }
Scrapboxのアイコンをハンバーガーメニューに変更
code:style.css
.navbar-brand div, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9';
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size: 24px;
color: #383838;
/* position: relative;
line-height: 56xpx; */
position: absolute;
top: 50%;
transform : translateY(-50%);
}
検索窓のサジェストを大きくする
code:style.css
/* 検索窓サジェストを大きくする */
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
一人で使うのでテロメアは消す
code:style.css
/* telomere */
.telomere-border {
border-color: #f9f9f9 !important;
}
.telomere-border.unread {
border-color: #f9f9f9 !important;
}
外部リンクにアイコンつける
code:style.css
/* rnal links */
/*
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
*/
.line a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
font-weight: 600;
content: ' \f35d';
display: inline-block;
}
アイコンを大きくする
code:style.css
.line img.icon { height: 2em }
アイコンを丸くするs.umemoto.icon
code:style.css
.line img.icon {
border-radius: 50%;
overflow: hidden;
position: relative;
}
マーカー
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) }
#ハッシュタグ
code: style.css
atype="hashTag" {
padding: 4px 6px;
border-radius: 4px;
font-size: 14px;
background-color: #616161;
color: #fff !important;
opacity: 0.8;
}
過去に使っていたものを再度使う
code:style.css
/* 背景を白にする */
body {
background-color: #fff;
}
/* テロメアを背景と同じ色にする、変更箇所は青 */
.telomere-border {
border-color: #fff !important;
}
.telomere-border.unread {
border-color: #4286f4 !important;
}
/* ページ全体の影をなくす */
.page {
box-shadow: none;
}
/* 白背景と白画像の境界線をつけて見やすくする */
.image {
border: 1px solid #eee;
border-radius: 3px;
}
/* カードの下罫線をとる */
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
background-color: #ffffff ;
box-shadow: none;
border-radius: 0px ;
}
/* カードホバー時の透明度を調整 */
.grid li.page-list-item a .hover{
background: rgba(255,255,255,0);
background-color: rgba(255,255,255,0.3);
}
/* グリッドリストのヘッダーバーを非表示 */
.grid li.page-list-item a .header {
border-top: 0 ;
}
ピンのスタイルを変更
code:style.css
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none
}
.grid li.page-list-item a .pin::after {
content: '\f02e';
font-family: 'Font Awesome 5 Free';
font-weight: 700;
font-size: 20px;
color: #ccc;
}
/noratetsu/●関連リンクを左列に持ってくるをお借りした
code:style.css
/* スマートフォンには適用しない */
@media screen and (min-width: 768px) {
/* 各要素を非表示 */
.grid li.relation-label a .icon-lg, /* 「Links」のアイコン */
.grid li.relation-label .arrow, /* ラベルの右しっぽ */
.related-page-list .grid li.page-list-item a .description, /* ページの概要 */
.related-page-list .grid li.page-list-item a .icon /* サムネイル */ {
display: none;
}
/* 関連ページを左ペイン化 */
.related-page-list {
position: fixed;
left: 10px;
margin: 96px 20px 0 3vw; /* 96pxの部分はプロジェクトタイトルの位置に応じて変えてください */
padding: 0 10px 0 20px;
width: 16vw;
/* 関連リンク一覧部分を独立してスクロール */
height: 64vh;
overflow-y: auto;
z-index: 20; /* エディタ部分と領域が重なる可能性があるのでエディタより上層に設定 */
}
.drag-and-drop-enter {
position: absolute;
left: calc(20vw + 30px);
width: calc(55vw + 60px);
margin-top: -30px;
padding-left: 20px; /* 行番号表示が隠れないように設定 */
}
.related-page-list .grid {
width: 100%;
}
.related-page-list .grid li {
width: 100%;
margin: 4px;
height: auto !important;
}
.related-page-list .grid li a {
background: unset;
border: unset;
box-shadow: unset !important;
}
.related-page-list .grid li a .header {
padding: 0;
}
.related-page-list .grid li.page-list-item a {
background-color: var(--card-bg, #fff); /* 定義されているテーマでなければ白を設定 */
}
.related-page-list .grid li.page-list-item a .title {
font-size: 12px; /* ページタイトルを小さめに表示 */
}
.related-page-list .grid li.relation-label {
width: 100%;
min-height: 32px;
}
.related-page-list .grid li.relation-label .title {
display: block;
font-size: 14px; /* ラベルタイトルを小さめに表示 */
}
.grid li.relation-label a{
display: block;
background-color: #B7CADB; /* ラベルの色 プロジェクトテーマに合わせて変えてください */
}
.related-page-list .grid li.relation-label.headword a {
display: block;
background-color: #B7CADB; /* ラベルの色 プロジェクトテーマに合わせて変えてください */
}
.related-page-list .grid li.relation-label:is(.links,.empty-links) {
min-height: unset;
height: auto;
}
.related-page-list .grid li.relation-label:is(.links,.empty-links) a {
display: block;
cursor: default; /* クリックしても何も起こらないのにデフォルトのカーソルがリンク用になっているのが気になったため */
background: #B7CADB; /* 「Links」のラベルの色 好きな色に設定してください */
margin: auto;
color: #fff;
}
/* 「・・・」部分の調整 */
.grid li.ellipsis a {
display: block;
text-align: right;
height: 36px;
}
.grid li.ellipsis a .circle {
border-radius: 0;
height: 20px;
width: 40px;
}
/* ページメニューを固定 */
.col-page-side .page-menu {
position: fixed;
top: 100px;
}
}