settings
https://gyazo.com/0854d99544ac89ebb59fd3f235c59670
大和ノ求聞史box用の設定ファイル
装飾等から必要に応じて記述
カスタムテーマ
無駄なblurがかかった重い素敵なテーマ。
code:style.css
/* 文字色は白に */
.text {
color: white;
}
/* ページの背景はぼかす */
.page {
background-color: var(--page-bg, #00000086);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.table-block .cell {
white-space: pre;
color: #cbcbcb;
}
.table-block .cell:nth-child(odd) {
background-color: rgb(255 255 255 / 8%);
}
.table-block .cell:nth-child(2n + 1) {
background-color: rgba(255, 255 255, .09);
}
.table-block .cell:nth-child(2n) {
background-color: rgba(255, 255, 255, .15);
}
.line a.link {
color: var(--page-link-color, #a1b7ec);
}
data-hover-visible .line a.link:hover {
color: var(--page-link-hover-color, #0d4ff3);
}
data-hover-visible .line a.page-link:hover {
color: var(--page-link-hover-color, #0d4ff3);
}
.line a.page-link {
color: var(--page-link-color, #a1b7ec);
}
.line code {
color: var(--code-color, #a1b7ec);
}
.line code {
color: var(--code-color, #a1b7ec);
background-color: var(--code-bg, rgba(0, 0, 0, .18));
}
.cursor svg rect {
fill: var(--cursor-color, #fff);
}
.app:not(.presentation) .page::after {
content: '文章はここで途切れている';
display: block;
margin-top: 5rem;
padding: 1rem 0;
text-align: center;
border: solid rgba(255, 254, 254, 0.4);
border-width: 1px 0;
font: 500 normal 1.8rem/1 sans-serif;
color: white;
}
.grid li.page-list-item a .header.pinned {
border-color: var(--card-title-bg-pinned, #b1b1b1);
}
.grid li.page-list-item a .header {
border-top: #b1b1b1 solid 4px;
}
.grid li.page-list-item a {
background-color: #00000086;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.grid li.page-list-item a .title {
color: #ccc;
}
.grid li.page-list-item a .description {
color: #b9b9b9;
}
/* フォントは明朝体が好きです */
.line .quote { font-style: normal; background: #ffffff; }
body { background-color: #ffffff; font-family: 'Font Awesome 5 Free','Times New Roman','游明朝体','YuMincho','游明朝','Yu Mincho','ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','BIZ UDP明朝 Medium',serif;}
.editor, .stream, li.page-list-item {font-family: unset; color: #000; !important;}
.page:has(.page-linkhref="/yamato3010/WIP") {
background-color: rgba(255, 0, 0, 0.5);
}
.grid li.page-list-item a:has(.page-link span:contains("WIP")) {
background-color: rgba(255, 0, 0, 0.5);
}
.line .quote {
background: #5d5d5d8c;
}
.line img.icon {
height: 1.6em;
position: relative;
top: 0;
}
アイコン大きく
yamato3010_big.icon←こんな感じでアイコンは大きく
code:style.css
img.icontitle="yamato3010_big" {
height: 3.3em;
border-radius: 50%;
object-fit: cover;
}
カスタムカーソル
code:style.css
html {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
.text {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
.title {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
a {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
フェイクユーザーカーソル
フェイクユーザーカーソル
code:style.css
:not(.cursor-line) > .text .deco-\> {
/* display: block; */
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
color: #fff;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
opacity: .7;
}
:not(.cursor-line) > .text .deco-\>::after {
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
@keyframes cursor_move {
20% {
left: 0px;
}
20.1% {
left: 15px;
}
40% {
left: 15px;
}
40.1% {
left: 30px;
}
60% {
top: 0px;
}
60.1% {
top: 28px;
}
80% {
left: 30px;
}
80.1% {
left: 120px;
}
100% {
left: 120px;
}
100.1% {
left: 300px;
}
}
.deco-\>.deco-\| {
animation-name: cursor_move;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
固定ページを別の行に
code:style.css
.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {
clear: both;
}
ネタばれ防止記法
[~ このようにかく]
code:style.css
.deco-\~:not(:hover) {
filter: blur(3px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
form /scrasobox/のびのびドロップダウン
背景
code:style.css
body{
background-image: URL('https://i.gyazo.com/98afc387cf5e0b40d890331087bfb292.png');
background-attachment: fixed; /* 背景を固定 */
}
.quick-launch .project-home, .quick-launch .history-back-button {
color: #ffffff!important;
}
.page-menu .tool-btn {
color: #fff!important;
}
.page-sort-menu .tool-btn {
color: #fff!important;
}
吹き出し
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #5d6966;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
.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: #5d6966 transparent;
}
.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: #5d6966 transparent;
}
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
.deco-\{ a,
.deco-\} a {
color: #66F;
}
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* マーカー */
.line strong:not(class) {
background: linear-gradient(transparent 60%, #646400 60%) }
関連リンクを横に表示
//code:style.css
@media (min-width: 768px) {
/* 要素横並び */
div.page-wrapper {
display: flex;
justify-content: space-around;
}
div.col-page {
max-width: calc(960px + 216px + 34px)
}
div.drag-and-drop-enter {
order: 2;
width: calc(100% - 250px);
}
div.related-page-list {
order: 1;
flex-basis: 216px;
padding: 0 8px;
}
/* 関連リンク一覧形状変更 */
div.related-page-list .grid li.relation-label,
div.related-page-list li.page-list-item,
div.related-page-list li.ellipsis {
/* サイズ変更（共通） */
width: 200px;
}
div.related-page-list .grid li.relation-label {
/* ラベルサイズ変更 */
height: auto;
margin-bottom: 2px;
}
div.related-page-list li.page-list-item,
div.related-page-list li.ellipsis,
div.related-page-list li.expand-stack {
/* カードサイズ変更 */
height: 50px;
margin-bottom: 3px;
}
div.related-page-list .grid li.relation-label .arrow {
display: none;
}
.related-page-list li.relation-label a {
/* 関連リンク ラベル */
display: flex !important;
padding: 0 !important;
}
.related-page-list li.relation-label a,
.related-page-list li.page-list-item a {
/* 関連リンク ラベル・カード（共通） */
border-radius: 0;
}
.related-page-list ul.grid:hover li.relation-label a,
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a,
.related-page-list li.page-list-item a:hover {
/* 関連リンク ラベル・カード（共通、ホバー時） */
transition: 0s;
}
.related-page-list li.relation-label a:hover {
/* 関連リンク ラベル（ホバー時） */
filter: brightness(80%);
}
.related-page-list li.ellipsis a {
/* 2 hopが大きすぎるときに出る三点ボタン */
padding: 0;
}
.related-page-list li.ellipsis a div.circle {
/* 三点ボタンをホバーした時に表示される丸 */
height: auto;
}
.related-page-list li.expand-stack {
/* カード展開ボタン */
width: 200px;
margin-bottom: 6px;
}
.related-page-list li.expand-stack a {
/* カード展開ボタンの当たり判定と文字 */
display: block;
width: 200px;
padding: 7px 3px 7px 42px;
text-align: left;
}
.related-page-list span.kamon::before {
/* 鎖マークの大きさ */
font-size: 14px;
}
.related-page-list li.page-list-item .content > .description {
display: none;
}
.related-page-list li.relation-label a span.title,
.related-page-list ul.grid li.page-list-item a .header {
/* リンクのタイトル文字がある空間（共通） */
border-top: 0;
width: 158px;
padding: 7px 3px;
margin-left: 42px;
text-align: left;
}
.related-page-list li.relation-label a span.title {
/* リンクのタイトル文字がある空間（ラベル） */
padding: 0 3px;
}
.related-page-list ul.grid li.page-list-item a .header {
/* リンクのタイトル文字がある空間（カード） */
padding: 7px 3px;
}
.related-page-list li.relation-label a span.title,
.related-page-list ul.grid li.page-list-item a .header .title {
/* リンクのタイトル文字（共通） */
font-size: 14px;
font-weight: bold;
}
.related-page-list li.relation-label a:hover span.title,
.related-page-list ul.grid li.page-list-item a:hover .header .title {
/* リンクのタイトル文字（共通、ホバー時） */
transition: 0s;
}
.related-page-list li.relation-label a span.kamon.icon-lg,
.related-page-list ul.grid li.page-list-item a .icon {
/* リンクのアイコン */
display: flex;
position: absolute;
align-items: center;
justify-content: center;
width: 30px;
margin: 0;
margin-left: 6px;
padding: 0;
}
.related-page-list li.relation-label a span.kamon.icon-lg {
/* リンクのアイコン（ラベル） */
height: 100%;
}
.related-page-list ul.grid li.page-list-item a .icon {
/* リンクのアイコン（カード） */
height: 50px;
}
.related-page-list ul.grid li.splitter {
height: 5px;
}
}
@media (min-width: 768px) {
.related-page-list div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: #614354;
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: #4D5263;
color: #eee;
}
}
.grid li.relation-label a{
color: #fff;
}
.grid li.relation-label.links a, .grid li.relation-label.project-links a {
background-color: #ad7796;
color: #fff;
}
.grid li.relation-label.empty-links a {
background-color: #fd7373;
color: #fff;
}
外部リンクと区別する
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: bold;
display: inline-block;
font-size: .5em;
color: #888;
padding-right: 2px;
}
# で始まるタグをラベル風に
code:style.css
/* これは上のCSSで指定済み
body {
--accent-color: #3d95c9;
}
*/
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: var(--page-bg);
color: #72cafd !important;
font-size: 0.8em;
border: 1px solid #72cafd;
border-radius: 3px;
transition: .2s;
-webkit-transform: scale(1);
transform: scale(1);
}
a.empty-page-linktype="hashTag"{
color: #fb7476 !important;
border-color: #fb7476;
}
atype="hashTag":hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
フォント関連
out code:style.css
/* Font Awesomeを常時使えるようにするCSS */
div.editor, .grid li {
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands", "AppIcons", sans-serif;
}
自分であげたwebフォントを使用したかったのだが、許可されているwebフォント(Google Fontsなど)しか使えないようだ→/takker/scrapboxでweb fontは使えない？
outcode:動作しなかったコード.css
body {
font-family: 'pixelmplus12bold';
src: url(https://scrapbox.io/files/62df8a0909d54a00208df764.ttf) format('truetype');
font-weight: normal;
font-style: normal;
}
.editor, .stream, li.page-list-item {font-family: unset !important;}
コードブロックに行番号を表示
code:style.css
body *::before {
--code-number-color: var(--code-color);
/* --code-accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.section-title {
counter-reset: codeline;
}
.code-block span.indent code.code-body {
counter-increment: codeline;
margin-left: -1.5em;
padding-left: 2.3em;
}
.code-block span.indent code.code-body::before {
content: counter(codeline);
position: absolute;
display: inline-block;
z-index: 10;
margin-left: -2.4em;
width: 2em;
padding-right: 0.2em;
text-align: right;
vertical-align: bottom;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
color: var(--code-number-color);
}
/* カーソル行の行番号を濃く表示する */
.code-block span.indent code.code-body::before {
opacity: .5;
}
.cursor-line .code-block span.indent code.code-body::before {
opacity: 1;
font-weight: bolder;
/* ↓カーソル行の背景色の色はここ */
background-color: var(--code-accent-color);
}
}
フッター
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: '文章はここで途切れている';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid rgba(255, 254, 254, 0.4); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
color: white;
.app:not(.presentation) .page.not-persistent::after {
content: 'ここには何も書かれていない' }
color: white;
.drag-and-drop-enter {
padding-bottom: 100px;
background-image: url("https://profile-counter.glitch.me/yamato3010-scrapbox/count.svg");
background-position: center bottom 20px;
background-repeat: no-repeat;
background-size: 224px 30px;
}
センタリング用の記法 [' から始めるとセンタリング可能
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
スクロールバー
code:style.css
/* スクロールバー全体の太さを変更 */
html::-webkit-scrollbar, #copy-element::-webkit-scrollbar {
width: 16px;
}
/*スクロールバーのつまみの部分*/
html::-webkit-scrollbar-thumb, #copy-element::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 10px;
}
/*スクロールバーの背景*/
html::-webkit-scrollbar-track, #copy-element::-webkit-scrollbar-track {
background: var(--navbar-bg, rgba(53, 59, 72, 0.6));
}
テンプレートからページ作成
テンプレートはtemplateにあります。
スクリプトはyamato3010に
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
a#Templates.tool-btn img { opacity: 0 }
箇条書きの記号の変更
code:style.css
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
拡張記法
code:style.css
/* 挿入 */
.deco-\+ { color: blue }
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: 'ｲｷ'; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
ピン止めしたページのアイコン変更
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: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: #A45AFF; bottom: 0; display: inline-block; transform: rotate(35deg) }
スリムなテロメア
form customize/スリムなテロメア
code:style.css
参考
/Mijinko/settings
/madobes/settings
Scrapboxにテンプレート
/scrasobox/settings