settings

https://gyazo.com/7440ba90184b3d9bafe552f1627272d2

UserCSSの設定を行うページ

code:style.css

.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; }

チェックボックス

code: style.css

/* チェックボックスになるタグ v2 Font Awesome版 */

display: inline-block; width: 0; text-indent: -9999px }

display: inline-block; min-width: 1.15em; padding-left: 1px;

font-family: FontAwesome; font-size: 120%; text-align: center; vertical-align: middle }

code:style.css-x

/*　一旦背景黒だとカーソルが分かりづらいのでコメントアウト */

.line code {

padding: 4px 0;

font-size: 0.8em;

}

.line span.code-block {

}

.page-list-item .description code {

padding: 4px;

font-size: 0.8em;

}

Highlight JS

code:style.css

/*

Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>

*/

.hljs {

display: block;

overflow-x: auto;

padding: 0.5em;

}

.hljs-comment,

.hljs-quote {

}

/* Solarized Green */

.hljs-keyword,

.hljs-selector-tag,

.hljs-addition {

}

/* Solarized Cyan */

.hljs-number,

.hljs-string,

.hljs-meta .hljs-meta-string,

.hljs-literal,

.hljs-doctag,

.hljs-regexp {

}

/* Solarized Blue */

.hljs-title,

.hljs-section,

.hljs-name,

.hljs-selector-id,

.hljs-selector-class {

}

/* Solarized Yellow */

.hljs-attribute,

.hljs-attr,

.hljs-variable,

.hljs-template-variable,

.hljs-class .hljs-title,

.hljs-type {

}

/* Solarized Orange */

.hljs-symbol,

.hljs-bullet,

.hljs-subst,

.hljs-meta,

.hljs-meta .hljs-keyword,

.hljs-selector-attr,

.hljs-selector-pseudo,

.hljs-link {

}

/* Solarized Red */

.hljs-built_in,

.hljs-deletion {

}

.hljs-formula {

}

.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;

}

＃で始まるタグをラベル風にする

code:style.css

/* ＃で始まるタグをラベル風にする */

display: inline-block;

margin: 4px;

font-size: 14px;

height: 32px;

width: auto;

padding-left: 8px;

padding-right: 8px;

padding-top: 2px;

padding-bottom: 2px;

border-radius: 2px;

border-style: none;

background-color: rgba(12, 12, 13, 0.1);

}

background-color: rgba(12, 12, 13, 0.2);

}

background-color: rgba(12, 12, 13, 0.3);

}

code:style.css

/*

padding: 0.2em 0.4em;

font-size: 1.2em;

border-radius: 0.2em;

}

*/

蛍光ライン

code:style.css

/* .level-2{

background: linear-gradient(transparent 60%, rgb(105, 251, 170) 60%);

}

.level-1{

background: linear-gradient(transparent 80%, rgb(105, 251, 170) 80%);

}

*/

code:style.css

/* 付箋記法のスタイル例 */

.line:not(.cursor-line) .deco-\~ {

display: inline-block; position: absolute; top: -0.6em; right: -6vw;

max-width: 40%; padding: .3rem 1rem;

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-\~ {

/* 太字記法との組み合わせでスタイルを変える場合 */

/* 付箋記法内で打消し線記法と下線記法を併用する場合 */

.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;

}

.unread:hover {

width: auto !important;

border-right: 0 !important;

}

code:style.css

.deco-\{, .deco-\} {

font-size: 1em;

/* padding: 0.3em 0.2em 0.3em 0.2em; */

padding: 0 0.2em;

border-radius: 0.4em;

margin: auto 0.3em;

display: inline-block;

max-width: calc(100% - 100px);

vertical-align: top;

}

左の角

code: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;

}

右の角

code:style.css

.deco-\}:after {

position: relative;

margin-right: -10px;

padding: 0;

transform: translateY(calc(1em - 80%));

width: 0;

content: "";

display: block;

float: right;

border-width: 0.5em 0.5em 0 0;

border-style: solid;

}

