settings
キーカラー
style.csshtml, body {
background: #f6f6f6;
}
.navbar {
background: #268ddd;
}
.grid li.relation-label.links a {
background: #268ddd;
}
Scrapboxのロゴを非表示
Scrapboxのロゴを常に右上に表示する
!code:style.css
.navbar > .container > .row {
position: relative;
}
.navbar > .container > .row > .col-brand {
width: 75px;
flex-grow: 0;
position: absolute;
top: 0;
right: 0;
}
/* モバイル */
@media (max-width: 767px) {
/* Scrapboxロゴは非表示 */
.navbar > .container > .row > .col-brand {
display: none;
}
}
ブログのロゴマークを使う
style.css/* ロゴマークの導入 */
.project-home {
background: url("https://i.gyazo.com/c42e86b89f358c02cb4a1d4876a84f94.png") center / contain no-repeat;
width: 207px;
height: 38px;
z-index: 1000;
}
.project-home:hover {
background: url("https://i.gyazo.com/c42e86b89f358c02cb4a1d4876a84f94.png") center / contain no-repeat !important;
opacity: 0.5;
}
.project-home > .title {
display: none;
}
/* 元の家アイコンとテキストを隠す*/
.quick-launch .project-home > .icon.icon-home {
color: transparent !important;
display: none;
}
.quick-launch .project-home > .title {
color: transparent !important;
display: none;
}
/*
@media (min-width: 768px) and (max-width: 1280px) {
.quick-launch .new-button {
display: block;
}
}
*/
/* モバイル */
@media (max-width: 767px) {
.project-home {
width: 100%;
z-index: 9999;
}
.project-home:hover {
opacity: 1.0;
}
.quick-launch .flex-box .flex-item {
min-width: 50px;
}
.flex-box > .flex-item:first-child {
width: calc(100% - 60px * 2);
text-align: center;
position: fixed;
top: 8px;
z-index: 9999;
top: 8px;
left: 60px;
}
.flex-box > .flex-item:first-child > .left-box {
display: inline-block;
max-width: 207px;
width: 100%;
}
.flex-box > .flex-item:first-child > .left-box > .project-home {
position: static;
}
.navbar > .container > .row > .col-brand {
width: 40px;
}
.navbar .navbar-brand.dropdown-toggle > .icon.icon-arrow-down {
display: none;
}
.expandable-menu {
z-index: 9999;
top: initial;
bottom: 64px;
}
}
ロゴマークをナビゲーションバー上に移動する
!code:style.css
.project-home {
position: fixed;
top: 6px;
}
.navbar {
height: 52px;
padding-top: 7px;
padding-bottom: 7px;
}
.navbar .row .col-search {
width: 80%;
}
.navbar .row .col-search > .navbar-form > a.new-button {
position: fixed;
left: 20px;
}
.navbar .row .col-search > .navbar-form > form.search-form {
margin-left: 247px;
}
アカウントメニューを消す
style.css.col-menu {
display: none;
}
/* モバイルでは消さない（検索動線なので） */
@media (max-width: 767px) {
.col-menu {
display: block;
}
/* アカウントボタンは消す */
.col-menu li.dropdown:last-child {
display: none;
}
}
グローバルメニュー
style.css.navbar .col-brand ul.global-menu-for-user.global-menu.dropdown-menu {
/* スクローラブルにする */
max-height: 80vh;
overflow-y: auto;
/* 画面外に出ないように左にずらす */
margin-left: -225px;
}
style.cssinput[type="range"].grid-size-range {
display: none;
}
テロメア
style.css.line .telomere .telomere-border {
border-color: rgba(143, 152, 153, 0.1);
}
.line .telomere .telomere-border.unread {
border-color: rgba(200, 235, 220, 1.00);
}
.line .telomere .telomere-border .description {
background: rgba(243, 243, 244, 1.00);
color: #000;
}
Tweak
リストからsettingsを消す
style.css/* settingsと-(水平線)へのリンクを消す */
.grid li.page-list-item > a[href^="/akiroom/settings"],
.grid li.page-list-item[data-page-title="-"] {
display: none;
}
/* 新2: 画面まるごと横切る水平線にしちゃう
.page-list-item.grid-style-item.pin:nth-child(10) {
width: 100%;
height: 0px;
border-top: 1px solid #ddd;
margin-top: 20px;
margin-bottom: 30px;
}
*/
「私の植物」で始まるページに🌱を追加
style.css.grid li.page-list-item > a[href^="/akiroom/%E7%A7%81%E3%81%AE%E6%A4%8D%E7%89%A9"] > .content > .header > .title::before {
content: '🌱 ';
}
「はじめに」のfaviconを隠す
style.css.page-list > ul.grid > li.page-list-item.grid-style-item.pin:first-child .icon {
display: none;
}
セルの上空白を消す
style.css.grid li.page-list-item a .header {
border: 0;
}
背景色
style.cssbody {
background: #f6f6f6;
}
.grid li.page-list-item a .pin {
background: linear-gradient(45deg, #f0f0f0, #f0f0f0 50%, #f6f6f6 50%, #f6f6f6)
}
ページ内の記法を増やす
吹き出し
style.css.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #b2bcba;
padding: 0.3em 0.2em 0.3em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
左吹き出し
style.css.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #b2bcba transparent;
}
右吹き出し
style.css.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #b2bcba transparent;
}
水平線をクリックできなくする
style.css .line:not(.cursor-line) a.icon[href^="/akiroom/-"] {
pointer-events: none;
}
特定ページへのリンクはコード記法っぽい見た目にする
style.css/* 見た目を近づける */
.lines .line a.page-link[href^="./.gitignore"],
.lines .line a.page-link[href^="./.dockerignore"]
{
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
padding: 0 8px 0 8px;
font-size: 90%;
background-color: rgba(0,0,0,0.04);
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
border-radius: 4px;
}
/* 編集時にガタッとなるのを避ける */
.lines .line.cursor-line a.page-link[href^="./.gitignore"],
.lines .line.cursor-line a.page-link[href^="./.dockerignore"]
{
padding: 0;
background-color: transparent;
}
プロジェクトオーナーだけが適用されるCSS
自分だけが読み込むCSS群を指定
only-me.css@import "https://scrapbox.io/api/code/akiroom/settings/katte-icons.css";
/akiroom/akix に書かれたCSS読み込みのcode:style.cssの4行を非表示にする
style.css#L5a6f0914af5c5a00006d7990,
#L5fa0e628af5c5a000060f254,
#L5fa0e62baf5c5a000060f256,
#L5fa0e629af5c5a000060f255 {
display: none;
}
/* */
勝手に適当なアイコンを割り当てる
katte-icons.css.dropdown-menu[aria-labelledby="page-edit-menu"] > li > a:before {
display: inline-block;
margin-right: 6px;
width: 18px;
height: 18px;
background: no-repeat center/contain;
}
.dropdown-menu[aria-labelledby="page-edit-menu"] > li.disabled > a:before {
opacity: .5;
}
/* Copy URL */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(1) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/8717935c877b327deb1df40199c84ab1.png');
}
/* Copy TwitterURL */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(2) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/8717935c877b327deb1df40199c84ab1.png');
}
/* --- */
/* Drawing */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(4) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/83c4b9879cdf42021ca4be6485980456.png');
}
/* Duplicate page */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(5) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/9aa67b40e3c28cbcf8dd85c6c578f2c7.png');
}
/* Pin at home */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(6) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/02b0e651b2c9a286f2aeeed49b636aa5.png');
}
/* --- */
/* Start presentation */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(8) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/363c675acac8d0e398cc88847bd92aad.png');
}
/* Hide dots */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(9) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/fc984ccdaa1b301aba7b5aa4eb4b6ed6.png');
}
/* History */
.dropdown-menu[aria-labelledby="page-edit-menu"] > li:nth-child(10) > a:before {
content: ' ';
background-image: url('https://i.gyazo.com/8b431db8f0e972e54391c0c036826279.png');
}
code:$.sh はCLI用のインライナーとみなして$記号を付与してファイルアクセスを隠す
style.css.code-block-start a[href$="/%24.sh"] {
position: relative;
}
.code-block-start a[href$="/%24.sh"] span {
display: none;
}
.code-block-start a[href$="/%24.sh"]:after {
content: "$";
position: absolute;
left: 0.5em;
top: 1.6em;
}