settings
code:style.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にnavbarに移動 */
/* ※次のnavbar固定と同時に使う必要がある */
@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 7px; left: calc((100% - 1080px)/2); z-index: 990 }
/*.page { padding-top: 0 }*/ }
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 65px } }
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 80px } }
@media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 80px) } }
body {
font-family: '游ゴシック','Yu Gothic',san-serif;
}
.line .quote {
font-style: normal;
}
.line .meta {
}
.navbar-default {
}
.navbar-default .navbar-nav>li>a {
}
.grid li.page-list-item a {
box-shadow: 0 1px 0 rgba(0,0,0,0.13);
}
.page {
box-shadow: 0 1px 0 rgba(0,0,0,0.16);
}
form {
}
見出しとタイトルをかっこよく
code:style.css
.line strong.level-3 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
}
.line strong.level-5 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
}
.line.line-title .text {
width: 95%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-bottom: solid 2px #a9a9a9 !important; font-weight: bold;
font-size: 25px;
position: relative; left: -15px;
}
[** ]<-これを見出し風にする
code:style.css
/* ** <ーこれを見出しっぽくする */
.line strong.level-1{
padding: .5em .75em;
background: linear-gradient(transparent 80%, #fffff 60%); }
行間を調整する
code:style.css
/* 行間調整 */
.line .section-0{
line-height: 1.2em !important;
}
code:style.css
.new-button { background-color: rgba(255, 255, 255, 0) !important; }
.horizontal-line { background-color: rgba(255, 255, 255, 0) !important; }
.vertical-line { background-color: rgba(255, 255, 255, 0) !important; }
1. 校正用のスタイル
削除 削除 ※これはデフォルトの打ち消し線の記法
挿入挿入 挿入を意味する記法ってことにしてみた
挿入を取り消し挿入を取り消し こういう表示で意味が通るのか、ちょっとわかんない
例)春は曙あけぼの。ようよう白くなりゆく山ぎは山際、少し明かりて、紫だちたる雲の細くたなびきたる。
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 }
行頭のドットスタイル
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
}
画像を並べて表示
一行に敷き詰め [| [画像URL][画像URL][画像URL]…]
横幅いっぱい1列並べ [*| [画像URL][画像URL][画像URL]…]
3列並べ [***| [画像URL][画像URL][画像URL]…]
5列並べ [*****| [画像URL][画像URL][画像URL]…]
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image{ object-fit: contain }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
width: 100%; height: 100%; margin: 0; object-fit: cover }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level-" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level-" .deco-\| img.image { margin: .2em } ピンマークを小さくする
code:style.css
.grid li.page-list-item a .pin{
width: 14px;
height: 14px;
background-position: right -4px top -4px !important;
}
文字サイズ大きく(デフォルトは15px)
code:style.css
.editor {
font-size: 15px;
}
行頭に引用符を付けるスクリプト
code:script.js
scrapbox.PopupMenu.addButton({
title: 'quote',
onClick: text => text.split(/\n/).map(line => > ${line}).join('\n')
})
ページの1部分を新規ページに切り出すポップアップ
code:script.js
scrapbox.PopupMenu.addButton({
title: 'NewPage',
onClick: text => {
const lines = text.split(/\r\n/g)
const title = lines0
.trim()
.replace(/\^\+.icon\]/gm, '')
const projectRoot = (() => {
const tmp = location.href.split('/')
tmp.pop()
return tmp.join('/')
})()
const currentPageTitle =
decodeURIComponent(location.href.split(/\//g).pop())
const body = encodeURIComponent(lines.join('\n'))
window.open(${projectRoot}/${title}?body=${body})
}
})
選択文字列をプロジェクト内で検索ポップアップ
code:script.js
// 選択された文字列をScrapboxプロジェクト内で検索する
// Scapbox検索ボックスを使ったときと同じ結果ページを開く
scrapbox.PopupMenu.addButton({
title: 'SB内検索',
onClick: function (text) {
var projectName = 'shio';
+'/search/page?q=' + text);
}
});
Gyazoに飛ぶメニュウの追加
code:script.js
scrapbox.PageMenu.addMenu(
{title:"Gyazo",
})
日付書式
code:script.js
scrapbox.TimeStamp.addFormat("]YYYY/MM/DD[ HH:mm:ss")
scrapbox.TimeStamp.addFormat("]YYYY/MM/DD[")
scrapbox.TimeStamp.addFormat("YYYY/MM/DD")
scrapbox.TimeStamp.addFormat("YYYYMMDD")
表を見やすく
code:style.css
/* テーブルのセルをわかりやすくする */
.table-block table { background-color: transparent; border-collapse: separate; border-spacing: 2px }
.table-block table tr td:nth-child(odd) { padding: .1em; background-color: rgba(0,0,0,0.04) }
.table-block table tr:nth-child(even) td { background-color: rgba(0,0,0,0.06) } /* 偶数行を濃くする */
.table-block table tr:first-child td { font-weight: bolder; text-align: center } /* 1行目だけ太字&中央揃え */
.table-block table tr td:first-child { padding: 0; background-color: transparent; border-width: 0 }
文字の位置揃えをする
センタリング
右寄せ
code:style.css
/* 中央寄せ */
.deco-\< { position: absolute; width: 100%; text-align: center }
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
tableの見た目をカスタマイズ:/customize/テーブルの見た目をカスタマイズを拝借して編集
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: bolder;
text-align: center;
}
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
投稿サイドの縦のバーを消す
code:style.css
.line .telomere .telomere-border {
border-color: #fff; /* 背景色と同じにして見えなくした */ }
テロメアをおとなしくする
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 2.5px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none
}
.unread {
}
status-barのスタイル変更
code:style.css
.status-bar {
background-color: rgba(255, 255, 255, 0);
border-top-left-radius: 15px;
}
角丸UserCSS
code:style.css
.page,
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border-radius: 15px;
}
.grid li.page-list-item a .header {
position: absolute;
bottom: 0px;
z-index: 1;
background: rgba(240, 240, 240, 0.9);
border-top: 1px;
}
.grid li.page-list-item a .icon img {
position: absolute;
top: 0px;
left: 0px;
}
.grid li.page-list-item a:hover {
border-radius: 10px ;
box-shadow: 0px 0px 0px 4px #729FCF ; }
.container {
max-width: none;
}
code:style.css
.brand-icon {
width: 30px;
height: 30px;
background-image:var(--logo-url);
background-size:cover;
background-repeat:no-repeat;
border-radius: 50%;
svg {display: none;}