テーブルの見た目

code:style.css

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセルの右と下 */

}

.table-block .cell:first-child {

/* 1列目のセルの左 */

}

.section-title + .line .table-block .cell {

/* 1行目のセルの上 */

}

/* 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

プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動

code:style.css-x

/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */

/* ※次のヘッダー固定と同時に使う必要がある */

@media screen and (min-width: 768px) {

.quick-launch {

position: fixed; top: 5px; left: calc((100% - 1080px)/2); z-index: 990 }

.page { padding-top: 0 } }

@media screen and (min-width: 768px) and (max-width: 1200px) {

.quick-launch { left: 80px } }

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 } }

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

ページ全体のフォントを大きくする

code:style.css

.page-list .title {

font-size: 110% !important;

}

ページメニューの情報ボタンのサイズを調整

code:style.css

height: 44px;

}

ページ

code:style.css

.col-page { min-height: 800px; }

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 }

code:style.css

.line-title .text {

padding-bottom: 0px !important;

}

.line-title {

margin-bottom: 8px !important;

}

.app:not(.presentation) .line.line-title .text {

/*font-size: calc(1.2vw + 1.5rem);*/

font-weight: 600;

line-height: 1.2 !important;

padding-bottom: 0px !important;

margin-bottom: 8px !important;

}

ページ本文

太字に下線を付ける

code:style.css-x

.level-1 {

background: linear-gradient(transparent 80%, yellow 80%);

}

強調表示

code:style.css

/* 見出し */

.deco-\# {

border-left: 4px rgb(41, 169, 114) solid;

padding-top: 6px;

padding-bottom: 4px;

padding-left: 4px;

font-size: 120%;

font-weight: 700;

}

/* 赤背景で強調 */

.deco-\! {

background-color: rgba(255, 160, 160, 0.5);

}

/* 緑下線で強調 */

/*

text-decoration: none !important;

}

.deco-\_ {

color: inherit !important;

font-size: inherit !important;

background: linear-gradient(transparent 60%, rgba(57, 172, 134, 0.9) 100%);

}

*/

番号リストや数式でも中点を表示する

code:style.css

.line.number-list .dot { display: block; }

.line.formula-line .dot { display: block; }

引用を斜体にしない

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 : 'FontAwesome';

content : '\f08e';

text-decoration: none;

}

タグをタグっぽく

code:style.css-x

/* ＃で始まるタグをラベル風にする */

display: inline-block;

margin: 0 8px 10px 0;

border-radius: 4px;

padding: 2px 6px 0px;

font-weight: bold;

}

}

テーブル

code:style.css

.table-block .cell:first-child {

}

.table-block .cell {

}

.cell-text span {

font-family: 'Kosugi Maru' !important;

}

コードブロック

code:style.css-x

_ .line span.code-block {

line-height: 1.1em; /* 指定すると行番号と高さが合わない */

}

.line span.code-block .code-block-start {

padding: 3px 5px 3px 5px;

font-size: 100%;

}

.line span.code-block .code-block-start a {

text-decoration-line: none;

}

.line code {

font-size: 100%;

font-family: 'Kosugi Maru' !important;

}

code:style.css

/* アイコンサイズを大きくする */

.line img.icon { height: 1.8em }

.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.css

.cursor-line {

background-color: rgba(0, 0, 0, .02);

box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);

}

カーソルを太くする

code:style.css

.cursor {

width: 4px !important;

background-color: rgb(57, 172, 134);

}

/* 黒い線が気になるのでカーソルと同じ色にする */

.cursor {f

color: rgb(57, 172, 134);

border-color: rgb(57, 172, 134);

}

.cursor svg {

display: none;

}

カーソルを点滅表示する

code:style.css

@keyframes blink {

0% { opacity: 0; }

49% { opacity: 0; }

50% { opacity: 1; }

}

.cursor { animation: blink .5s infinite }

