settings
https://gyazo.com/f5aad8e143b8d197c25d5e884bb315a2
Import
code:style.css
@import "https://scrapbox.io/api/code/blu3mo-public/関連ページ一覧を横に移動させる/style.css";
@import "https://scrapbox.io/api/code/customize/コードブロックのファイル名に言語のアイコンを表示する/style.css";
@import "https://scrapbox.io/api/code/customize/ブランドアイコンを今日の日付にするCSS/style.css";
@import '/api/code/customize/web_pageをscrapbox記法に変換して貼り付けるUserScript/script.js'
ページ
code:style.css
/* Disable shadow */
.page {
/*background-color: #f9f9f9;*/
box-shadow: 0 1px 0 rgba(0,0,0,0.16);
column-count: 1;
}
ページ全体のフォントの変更
code:style.css
.text {
/*color: #333333;*/
font-size: 105%;
font-family: "Times New Roman", Lato, "Noto Sans JP", 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", helvetica;
}
太字を変更する
code:style.css
.line strong { font-family: helvetica; }
トップ
code:style.css
.project-home .title {
text-align: left;
}
.project-home span.title:first-of-type:after {
content: "solareenlo";
display: block;
text-align: left;
font-size: 34px;
font-weight: 700;
}
a.btn.project-home {
padding: 0 0;
margin-top: 20px;
}
Ref: /mlab/settings
色
code:style.cssx
body {
/* background-color: #E7E6E4; */
/* background-image: URL('https://gyazo.com/7f144c1ba615522ef074b17fa1aa6a54.jpg'); */ /* 背景画像 */
}
.grid li.page-list-item a {
/* background-color: #E7E6E4; */
color: #555;
border: 3px solid #0F3059;
box-shadow: none;
}
li.page-list-item.grid-style-item.pin > a {
background-color: #F2E8D2;
border: 3px solid #F4B625;
}
li.page-list-item.grid-style-item.pin > a > .content >.header > .title {
font-weight: 600;
}
.grid li.page-list-item a .header {
border-top: none;
}
.navbar-default {
background-color: #E7E6E4;
}
.grid li.page-list-item a .title {
color: #0F3059;
}
.grid li.page-list-item a .pin {
background: none;
}
.grid li.page-list-item a .content {
width: initial;
}
.new-button{
background-color: #ffffff00;
}
グリッド
code:style.css
/*.grid li.page-list-item {
margin-bottom: 0.7em ;
font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif;
}*/
/*.grid li.page-list-item a .title { text-align: center; }*/
.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: 7px 7px 15px rgba(0,0,0,0.02);
border-radius: 7px ;
}
.grid li.page-list-item a:hover,
.grid.grid-md li.page-list-item a:hover,
.grid.grid-lg li.page-list-item a:hover {
/* background: #ffffff ;*/
box-shadow: 7px 7px 15px rgba(0,0,0,0.02);
}
.grid li.page-list-item a::before,
.grid li.page-list-item a::after {
display: block ;
content: '' ;
position: absolute ;
width: 13em ;
}
/*.grid li.page-list-item a .pin {
width: 100% ;
height: 100% ;
border-radius: 0px ;
background-image: none ;
}*/
/*.grid li.page-list-item a .pin::before,
.grid li.page-list-item a .pin::after {
display: block ;
content: '' ;
position: absolute ;
width: 13em ;
}*/
.grid li.page-list-item a .header { border-top: 0; }
ピンしたページのスタイル
/scrasobox/ピンしたページのスタイル
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin {
background-color: transparent;
background-image: none
}
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 700;
font-size: 20px; color: #A45AFF; bottom: 0;
display: inline-block;
transform: rotate(35deg)
}
code:style.cssx
.grid li.page-list-item a .pin::after {
content: '\f08d';
font-family: 'Font Awesome 5 Free';
font-size: 20px;
color: #A45AFF;
bottom: 0;
display: inline-block;
transform: rotate(35deg)
}
画像サイズ Reference
code:style.css
/* 画像サイズ 画像URL で設定できるようにする */
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
チェックボックス
[o] これが o こうなるよ。
[v] これは v こうなるよ。
/scrasobox/チェックボックスになるタグ 2
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./o':not(.icon) span,
.line:not(.cursor-line) ahref='./v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref='./o':not(.icon)::after,
.line:not(.cursor-line) ahref='./v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f14a'; color: #2489C5 }
Highlight JS
Reference: /progfay-pub/Dracula Code CSS
Reference: solarized-dark.css
code:style.css
/*
Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #002b36;
color: #839496;
}
.hljs-comment,
.hljs-quote {
color: #586e75;
}
/* Solarized Green */
.hljs-keyword,
.hljs-selector-tag,
.hljs-addition {
color: #859900;
}
/* Solarized Cyan */
.hljs-number,
.hljs-string,
.hljs-meta .hljs-meta-string,
.hljs-literal,
.hljs-doctag,
.hljs-regexp {
color: #2aa198;
}
/* Solarized Blue */
.hljs-title,
.hljs-section,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: #268bd2;
}
/* Solarized Yellow */
.hljs-attribute,
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-class .hljs-title,
.hljs-type {
color: #b58900;
}
/* Solarized Orange */
.hljs-symbol,
.hljs-bullet,
.hljs-subst,
.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-link {
color: #cb4b16;
}
/* Solarized Red */
.hljs-built_in,
.hljs-deletion {
color: #dc322f;
}
.hljs-formula {
background: #073642;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bolder;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
font-weight: bolder;
}
ハッシュタグをラベル風にする thanks: /MISONLN41/settings#5e64f016ec4fce0000f2a76b
code:style.css
/* #で始まるタグをラベル風にする */
atype="hashTag" {
display: inline-block;
margin: 4px;
font-size: 14px;
font-family: helvetica;
height: 32px;
width: auto;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
border-radius: 2px;
border-style: none;
color: #090909 !important;
background-color: rgba(12, 12, 13, 0.1);
}
atype="hashTag":hover { background-color: rgba(12, 12, 13, 0.2); }
atype="hashTag":active { background-color: rgba(12, 12, 13, 0.3); }
Reference
付箋 /scrasobox/付箋記法付箋ができるよ
code:style.css
/* 付箋記法のスタイル例 */
.line:not(.cursor-line) .deco-\~ {
display: inline-block; position: absolute; top: -0.6em; right: -6vw;
max-width: 40%; padding: .3rem 1rem;
border-right: 1rem solid #04B2D9;
/* background-color: #f9f8f6; */
transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 100% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.line .level-2 .deco-\~ { border-right-color: #009175 }
.line .level-3 .deco-\~ { border-right-color: #EFBB33 }
.line .level-4 .deco-\~ { border-right-color: #F23E2E }
/* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
テロメアの未読表現をカスタマイズ
code:_style.css
.unread {
width: 0px !important;
border-right-width: 3px !important;
border-left-width: 10px !important;
border-right-color: #007 !important;
border-left-color: #8f9899 !important;
}
.unread:hover {
width: auto !important;
border-right: 0 !important;
}
テーブルの見た目
/customize/テーブルの見た目をカスタマイズ
/scrasobox/テーブルのセルをわかりやすくする
code:style.css
/* セル間に線を入れる */
.table-block .cell {
/* 全てのセルの右と下 */
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.table-block .cell:first-child {
/* 1列目のセルの左 */
border-left: solid 1px #cccccc;
}
.section-title + .line .table-block .cell {
/* 1行目のセルの上 */
border-top: solid 1px #cccccc;
}
/* 1行目を太字、中央揃え */
.section-title + .line .table-block .cell {
font-weight: bold;
text-align: center;
}
/* 偶数行を濃くする */
.table-block table tr:first-child td {
font-weight: bolder;
text-align: center
}
table:test
A B C
abc def ghi
klm opq rst
Stream にアクセスするボタンを右上に設置する
code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs { display: block !important; }
左上の画像を変更する
code:style.cssx
.navbar-brand::before {
content: '';
width: 44px;
height: 44px;
position: absolute;
/*background-image: url(https://i.gyazo.com/thumb/80/05b9886bee82410f345320a1147ed068-png.png);*/
background-image: url(https://daiiz-apps.appspot.com/today/jp.svg);
background-size: cover;
background-position: center;
border-radius: 6px;
}
ヘッダーメニュー /scrasobox/ヘッダーメニューを固定する
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
.app:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
code:mobile.css
/* スマホ向け */
@media screen and (orientation: portrait) and (min-height: 600px) and (max-width: 768px) {
.app:not(.presentation) { padding-top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu { max-height: calc(100vh - 130px); overflow-y: auto } }
行番号 /scrasobox/行番号を表示する
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .line:not(.line-title)::before {
content: counter(line);
position: absolute; display: inline-block; left: -110px; z-index: 10;
min-width: 50px; text-align: right; vertical-align: middle;
/* 行番号のフォントとか色とかの指定はここ */
font-family: monospace; color: grey }
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bold } }
プライベートプロジェクトの設定
code:style.css
@import "https://scrapbox.io/api/code/foldrr-2/settings/style.css";
ページリストとタイトルのフォントを大きくする
code:style.css
.page-list .title { font-size: 110% !important; }
ページメニューの情報ボタンのサイズを調整
code:style.css
#page-info-menu { height: 44px; }
ページ
iOS版ChromeでScrapboxの編集時にキーボードで編集行を隠さない
code:style.css
.col-page { min-height: 800px; }
/customize/Scrapboxで文章オンリーのページを作った際に余白を有効活用するCSS
code:style.css
.grid li.page-list-item a .header .title { overflow: visible}
.grid li.page-list-item a .header { overflow: visible }
.line-img { display: none }
ページタイトルのフォント設定と罫線 /madobes/settings
code:style.css
.line-title .text { padding-bottom: 0px !important; }
.line-title {
border-bottom: 1px #CCC solid;
margin-bottom: 8px !important;
}
.app:not(.presentation) .line.line-title .text {
/*font-size: calc(1.2vw + 1.5rem);*/
font-weight: 500;
line-height: 1.2 !important;
border-bottom: 2px #CCC solid rgba(0,0,0,.2);
padding-bottom: 0px !important;
margin-bottom: 8px !important;
font-family: helvetica;
}
# をセクション表示に変更する
code:style.css
/* 見出し */
.deco-\# {
border-left: 4px rgb(41, 169, 114) solid;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 4px;
font-size: 120%;
font-weight: 500;
font-family: helvetica;
}
! で強調表示
code:style.css
.deco-\! {
color: #000;
background-color: rgba(255, 160, 160, 0.5);
padding: 0.1em 0.2em 0.1em 0.2em;
}
引用を斜体にしない
code:style.css
.line .quote { font-style: normal; }
引用の行頭空白を表示しない
code:style.css
.tag { display: none; }
.cursor-line .tag { display: inline; }
外部リンクにアイコンを付ける
code:style.css
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
margin-left : 4px;
display : inline-block;
font-family : 'Font Awesome 5 Free';
content : '\f08e';
text-decoration: none;
}
テーブル
code:style.css
.table-block .cell:first-child {
border-left: solid 1px #cccccc;
}
.table-block .cell {
border-top: solid 1px #cccccc;
border-right: solid 1px #cccccc;
border-bottom: solid 1px #cccccc;
}
.cell-text span {
font-family: 'Kosugi Maru' !important;
}
アイコンを大きくする /customize/Dark Theme CSS
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.8em }
/* 強調記法 hoge.icon のアイコンのとき、サイズをもっと大きくする */
.line img.strong-icon { max-height: 5em; height: auto }
画像リンクの下線を非表示にする
code:style.css
.line a.link img.image { border-style: none; }
動画の下にある余計な空白を消す
code:style.css
/* YouTube */
.iframe-video-player + .empty-char-index {
display: none;
}
/* .mp4 Player */
.video-player {
margin-bottom: -10px;
}
.video-player + .empty-char-index {
display: none !important;
}
カーソル行を強調表示する
code:style.cssx
.cursor-line {
background-color: rgba(0, 0, 0, .02);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
code:style.cssx
.cursor-line {
color: #000;
background-color: #999999;
}
カーソルを点滅表示する
code:style.css
@keyframes blink {
0% { opacity: 0; }
49% { opacity: 0; }
50% { opacity: 1; }
}
.cursor {
animation: blink .7s infinite;
width: 3px;
background-color: rgba(0,0,0,.6);
}
/* 同時作業中のユーザーのカーソルは点滅させない */
.shared-cursors .cursor { background-color: #309030; animation: none }
ポップアップメニューのフォントを大きくする
code:style.css
.popup-menu .button-container .button { font-size: 100%; }
行頭のドット(バレット | ビュレット)を少し薄くする
/scrapboxlab/行頭のドット(バレット | ビュレット)を少し薄くするUserCSS
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 5px;
height: 5px;
background-color: #2F3437; }
インデントしたときのバレットの色を変える
code:style.css
.line .indent-mark .dot {
background-color: #007bbb;
margin-top: 2px; }
.line .indent-mark .c-1 + .dot { background-color: #3eb370; }
.line .indent-mark .c-2 + .dot { background-color: #f08300; }
.line .indent-mark .c-3 + .dot { background-color: #e2041b; }
タイトルのフォント変更/gaaamii/settings
code:style.css
/* スタイルいじりたいときはここへ */
/*.icon-home { display: none !important; }
/*.project-home { font-size: 30px !important; }
インラインコードのハイライトをしない
code:style.css
code.code span { color: inherit !important; }
check box /scrasobox/チェックボックスになるタグ 2
code:style.css
/* チェックボックスになるタグ v2 Font Awesome版 */
.line:not(.cursor-line) ahref='./o':not(.icon) span,
.line:not(.cursor-line) ahref='./v':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
.line:not(.cursor-line) ahref='./o':not(.icon)::after,
.line:not(.cursor-line) ahref='./v':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 400;
font-size: 120%; text-align: center; vertical-align: middle }
.line:not(.cursor-line) ahref='./o':not(.icon)::after { content: '\f0c8'; color: #08BDBD }
.line:not(.cursor-line) ahref='./v':not(.icon)::after { content: '\f14a'; color: #2489C5 }