settings-base
https://gyazo.com/ef363f3658efc27b86c510bef0a0a719 #Scrapbox_Syntax
プレゼンテーションモード
code:style.csss
.presentation .line {
display: block !important;
}
.presentation .section-title:not(:first-child) {
margin-top: 50vh;
}
.app.presentation .line.section-title {
font-size: 4vw;
margin-bottom: .5em
}
.app.presentation .line {
font-size: 2.5vw;
line-height: 1.4em
}
/icons/hr.icon
code:style.cssss
body{
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}
行間調整
code:style.cssss
divclass*="section-" .text:not(.code-block){
padding: 0.1em 0;
}
インラインコードブロックを色づけしない
code:style.css
code.code span {
color: inherit !important;
}
ピン止めを区切る
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
#で始まるタグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
.line:not(.cursor-line) atype="hashTag" {
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #f27e48;
font-size: 0.8em;
border: 1px solid #f27e48;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
/*
atype="hashTag":hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
*/
基本
/forum-jp/ネストされたコード記法内で折り返しが入った時の行頭部分の背景を無しにしてほしい#5ec92229ec4fce000030d496
/noratetsu/●横幅の長くなった表をスクロールできるようにする（仮）#60a5c1e5f6530000000effb3
code:style.css
.line span.code-block, .line span.quote{
font-size: 90%;
line-height: 1.3em;
}
.line code {
font-size: 80%;
line-height: 1.0em;
}
.line span.code-block .code-block-start{
background-color: #FFF;
}
@media only screen and (max-width: 640px) {
.lines {
overflow-x: scroll;
}
}
.table-block {
font-size: 90%;
line-height: 1.5em;
}
.table-block .table-block-start {
background-color: #F5F5F5;
}
.table-block .table-block-start a {
text-decoration: none;
}
/** 背景色がはみ出るのを緩和**/
.line span.code-block .code-block-margin {
background-color: transparent;
}
印刷
,付のリンクは印刷しない
code:sty.css
@media print {
.line ahref="/yuunkjm/break-after"{
display: inline-block;
break-after: page;
page-break-after: always;
}
body {
background-image: none !important;
font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
/*font-family: "游明朝体", YuMincho, "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", Georgia, Times, "Times New Roman", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
}
.line {
color: #000;
}
.line a.page-link{
color: #4A4A4A;
}
.line a.link:not(.icon)::after {
content: " (" attr(href) ")" !important;
}
.line span.deco-\, a.link:not(.icon)::after {
content: "" !important;
}
.line span.deco-\, a.link:not(.icon) {
pointer-events: none;
content: "" !important;
}
}
/icons/hr.icon
スタイル調整
code:style.css
.line .quote {
font-style: normal;
background: #ffffff;
}
.editor, .stream, li.page-list-item {font-family: unset !important;}
.grid li.page-list-item a {
box-shadow: 0 1px 0 rgba(0,0,0,0);
}
ul.grid li.page-list-item a .header{
border-top: solid 1px #555555;
}
ul.grid-md.grid li.page-list-item a .header{
border-top: solid 1px #555555;
}
ul.grid-lg.grid li.page-list-item a .header{
border-top: solid 1px #555555;
}
.grid li.page-list-item a:hover{
box-shadow: none;
}
.page {
box-shadow: 0 1px 0 rgba(0,0,0,0.16);
background-color: #ffffff;
}
form {
border:0px #ddd solid;
}
/icons/hr.icon
ピンスタイルのカスタマイズ
via /scrasobox/settings　ピンの形状と色をカスタマイズ
code:style.css
/* ピンしたページのスタイル */
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free';font-weight: 900; font-size: 20px; color: #999; bottom: 0;
display: inline-block; transform: rotate(35deg) }
/icons/hr.icon
はりつくメニューバー
code:style.csss
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
body: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 } }
/icons/hr.icon
code:style.csssss
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #ffffff; }
/icons/hr.icon
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/icons/hr.icon
スリムなテロメア
/scrasobox/スリムなテロメア
/icons/hr.icon
カーソルをカスタマイズ
をさらにカスタマイズ
code:style.css
/* カーソルの幅と色替え */
.cursor {width: 2px; background-color: rgb(0,0,0); }
/icons/hr.icon
ホームマーク削除
code:style.css
.icon-home { display: none !important; }
/icons/hr.icon
外部リンク
code:style.css
/* External links */
.line a.link:not(.icon)::after { font-family:'Font Awesome 5 Free'; font-weight: 900; content: ' \f360'; display: inline-block }
.line a.link[href^="https://dropbox.com"]::before,
.line a.link[href^="https://www.dropbox.com"]::before,
.line a.link[href^="https://megalodon.jp"]::before,
.line a.link[href^="https://web.archive.org"]::before,
.line a.link[href^="https://sourceforge.net"]::before,
.line a.link[href^="https://qiita.com/"]::before,
.line a.link[href^="https://stackoverflow.com"]::before,
.line a.link[href^="https://photos.google.com"]::before,
.line a.link[href^="https://photos.app.goo.gl"]::before,
.line a.linkhref*="amazon"::before,
.line a.linkhref*="oracle.com"::before,
.line a.linkhref*="adobe.com"::before,
.line a.linkhref*="toho-u.ac.jp"::before,
.line a.linkhref*=".osdn."::before,
.line a.linkhref*=".morningstar."::before,
.line a.linkhref*="microsoft.com"::before,
.line a.linkhref*="wikipedia.org"::before,
.line a.linkhref*="github."::before,
.line a.linkhref*="google."::before,
.line a.linkhref*=".com/"::before,
.line a.linkhref*=".co."::before,
.line a.linkhref*=".gr."::before,
.line a.linkhref*=".gr."::before,
.line a.linkhref*=".go."::before
{
content:'';
display: inline-block;
background-size: contain;
background-repeat: no-repeat;
height: 1.2em;
width: 1.2em;
margin-right: 0.2em;
vertical-align: middle;
}
.line a.linkhref*=".com/"::before{
background-image: url(https://i.gyazo.com/d2caf6cdc1d210944ebc08f88738d936.png);
}
.line a.linkhref*="slack.com/"::before{
background-image: url(https://i.gyazo.com/a5674abf8aa52879f9517171a73cd23d.png);
}
.line a.linkhref*=".co."::before {
background-image: url(https://i.gyazo.com/f6c001ceabce6015561e1f74c925651f.png);
}
.line a.linkhref*=".go."::before {
background-image: url(https://i.gyazo.com/802aed59e3dfad671c49191ce5806373.png);
}
.line a.linkhref*=".gr."::before {
background-image: url(https://i.gyazo.com/7325bbff1f885252b9289ef47ecf6ab0.png);
}
.line a.link[href^="https://dropbox.com"]::before,
.line a.link[href^="https://www.dropbox.com"]::before {
background-image: url(https://i.gyazo.com/0244c2f7114727865d437a4cfec8e600.png);
}
.line a.link[href^="https://megalodon.jp"]::before {
background-image: url(https://i.gyazo.com/90316c3333733636ea159de8fc4db22e.png);
}
.line a.link[href^="https://web.archive.org"]::before {
background-image: url(https://i.gyazo.com/b9b59bed89823655414f6439a76bd909.png);
}
.line a.linkhref*="amazon"::before {
background-image: url(https://i.gyazo.com/2f2cc0562fa5dce3d49de849ce257cdb.png);
}
.line a.linkhref*="github."::before{
background-image: url(https://i.gyazo.com/43b91460fc07053d22d47319581a3147.png);
}
.line a.linkhref*="google."::before{
background-image: url(https://i.gyazo.com/98afed2d8669fc5ddcd7a3db1196f2f9.png);
}
.line a.link[href^="https://drive.google.com"]::before {
background-image: url(https://i.gyazo.com/8be6d53a633e7620e268ffb23cf31741.png);
}
.line a.linkhref*="oracle.com"::before {
background-image: url(https://i.gyazo.com/a4d29ad70b4c1b7cc94faabe547e54cb.png);
}
.line a.link[href^="https://stackoverflow.com"]::before {
background-image: url(https://i.gyazo.com/eca4591845969af5424b8749da9efcf6.png);
}
.line a.link[href^="https://sourceforge.net"]::before {
background-image: url(https://i.gyazo.com/0b5d1264f10fbfdf3bec4c36a0bbcfe8.png);
}
.line a.linkhref*="wikipedia.org"::before {
background-image: url(https://ja.wikipedia.org/static/favicon/wikipedia.ico);
}
.line a.link[href^="https://photos.google.com"]::before,
.line a.link[href^="https://photos.app.goo.gl"]::before{
background-image: url(https://i.gyazo.com/b297373ae439650f8d8f2cb0745d58e3.png);
}
.line a.link[href^="https://qiita.com/"]::before{
background-image: url(https://i.gyazo.com/c620d3e403342b1022967ba5e3db1aaa.png);
}
.line a.linkhref*="microsoft.com"::before {
background-image: url(https://i.gyazo.com/c073e9701a3915c01b3242eb93b3c172.png);
}
.line a.linkhref*=".osdn."::before {
background-image: url(https://i.gyazo.com/dec96cf3bb45a9a2cafa16170d1b6b64.png);
}
.line a.linkhref*="adobe.com"::before {
background-image: url(https://i.gyazo.com/132f35d7caaadc48e1070e80373d0071.png);
}
.line a.linkhref*="toho-u.ac.jp"::before {
background-image: url(https://i.gyazo.com/7bb3f77ac2ecc42c94cf884591c0a51b.png);
}
.line a.linkhref*="morningstar"::before {
background-image: url(https://i.gyazo.com/1efea486f09aa262c9d0e431831c6cb1.png);
}
/icons/hr.icon
Pin
code:style.css
a#Pinned.tool-btn:hover { text-decoration: none }
a#Pinned.tool-btn::before { position: absolute; left: calc(46px/3); content: '\f08d'; font: 22px/46px 'Font Awesome 5 Free'; font-weight: 900; }
a#Pinned.tool-btn img { opacity: 0 }
/icons/hr.icon
テーブルのセルをわかりやすくする
/scrasobox/テーブルのセルをわかりやすくする
code:style.css
.table-block .cell {margin: 1px}
.section-title+.line .table-block .cell { font-weight: bolder; text-align: center }
table:test
属性 値
a 1
b 2
/icons/hr.icon
行頭のドットスタイル
箇条書き記号
code:style.css
.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}
/icons/hr.icon
セクション区切りを可視化
/scrasobox/セクション区切りを可視化する
DECO
/icons/hr.icon
二重括弧にマーカーを引く
二重括弧[[]]で蛍光ペン(ラインマーカー) (ハイライト)を引く
settings - Porin's Room
/icons/hr.icon
code:style.css
.line strong:not(class) {
/* background: #ABFF4F; padding: 0em 0.2em;*/
/* background: linear-gradient(transparent 10%, #ABFF4F 25%, #ABFF4F 70%, transparent 90%) */
/* background: linear-gradient( transparent 70%, #e8a2a2 0% );*/
border-bottom: 3px solid #e8a2a2;
}
code:style.csss
.line strong:not(class){
color:#0a0705;
/* background: linear-gradient(#ffffff 30%,#00ff01 80%)*/
}
/icons/hr.icon
強調文字に色を付ける
強調記法である[* 文字]を紺にする場合
code:style.csss
.line strong {
color: #262e59;
}
/icons/hr.icon
ハンコ記法
丸で囲む
code:style.css
.line class="deco-\( deco-\)" {
display: inline-block; border-radius: 50%; border: .05em solid #f40;
min-width: 1em; padding: .1em; vertical-align: text-bottom;
line-height: 1; color: #f40; font-weight: 600 }
/icons/hr.icon
吹き出し
/help-jp/文字装飾記法
フキダシになるタグ - Scrapboxとあそぶ
yuunkjm.icon 吹き出しが書ける yuunkjm.icon 反対サイド yuunkjm.icon
コメントをつける時に使うかな．
code:style.css
/* フキダシ記法版 */
.line:not(.cursor-line) .deco-\{ {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1.2; color: #FFF !important; background-color: #5e8af7;
padding: 3px 4px 2px 5px; margin: 0 .6em .4em .6em;
border-radius: .4em; }
.line:not(.cursor-line) .deco-\{::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0.4em; left: -0.45em;
width: 0; content: '';
border-width: 0 0 .5em .5em; border-style: solid; border-color: #5e8af7 transparent }
.line:not(.cursor-line) .deco-\} {
display: inline-block; position: relative; max-width: calc(100% - 4em);
line-height: 1.2; color: #FFF !important; background-color: rgba(107, 177, 148, 1.0);
padding: 5px 4px 2px 3px; margin: 0 .6em .4em .6em;
border-radius: .4em; }
.line:not(.cursor-line) .deco-\}::after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0.4em; right: -0.45em;
width: 0; content: '';
border-width: 0 .5em .5em 0; border-style: solid; border-color: rgba(107, 177, 148, 1.0) transparent }
code:style.csssss
/* { で始まるタグを吹き出しにする ※アイコン記法は除く */
.line ahref^="./%7B":not(.icon) {
display: inline-block; position: relative; vertical-align: text-top;
line-height: 1; font-size: 91%; color: #FFF !important; background-color: rgba(107, 177, 148, 0.85);
padding: 3px 4px 1px 5px; margin-left: 10px;
border-radius: 4px; border-bottom-left-radius: 0 }
.line ahref^="./%7B":not(.icon):after {
display: block; /* reduce the damage in FF3.0 */
position: absolute; bottom: 0; left: -7px;
width: 0; content: "";
border-width: 0 0 7px 7px; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }
.line ahref^="./%7B":not(.icon) span:first-child { display: none }
.line.cursor-line ahref^="./%7B":not(.icon) span:first-child { display: inline }
code:style.ssscss
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
/*border: 1px solid #bcdff1;*/
/*background-color: #d9edf7;*/
background-color: #5e8af7;
padding: 0em 0.8em;
border-radius: 0.8em;
margin: 0em 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1.4em - 80%));
width: 0;
content: "";
border-width: 0 0 1.4em 1.4em;
border-style: solid;
border-color: #5e8af7 transparent;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1.4em - 80%));
width: 0;
content: "";
border-width: 0 1.4em 1.4em 0;
border-style: solid;
border-color: #5e8af7 transparent;
}
.deco-\{.deco-\}:before,.deco-\{.deco-\}:after {
border-style: none;
}
/* 吹き出し内のリンク色の調整 */
.deco-\{ a.page-link, .deco-\} a.page-link {
color: #FFF;
}
.line .deco-\{.deco-_ { text-decoration: underline }
/icons/hr.icon
コメント記入用
yuunkjm.icon コメント124
[% [yuunkjm.icon] コメント]
code:style.css
.deco-\% {
color: #888; /* 黒文字 */
font-style: italic;
font-size: 90%;
}
/icons/hr.icon
文中に引用を挿入
/scrasobox/拡張記法がきた！#59e5376896b9040000af6917
ねこだいすき[" ねこだいすき]
例）文章の途中ですがここだけ引用です。
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: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
/icons/hr.icon
位置揃えをする
左寄せ
右寄せ
センタリング
https://gyazo.com/ca331fb733c8d25b5894e6ca67b6edc2
https://gyazo.com/ca331fb733c8d25b5894e6ca67b6edc2
/yuunkjm/blank.icon
code:style.css
@media print, (min-width: 768px) {
.app:not(.presentation) .deco-\< img.image{float: left; margin-right: 1em; }
}
.app:not(.presentation) .deco-\> {text-align:right; float:right;}
.app:not(.presentation) .deco-\> img.image { margin-left: auto; margin-right: 0; }
.app:not(.presentation) .deco-\<.deco-\> { text-align: center; width:100%;}
.app:not(.presentation) .deco-\<.deco-\> img.image{margin-left: auto; margin-right: auto; float:none; display:block;}
/* .deco-\<.deco-\> { position: absolute; width: 100%; text-align: center } */
/* .deco-\<.deco-\> { text-align: center; margin-left: auto; margin-right: auto; width: 100%;}*/
/icons/hr.icon
画像
画像を四角で囲む
https://gyazo.com/60339090fec49eb468b2b160b8bebe0d
code:style.css
.deco-\! img{
border: 2px solid #eee;
padding: 4px;
}
ミニ画像アイコン表示
https://gyazo.com/60339090fec49eb468b2b160b8bebe0d
code:style.css
.deco-\, img{
max-width: none !important;
max-height: 1em !important;
vertical-align: middle !important;
}
画像サイズ
code:style.css
.level-1 img.image { width: 12.5%; max-height: none; }
.level-2 img.image { width: 25.0%; max-height: none; }
.level-3 img.image { width: 37.5%; max-height: none; }
.level-4 img.image { width: 50.0%; max-height: none; }
.level-5 img.image { width: 66.6%; max-height: none; }
.level-6 img.image { width: 83.3%; max-height: none; }
/icons/hr.icon
画像を並べて表示
/scrasobox/画像を並べて表示
一行に敷き詰め [| [画像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; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
/icons/hr.icon
栞
code:style.css
/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */
.app:not(.presentation) .line .deco-\. {
/* padding: 0.1em 0.4em;
background-color: #F5FAEA;*/
padding: 0.1em 0.4em;
color: #155724;
background-color: #d4edda;
border: 1px solid #c3e6cb;
}
/*
@media screen {
.app:not(.presentation) .line .deco-\.::after {
padding-left: .3em;
content: '\f02e'; font: 1.7rem/1 'Font Awesome 5 Free'; color: yellowgreen }
}
*/
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
button#Bookmarks.tool-btn:hover { text-decoration: none }
button#Bookmarks.tool-btn::before {
position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }
button#Bookmarks.tool-btn img { opacity: 0 }
/icons/hr.icon
はみ出し付箋
テスト
テスト
テスト
code:style.css
/* 付箋記法のスタイル例 */
.app:not(.presentation) .line:not(.cursor-line) .deco-\~ {
display: inline-block;
margin-left: -0.5rem;
max-width: 100%; padding: .3rem 1rem;
border-left: 1rem solid #04B2D9;
background-color: #f9f8f6;
/*transform: rotate(-0.8deg);*/
box-shadow: 4px 1px 3px rgba(0,0,0,.2) }
.presentation .line .deco-\~ { position: static; max-width: 0% }
@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }
@media print { .line:not(.cursor-line) .deco-\~ {
right: 0; border-bottom: 1px solid #ccc; background-color: #f9f8f6 } }
/* 太字記法との組み合わせでスタイルを変える場合 */
/* カラーパレット→ https://color.adobe.com/Softie-color-theme-2233237/ */
.line .level-2 .deco-\~ { border-left-color: #009175 }
.line .level-3 .deco-\~ { border-left-color: #EFBB33 }
.line .level-4 .deco-\~ { border-left-color: #F23E2E }
/* 付箋記法内で打消し線記法と下線記法を併用する場合 */
.line .deco-\~.deco-- { text-decoration: line-through }
.line .deco-\~.deco-_ { text-decoration: underline }
/icons/hr.icon
等幅フォント
code:style.css
.deco-\' {
font-family: Consolas, "Helvetica Neue",
Arial,
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
Meiryo,
sans-serif;
}
ブロック化
code:style.csssssss
.deco-\& {
display: block;
width: 100%;
}
ボックスを作る
これはボックスです．
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
YaST test
code:style.css
.deco-\& {
padding: 0.1em 0.4em;
color: #383d41;
background-color: #e2e3e5;
border-color: #d6d8db;
}
/*
.deco-\' a{
color: #202326;
font-weight: bold;
}
*/
code:style.csss
.deco-\' {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
border: 1px #e1e1e8 solid;
background-color: #f7f7f9;
/* color: #342d9c;*/
padding: 0.1em 0.4em;
/*border-radius: 0.4em;*/
/*display: inline-block;*
/*white-space: pre-wrap;
max-width: calc(100% - 100px);*/
}
/icons/hr.icon
重要な部分を赤で囲む
/forum-jp/文字色
ここが重要なところです!!
code:style.css
.deco-\# {
color: #a94442;
background-color: #f2dede;
border: 1px solid #ebcccc;
border-radius: 0.4em;
padding: 0.1em 0.4em;
}
.deco-\# a{
color: #a94442;
font-weight: bold;
}
重要な部分を青で囲む
code:style.css
.deco-\+ {
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
border-radius: 0.4em;
padding: 0.1em 0.4em;
}
.deco-\+ a{
color: #002752;
font-weight: bold;
}
/icons/hr.icon
重要な部分を赤くする
ここが重要なところです!!
code:style.css
.deco-\! {
color: #a94442;
/*color: #dc3545; */
font-weight: bold;
}
のびのびドロップダウン
code:style.cssss
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/icons/hr.icon
ICON
/icons/hr.icon
バッジになるタグ
/scrasobox/バッヂになるタグ
code:style.css
.line ahref$="/%E6%AC%A0",
.line ahref$="/%E4%BB%BB%E6%84%8F",
.line ahref$="/=%3E",
.line ahref$="/OK",
.line ahref$="/NG",
.line ahref$="/Q",
.line ahref$="/A",
.line ahref$="/e.g.",
.line ahref$="/def.",
.line ahref$="/cf.",
.line ahref$="/%E6%96%B9%E6%B3%95",
.line ahref$="/%E5%95%8F",
.line ahref$="/%E4%BE%8B",
.line ahref$="/%E5%9C%A8",
.line ahref$="/%E5%87%BA",
.line ahref$="/%E6%AE%8B",
.line ahref$="/%E7%AD%94"{
display: inline-block; min-width: 2.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF }
.line ahref$="/@see",
.line ahref$="/%E7%B7%B4%E7%BF%92",
.line ahref$="/%E6%AC%A1%E3%81%B8",
.line ahref$="/Prev",
.line ahref$="/Next",
.line ahref$="/DONE",
.line ahref$="/NEXT",
.line ahref$="/TODO",
.line ahref$="/Yes",
.line ahref$="/No",
.line ahref$="/if",
.line ahref$="/then",
.line ahref$="/True",
.line ahref$="/False",
.line ahref$="/OBSOLETE",
.line ahref$="/DEPRECATED",
.line ahref$="/FAIL",
.line ahref$="/SUCCESS",
.line ahref$="/ONGOING",
.line ahref$="/PENDING",
.line ahref$="/UNSOLVED",
.line ahref$="/WITHDRAW",
.line ahref$="/SKIPPED",
.line ahref$="/MTG",
.line ahref$="/ref.",
.line ahref$="/NEW",
.line ahref$="/%E6%B3%A8%E6%84%8F",
.line ahref$="/IDEA",.line ahref$="/%E5%87%BA%E5%B8%AD", .line ahref$="/%E9%81%85%E5%88%BB", .line ahref$="/%E6%AC%A0%E5%B8%AD" {
display: inline-block; min-width: 3.2em; border-radius: .2em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF;
}
.line ahref$="/%E4%BB%BB%E6%84%8F" { background-color: #666666 }
.line ahref$="/%E5%87%BA" { background-color: #08BDBD }
.line ahref$="/%E7%B7%B4%E7%BF%92" { background-color: #08BDBD }
.line ahref$="/%E5%95%8F" { background-color: #08BDBD }
.line ahref$="/%E6%AC%A1%E3%81%B8" { background-color: #FF9914 }
.line ahref$="/%E4%BE%8B" { background-color: #666666 }
.line ahref$="/%E7%AD%94" { background-color: #FF9914 }
.line ahref$="/%E6%96%B9%E6%B3%95" { background-color: #FF9914 }
.line ahref$="/@see" { background-color: #999999 }
.line ahref$="/OK" { background-color: #5e8af7 }
.line ahref$="/NG" { background-color: #fd7373 }
.line ahref$="/Yes" { background-color: #5e8af7 }
.line ahref$="/No" { background-color: #fd7373 }
.line ahref$="/True" { background-color: #5e8af7 }
.line ahref$="/False" { background-color: #fd7373 }
.line ahref$="/A" { background-color: #FF9914 }
.line ahref$="/Q" { background-color: #08BDBD }
.line ahref$="/q" { background-color: #08BDBD }
.line ahref$="/if" { background-color: #08BDBD }
.line ahref$="/Prev" { background-color: #08BDBD }
.line ahref$="/Next" { background-color: #08BDBD }
.line ahref$="/NEXT" { background-color: #08BDBD }
.line ahref$="/=%3E" { background-color: #666666 }
.line ahref$="/DONE" { background-color: #666666 }
.line ahref$="/then" { background-color: #666666 }
.line ahref$="/e.g." { background-color: #999999 }
.line ahref$="/WITHDRAW" { background-color: #666666 }
.line ahref$="/TODO" { background-color: #08BDBD}
.line ahref$="/MTG" { background-color: #08BDBD}
.line ahref$="/IDEA" { background-color: #FF9914 }
.line ahref$="/SKIPPED" { background-color: #666666 }
.line ahref$="/ONGOING" { background-color: #2489c5 }
.line ahref$="/UNSOLVED" { background-color: #FF4400 }
.line ahref$="/PENDING" { background-color: #2489c5 }
.line ahref$="/OBSOLETE" { background-color: #FF9914 }
.line ahref$="/DEPRECATED" { background-color: #FF9914 }
.line ahref$="/FAIL" { background-color: #ff4400 }
.line ahref$="/SUCCESS" { background-color: #08BDBD }
.line ahref$="/NEW",.line ahref$="/ref." { background-color: #6e8af3 }
.line ahref$="/%E6%B3%A8%E6%84%8F" { background-color: #ff4400 }
.line ahref$="/%E5%9C%A8", .line ahref$="/%E6%AC%A0", .line ahref$="/%E6%AE%8B" { background-color: #FF9914 }
.line ahref$="/%E5%87%BA%E5%B8%AD", .line ahref$="/%E9%81%85%E5%88%BB", .line ahref$="/%E6%AC%A0%E5%B8%AD" { background-color: #FF9914;}
@see TODO DONE IDEA MTG Next NEXT SKIPPED 例 次へ 練習 問 答 Q A → ← ↑↓=> e.g.NEW注意def.
/icons/hr.icon
タグアイコン (Font Awesome)
< [<] > [>] 矢印 * [*] 重要 !! [!!] 警告 ! [!] 注意 ? [?] 疑問
_ [_] タスク x [x] 完了タスク e [e] イベント o o x [x]
code:style.css
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) ahref$='/%22':not(.icon) span,
.line:not(.cursor-line) ahref$='/!!':not(.icon) span,
.line:not(.cursor-line) ahref$='/!':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3F':not(.icon) span,
.line:not(.cursor-line) ahref$='/%E2%86%92':not(.icon) span,
.line:not(.cursor-line) ahref$='/*':not(.icon) span,
.line:not(.cursor-line) ahref$='/_':not(.icon) span,
.line:not(.cursor-line) ahref$='/x':not(.icon) span,
.line:not(.cursor-line) ahref$='/o':not(.icon) span,
.line:not(.cursor-line) ahref$='/oo':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3E':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3C':not(.icon) span,
.line:not(.cursor-line) ahref$='/e':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px;
}
/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) ahref$='/%22':not(.icon)::after,
.line:not(.cursor-line) ahref$='/!!':not(.icon)::after,
.line:not(.cursor-line) ahref$='/!':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3F':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%E2%86%92':not(.icon)::after,
.line:not(.cursor-line) ahref$='/*':not(.icon)::after,
.line:not(.cursor-line) ahref$='/_':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x':not(.icon)::after,
.line:not(.cursor-line) ahref$='/o':not(.icon)::after,
.line:not(.cursor-line) ahref$='/oo':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3E':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3C':not(.icon)::after,
.line:not(.cursor-line) ahref$='/e':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px; padding-right: 1px;
font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 100%; text-align: center; vertical-align: middle;}
/* ここから各アイコンの設定 */
.line:not(.cursor-line) ahref$='/%22':not(.icon)::after { content: '\f10d'; color: lightgray }
.line:not(.cursor-line) ahref$='/!!':not(.icon)::after { content: '\f06a'; color: #FF4400 }
.line:not(.cursor-line) ahref$='/!':not(.icon)::after { content: '\f06a'; color: #F6AE2D }
.line:not(.cursor-line) ahref$='/%3F':not(.icon)::after { content: '\f059'; color: #758E4F }
.line:not(.cursor-line) ahref$='/%E2%86%92':not(.icon)::after { content: '\f0a9'; color: #758E4F }
.line:not(.cursor-line) ahref$='/*':not(.icon)::after { content: '\f005'; color: #F26419 }
.line:not(.cursor-line) ahref$='/_':not(.icon)::after { content: '\f096'; color: #08BDBD }
.line:not(.cursor-line) ahref$='/x':not(.icon)::after { content: '\f057'; color: #F6AE2D }
.line:not(.cursor-line) ahref$='/o':not(.icon)::after { content: '\f058'; color: #2489C5 }
.line:not(.cursor-line) ahref$='/oo':not(.icon)::after { content: '\f559'; color: #2489C5 }
.line:not(.cursor-line) ahref$='/%3E':not(.icon)::after { content: '\f35a'; color: #6e8af3 }
.line:not(.cursor-line) ahref$='/%3C':not(.icon)::after { content: '\f359'; color: #6e8af3 }
.line:not(.cursor-line) ahref$='/e':not(.icon)::after { content: '\f10c'; color: #F26419 }
--.icon
--.iconは選択させない
code:style.css
a.iconhref$="---",a.iconhref$="--",a.iconhref$="hr",a.iconhref$="**" {
pointer-events: none; cursor: default;
}
a.iconhref$="---"{
page-break-after: always;
}
ポップアップメニューをさっぱり
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.selections .popup-menu .button-container .button.link-button,
.selections .popup-menu .button-container .button.new-page-button,
.selections .popup-menu .button-container .button.copy-plain-button {
font-size: 0;
}
.popup-menu .button-container .button.copy-plain-button::after,
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: 900 100%/normal 'Font Awesome 5 Free';
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
.popup-menu .button-container .button.link-button::after {
font-size: 11px;
content: '\f0c1';
}
.popup-menu .button-container .button.copy-plain-button::after {
font-size: 11px;
content: '\f0c5';
}
/* ポップアップメニューのボタン周りの線を消す */
.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }
/scrasobox/ポップアップメニューをさっぱりさせてみる
PopupMenuを徹底的にアイコンにする - Scrapboxカスタマイズコレクション