settings
https://gyazo.com/7440ba90184b3d9bafe552f1627272d2
UserCSSの設定を行うページ
code:style.css
/* 画像(figure)関係はこちら*/
@import '/api/code/tduna/Figure_UserCSS/style.css';
/* 文章(sentence)や文字(character)関係はこちら*/
@import '/api/code/tduna/Sentence_UserCSS/style.css';
/* 見た目(文字や画像以外)が変化するものはこちら*/
@import '/api/code/tduna/GUI_UserCSS/style.css';
* {
font-family: 'M PLUS Rounded 1c', sans-serif !important;
}
/* @import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/style.css"; */
code:script.js
// import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/script.js"
1. しおり
code:style.css
/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
a#Bookmarks.tool-btn:hover { text-decoration: none }
a#Bookmarks.tool-btn::before {
position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }
a#Bookmarks.tool-btn img { opacity: 0 }
code:script.js
// メニューボタンの追加
const __bkmClass = '.deco-\\#' /* ここで記法のセレクタを設定してね。デフォルトはドットです */
const __bkmMenuTitle = 'Bookmarks'
scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: '/assets/img/logo.png',
onClick: function() {
const __fixedHeaderHeight = ($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0) +
($('.navbar-pagemenu').height() || 0)
scrapbox.PageMenu(__bkmMenuTitle).removeAllItems()
$(__bkmClass).closest('.line').each(function(i, e){
scrapbox.PageMenu(__bkmMenuTitle).addItem({
title: $(e).find(__bkmClass).text(),
onClick: function() {
$('html,body').animate({
scrollTop: $(e).offset().top - $('body').offset().top - __fixedHeaderHeight
}, 150)
}
})
})
}
})
favicon変更
code:script.js
$('head > linkrel=icon').attr('href','/api/pages/tduna/tdu_na/icon'); 2. SettingとUserPageを非表示
code:style.css-x
/* settingsへのリンクを消す */
display: none;
}
/* naoonへのリンクを消す */
display: none;
}
8. テロメアの未読表現をカスタマイズ
code:style.css-x
.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;
}
tdu na.icon吹き出し
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;
}
10. 左の角
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;
}
11. 右の角
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;
}
Taroです/icons/徒歩.icon
/icons/talker.iconTaroです
/icons/scrapbox.iconScrapboxでは、遠く離れた人が同じページを同時に編集することができます。 ライブ・マークアップエディタはとても強力で、角カッコで文字を囲むだけで、すばやくリンクにしたり、画像や動画として展開することができます。 すべてのデータはテキストデータなので他のツールとの連携も自在です。https://scrapbox.io/product Scrapboxでは、遠く離れた人が同じページを同時に編集することができます。 ライブ・マークアップエディタはとても強力で、角カッコで文字を囲むだけで、すばやくリンクにしたり、画像や動画として展開することができます。 すべてのデータはテキストデータなので他のツールとの連携も自在です。https://scrapbox.io/product /icons/scrapbox.icon 12. テーブルの見た目
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
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: ヒラギノ明朝 ProN; color: grey }
/* カーソル行の行番号を濃く表示する */
.line:not(.line-title)::before { opacity: .5 }
.line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bold } }
プライベートプロジェクトの設定
code:style.css
15. ページ全体のフォントを大きくする
code:style.css
.page-list .title {
font-size: 110% !important;
}
16. ページメニューの情報ボタンのサイズを調整
code:style.css
height: 44px;
}
17. ページ
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 {
border-bottom: 2px #CCC solid; 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;
border-bottom: 2px #CCC solid rgba(0,0,0,.2); padding-bottom: 0px !important;
margin-bottom: 8px !important;
}
19. ページ本文
太字に下線を付ける
code:style.css-x
.level-1 {
background: linear-gradient(transparent 80%, yellow 80%);
}
20. 強調表示
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%);
}
*/
21. 番号リストや数式でも中点を表示する
code:style.css
.line.number-list .dot { display: block; }
.line.formula-line .dot { display: block; }
22. 引用を斜体にしない
code:style.css
.line .quote {
font-style: normal;
}
23. 引用の行頭空白を表示しない
code:style.css
.tag {
display: none;
}
.cursor-line .tag {
display: inline;
}
24. 外部リンクにアイコンを付ける
code:style.css-x
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
margin-left : 4px;
display : inline-block;
font-family : 'FontAwesome';
content : '\f35d';
text-decoration: none;
}
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::before {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 600;
display: inline-block;
padding: 0 0.5em 0 0;
}
25. タグをタグっぽく
code:style.css-x
/* #で始まるタグをラベル風にする */
display: inline-block;
margin: 0 8px 10px 0;
border-radius: 4px;
padding: 2px 6px 0px;
font-weight: bold;
}
}
26. テーブル
code:style.css
.table-block .cell:first-child {
}
.table-block .cell {
}
.cell-text span {
font-family: 'Kosugi Maru' !important;
}
27. コードブロック
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
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
行頭のドット(バレット | ビュレット)を少し薄くする
code:style.css-x
.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 }
#__charCounter__ { z-index: 30; position: sticky; bottom: 0; text-align: right } /* ポップアップのスタイル */
z-index: 30; position: absolute; bottom: 2em; right: -1em;
border-radius: .25em; border: 1px solid #ddd; box-shadow: 0 0 8px 1px rgba(8,8,8,.1); padding: .8em; background-color: azure; color: #5F9EA0; font: 13.5px/1.4 monospace; 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__'
counterWrapper.innerHTML = <span>${fmt(chars)} chars</span> +
'<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
popup.innerHTML = ${fmt(chars)} chars\n +
${fmt(words)} words\n +
${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
counter.innerText = ${fmt(chars)} chars
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;
}