/* 同時作業中のユーザーのカーソルは点滅させない */

ポップアップメニューのフォントを大きくする

code:style.css

.popup-menu .button-container .button {

font-size: 100%;

}

ピンしたページのスタイル

code:style.css

/* ピンしたページのスタイル */

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

.grid li.page-list-item a .pin::after {

display: inline-block; transform: rotate(35deg) }

code:style.css

.deco-\! {

padding: 0.1em 0.2em 0.1em 0.2em;

}

行頭のドット（バレット | ビュレット）を少し薄くする

code:style.css

.line .indent-mark .dot {

top: 12px;

width: 4px;

height: 4px;

}

code:style.css

/* カウンターのスタイル */

cursor: pointer; font: 88%/1 monospace;

opacity: .35; /* ←マウスを乗せてないときの濃さ 35% */

transition: opacity .2s ease-out }

/* ポップアップのスタイル */

z-index: 30; position: absolute; bottom: 2em; right: -1em;

transition: opacity .3s ease-out }

/* プレゼンモードのときは非表示にする */

code:script.js

const __appliedProject__ = scrapbox.Project.name

const __charCounterSetup__ = setInterval(function() {

// ページが準備できるのを待ちたいので、スクリプトがロードされてから3秒くらいしたら処理開始↓↓

if (document.getElementById('editor') && scrapbox.Page.lines)

clearInterval(__charCounterSetup__)

else

return // ページの準備ができてないときはまた3秒待つ

// 下準備

const $id = id => document.getElementById(id)

const $query = q => document.querySelector(q)

const fmt = n => new Intl.NumberFormat('en-US').format(n).padStart(6)

// 文字数カウンター表示用のエレメントを作ってく

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

var counterWrapper = document.createElement('div')

counterWrapper.id = '__charCounter__'

'<pre id="__charCounterPopup__" style="opacity:0"></pre>'

$id('editor').appendChild(counterWrapper)

const counter = $query('#__charCounter__ span')

const popup = $id('__charCounterPopup__')

// 文字数カウンターにマウスカーソルを乗せたときに詳細をポップアップする

counter.addEventListener('mouseover',

function() {

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

const words = linesText.split(/\s+/).length

${fmt(scrapbox.Page.lines.length)} lines

popup.style.opacity = 1

})

// 文字数カウンターからマウスカーソルが離れたら詳細ポップアップを見えなくする

counter.addEventListener('mouseout', function() { popup.style.opacity = 0 })

// 文字数のみを数え直す関数

const updateCounter = function() {

if ($query('.presentation')

|| scrapbox.Project.name !== __appliedProject__) {

// プレゼンモードになってたり、よそのプロジェクトを表示してたら文字数カウンターを非表示にする

counterWrapper.style.display = 'none'

} else if (scrapbox.Page.lines) {

// ここで数え直ししてます

const linesText = $query('.lines').innerText.trim()

const chars = linesText.split(/\s+/).join('').length

counterWrapper.style.display = 'block'

}

}

// 数え直すタイミングは、テキスト入力時とペースト時

$id('text-input').addEventListener('input', updateCounter)

$id('text-input').addEventListener('paste', updateCounter)

// 何もしなくても3秒ごとに数え直す

setInterval(updateCounter, 3000)

}, 3000)

code:style.css

/* スタイルいじりたいときはここへ */

/*.icon-home { display: none !important; }

/*.project-home { font-size: 30px !important; }

インラインコードのハイライトをしない

code:style.css

code.code span {

color: inherit !important;

}

code:style.css-x

/* 本文の最後にテキスト挿入 */

.app:not(.presentation) .page::after {

content: 'EOF';

display: block; margin-top: 1rem; padding: 1rem 0; text-align: center;

border: solid rgba(0,0,0,.2); border-width: 1.5px 0; font: 500 normal 1.8rem/1 sans-serif }

.app:not(.presentation) .page.not-persistent::after {

content: '本文なし' }