Settings
UserCSSを記述して、Scrapboxのデザインを変更しています。
フォント
code:style.css
/* 普通の文字 */
body,
.grid li {
font-family: Inter,"源柔ゴシックL","Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
letter-spacing: 0.2px;
}
/* コードの文字 */
.line code {
font-family: "Ubuntu Mono", "M PLUS Rounded 1c", Menlo, Monaco, Consolas, "Courier New", monospace;
letter-spacing: 0.2px;
}
テーマ
Default Dark をベースにして、一部変更しています。Publickeyのデザインが好きなので、少しマネしています。 code:style.css
@media screen {
body {
/*
* ============================
* default-darkの設定
* ============================
*/
--navbar-bg: rgba(55, 59, 68, 0.5);
--navbar-icon-color: #fff; --search-form-bg: rgba(255, 255, 255, 0.13);
--search-form-icon-color: #fff; --search-form-icon-focus-color: #4a4a4a; --2hop-search-bg: rgba(255, 255, 255, 0.15);
--card-hover-bg: rgba(0, 0, 0, 0.1);
--card-active-bg: rgba(229, 229, 229, 0.1);
--card-box-shadow-color: #000; --card-box-shadow: 0 2px 0 var(--card-box-shadow-color);
--card-box-hover-shadow: 0 2px 0 rgba(0, 0, 0, 0.23);
--relation-label-empty-text: #fff; --new-button-vertical-color: #fff; --new-button-horizontal-color: #fff; --page-text-color: rgba(255, 255, 255, 0.87);
--line-title-color: rgba(255, 255, 255, 0.87);
--line-permalink-color: rgba(234, 218, 74, 0.35);
--code-bg: rgba(0, 0, 0, 0.18);
--quote-bg-color: rgba(0, 0, 0, 0.2);
--page-image-loading-border-color: #555; /*
* ============================
* カスタマイズ
* ============================
*/
/* 背景色 */
--body-bg: #333; /* ページ全体 */ --page-bg: #666; /* 個別ページ */ --card-bg: #666; /* カード */ --card-title-bg: #555; /* カードタイトル */ --card-title-bg-pinned: #555; /* カードタイトル(ピン留め) */ --card-backside: #444; /* カードのピン留めしたときの裏側 */ /* 文字色 */
--card-description-color: #fff; /* カードの説明文 */ --card-title-color: #fff; /* カードのタイトル */ --card-description-code-color: #ccc; /* カードの説明文中のコード */ --page-link-color: rgb(68, 185, 214); /* リンク */
--page-link-hover-color: var(--page-link-color); /* リンク */
--page-link-color-cursor-line: var(--page-link-color); /* リンク(画像リンクにフォーカスしたときのURL) */
--card-description-link-color: var(--page-link-color); /* カードのリンク */
}
}
/* 引用のスタイル */
.line .quote {
font-style: italic;
font-size: 0.9em;
}
/* ページ下にある検索テキストボックス「Search related page list」の文字色を変更する */
.toolbar {
}
外部リンクにiconをつける
code:style.css
/* 外部リンクにiconをつける */
.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;
display: inline-block;
}
streamボタンにアクセスするボタンを右上に表示する
code:style.css
.navbar .navbar-menu > li.stream-btn,
.navbar .navbar-menu > li.stream-btn.hidden-xs {
display: block !important;
}
トップページに説明文を書く
結構無理やりな方法だと思ってます。
code:style.css
.page-list::before {
content: "日常や仕事に関する情報を書き残します。";
}
ul.grid {
margin-top: 20px;
}
ページタイトルに下線をつける
code:style.css
/*.line.line-title .text {
border-bottom: 1px solid var(--page-text-color, #fff); padding-bottom: 5px;
margin-bottom: 21px;
}*/
strongのスタイル調整
code:style.css
strong.level.level-1 {
font-weight: bold;
}
strong.deco-\* {
font-weight: 900;
}
strong.level {
font-weight: bold;
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
ページアイテムのボタン#Templateに対するスタイル定義
code:style.css
button#Templates.tool-btn:hover { text-decoration: none }
button#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
button#Templates.tool-btn img { opacity: 0 }
プロジェクト名の前に画像を表示する
code:style.css
.project-home .title:before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
margin-right: 10px;
background-repeat: no-repeat;
background-size: contain;
vertical-align: middle;
border-radius: 50%;
}
User PageをPageListに表示しない
code:style.css
display: none;
}
参考
![https://i.gyazo.com/b0e425dcb5527c85fe3aa1abb5140c0f.png");](https://i.gyazo.com/b0e425dcb5527c85fe3aa1abb5140c0f.png");){kind=link}