Ayasata
自己紹介
情報整理に関することに興味があります。
iOSアプリを作ったり、情報整理の手法をアウトプットしたりしています。
Scrapbox は始めたてで分からないことだらけですのでお手柔らかに。
関係するリンク先
/Ayasata // Scrapbox プロジェクト（主に Scrapbox を用いて情報を素早く確認し、意思決定をするための検証をしています）
AppStore // 開発したアプリ
Qiita // 綾沙汰のQiita
Note // 綾沙汰のNote
X(Twitter) // X(Twitter）
使用中のUserScript
script.jsimport '/api/code/ayasata/UserScript/colorChar.js' /* 右クリックから文字色をつけられるようにする */
import '/api/code/ayasata/UserScript/countChar.js' /* ページ内の文字カウント */
import '/api/code/ayasata/UserScript/countCharRange.js' /* 範囲選択して文字カウント */
import '/api/code/ayasata/UserScript/index.js' /* 見出し（目次）のボタンを右のメニューに作成 */
import '/api/code/ayasata/UserScript/timeStamp.js' /* タイムスタンプを１つだけ指定できるようにする */
import '/api/code/ayasata/UserScript/getRelatedPages.js' /* 関連ページのタイトルと内容を取得し、結合して表示 */
import '/api/code/ayasata/UserScript/getLinkPages.js' /* リンクページのタイトルと内容を取得し、結合して表示 */
import '/api/code/ayasata/UserScript/relatedPageList_left.js' /* 関連ページを左に表示するかどうかの切り替え */
import '/api/code/ayasata/UserScript/indent.js' /* カーソルが行頭にない状態でも、tabで現在行をインデントする */
UserCSS: 文字への着色
style.css /* （.deco-\! なら [! test] のように打ち込む */
.deco-\! {
color: #f55; /* 赤 */
font-weight: bold;
}
.deco-\% {
color: #fb4; /* オレンジ */
font-weight: bold;
}
.deco-\# {
color: #6f6; /* 緑 */
font-weight: bold;
}
.deco-\~ {
color: #8cf; /* 青 */
font-weight: bold;
}UserCSS: セパレータ
style.css/* before: 左の線、after: 右の線 */
/* https://scrapbox.io/villagepump/セパレーター記法 */
.line:not(.cursor-line) .deco:has(.deco-\'):has(.deco-_) {
display: flex;
align-items: center;
text-align: center;
&::after {
flex-grow: 1;
min-width: 30px;
content: "";
border-top: 3px solid #fff;
}
&:has(.deco-\-) {
&::after {
border-style: dashed none none;
}
}
&::after {
margin-left: 10px;
margin-right: 50px;
}
:has(.deco-_) {
text-decoration: none !important;
}
}UserCSS: インデントマークを縦二重線にし、インデント数によって色を変える
以下のような感じになる
style.css:root {
--li-color-0: #00c8c8;
--li-color-1: #00c8c8;
--li-color-2: #ff6400;
--li-color-3: #00dc64;
--li-color-4: #c800c8;
--li-color-5: #969696;
}アイコンは以下から検索して選ぶことができる
style.css:root {
--ul-bullet: '\f7a5'; /* 二重縦線 */
}---
フォントサイズ
style.css.line .indent-mark .c-0 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-1 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-2 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-3 + .dot::before {
font-size: 30px;
}
.line .indent-mark .c-4 + .dot::before {
font-size: 30px;
}---
色の指定
style.css.line .indent-mark .c-0 + .dot::before {
color: var(--li-color-1);
}
.line .indent-mark .c-1 + .dot::before {
color: var(--li-color-2);
}
.line .indent-mark .c-2 + .dot::before {
color: var(--li-color-3);
}
.line .indent-mark .c-3 + .dot::before {
color: var(--li-color-4);
}
.line .indent-mark .c-4 + .dot::before {
color: var(--li-color-5);
}---
その他細かい設定
style.css.line .indent-mark .dot::before {
display: block;
position: absolute;
right: -5px;
top: -10px;
font-family: 'Font Awesome 5 Free';
/* font-family: FontAwesome; /* old */
font-weight: 900;
font-size: 30px;
content: var(--ul-bullet, '\f7a5');
color: var(--li-color-0);
}
.line .indent-mark .dot {
background-color: transparent;
}UserCSS: 関連ページを左に表示する
UserCSS: 行番号を表示する
style.css/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .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: Papyrus; color: black }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }UserCSS: ページに影をつける
style.css.page {
box-shadow: 0 0 15px rgba(255,255,255,0.8);
}