settings
https://img.icons8.com/material-outlined/384/000000/settings.png
日本語のイタリックを強調
code:style.css
.deco-\/ > span {
display: inline-block;
-webkit-transform: skewX(-20deg);
-moz-transform: skewX(-20deg);
-o-transform: skewX(-20deg);
transform: skewX(-20deg);
}
インライン引用
code:style.css
.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: 'FontAwesome'; content: '\f10d'; vertical-align: super } code:style.css
.navbar .navbar-menu>li.stream-btn,
.navbar .navbar-menu>li.stream-btn.hidden-xs
{ display: block !important; }
吹き出し
code:style.css
/* フキダシ記法版 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85); padding: 3px 4px 2px 5px; margin-left: .6em;
border-radius: .4em; border-bottom-left-radius: 0 }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
code:style.css
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\# {
padding: 0.1em 0.2em 0.1em 0.2em;
}
外部リンクを区別する
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
/* font-family:'FontAwesome'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
content: ' \f35d';
display: inline-block;
}
sectionを水平線で区切る
code:style.css
.app:not(.presentation) .line.section-title:not(.line-title) {
position: relative;
}
.app:not(.presentation) .line.section-title:not(.line-title) .text {
padding-top: 1em;
}
.app:not(.presentation) .line.section-title:not(.line-title):before {
content: "";
display: block;
width: 111%;
position: absolute;
left: -49px;
border-top: 1px lightgray solid;
}
borderだとFirefoxでは2重線になってしまい見にくいので、border-topに変更しましたtakker.icon
code:diff
- border: 1px lightgray solid;
+ border-top: 1px lightgray solid;
https://gyazo.com/c326ec7947da440339638a30ca9b779e
わざわざUserCSSで全体に反映させたこれを使うよりも、アイコンに横線を設定して[hr.icon]で装飾っぽく運用する方が誰もがいい感じにできる気がしますtkgshn.icon /icons/hr.icon
↑こんな感じになるtkgshn.icon*3
どちらも利点と欠点がありますねtakker.icon
[hr.icon]
利点
任意の位置に区切り線をおける
欠点
クリックすると別ページに飛んでしまう
UserCSSでクリックできないようにすることは可能
カーソルを置くと記法に戻ってしまう
sectionを自動的に区切る
利点
自動で水平線を入れてくれる
押しても別ページに飛ばない
記法ではないので、カーソルを置いても変わらない
プレセンを書きやすくなる
水平線=スライドの区切り
欠点
区切り線を出したくないときは、.section-titleが行に当たらないよう書き方を工夫する必要がある
以下は個人的な見解ですyuiseki.icon
Scrapboxの哲学としては、細かく切り刻まれたメモ的なページがたくさんあって、それらがリンク記法でつながることが重要
Scrapboxに公式でMarkdownのような水平線記法が存在しないのは、水平線記法があると水平線で区切ることによって長大な文章（長文）のページを書いてしまうことが懸念されているから
水平線で区切るくらいなら別のページに分けるべきという設計思想
ではなぜUserCSSでセクションを可視化しようと思ったのか
長文ページは非推奨とはいえ、ページを書いている途中など、明確に別のページに切り出せる部分が把握できる前の段階は存在する
また、手順書、議事録や活動記録、作業メモ、個人のプロフィールなど、別ページに切り出さずに一箇所に一直線にまとまっていたほうがよくて、区切りを入れて長いページを書きたいことはある
その際にセクションが可視化されていると区切りが明確になって見やすい/切り出しやすい
手動で水平線を書くのがめんどくさい
以下、セクションについて
セクションは、インデントなしの空行によって区切られる
セクションの区切りに水平線を表示するUserCSSを設定すると、自然とScrapboxをキレイに書ける
セクションの一行目がその部分のトピックに相当するので、トピックが膨らんできたら切り出しやすい
Streamで文字選択を可能にする
code:style.css
.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}
Mermaid記法可視化