settings
リスト
ページの種類に応じてホーム画面でラベルをつける
code:style.css
content: "reaper";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "UTAU";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "UTAU";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "プラグイン";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "辞書";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "辞書";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "曲";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "音作り";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "音作り";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
content: "音作り";
position: absolute;
bottom: 0;
right: 0;
padding: 2px 4px 1px;
}
}
ピンを上部に固定
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
scrapboxアイコンをDTM鯖に
やっぱり変なので戻しますkofu.icon
code:style.css_disabled
a.navbar-brand.dropdown-toggle {
position: relative;
}
a.navbar-brand.dropdown-toggle::before {
content: "";
width: 30px;
height: 30px;
display: block;
position: absolute;
top: 1px;
left: -2px;
background-size: contain;
background-repeat: no-repeat;
}
のびのびドロップダウン
いつものnia9865.icon
code:style.css
.navbar-form .dropdown.open ul.dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
引用
code:style.css
.line .quote {
font-style: normal ;
padding-left: 0 ;
}
.line .quote .c-0 {
visibility: hidden ;
}
.line .quote .c-0 + a:last-child {
float: right ;
margin-right: 1em ;
}
画面上部にタイトル置くやつ
Scrapboxの仕様が変わってアホ使えんくなってるので修正
ひとまず自分のところで使ってるものを流用しますが、多分不都合あると思うので随時修正してくださいnia9865.icon
以前のような見た目に出来るっぽかったのでしました。
自箱で使っていたものも残しておくので、嫌だったら変えてくださいnia9865.icon
元に戻ったので無効化しますkofu.icon
navbarが画面幅いっぱいに表示されるようになったのを元に戻すUserCSS
code:style_disabled.css
.navbar .row {
max-width: 1200px;
margin-right: auto;
margin-left: auto;
}
scrapboxのトップページへのリンクをnav barに固定するUserCSS
code:style_disabled.css
@media screen {
.quick-launch .project-home {
position: fixed;
top: -2px;
left: 60px;
z-index: 1000;
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home {
left: 75px;
}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home {
left: 90px;
}
}
@media screen and (min-width: 1261px) {
.quick-launch .project-home {
/* left: calc((100% - 1280px)/2 + 80px); */
/* left: calc((100% - 1280px)/2 + 100px); */
left: calc((100% - 1280px)/2 + 120px);
}
}
.quick-launch .project-home {
--tool-text-color: white;
}
サムネイル画像の幅を揃える
code:style.css
.grid li.page-list-item a .icon img {
position: absolute;
bottom: 0px;
left: 0px;
height: 60% !important;
object-fit: cover;
}
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1);
transform: scale(1);
}
文字色
code:style.css
水平線
code:style.css
.deco-\' {
display: block !important;
border-bottom: 1px solid #c0c0c0 !important; }
小見出し
code:style.css
.deco-\| {
padding-left: 11px;
margin-bottom: 3px;
}
大見出し記法
code:style.css
.deco-\~ {
display: block;
border-bottom-style: solid;
border-bottom-width:2px;
border-bottom-color: var(--level-3-border);
padding: 1px 0 1px 0.5em;
font-size: 1.7em !important;
margin-top: 0.1em;
margin-bottom: 0.1em;
}
右揃え]
中央揃え画像下キャプション
code:style.css
.deco-\> {
position: absolute;
right: 0;
}
.deco-\+ {
display: block;
text-align: center;
}
.deco-\& {
display: block;
text-align: center;
font-size: smaller;
line-height: 1;
opacity: 0.8;
}
kofu.icon
カーソル行ハイライト
code:style.css
/* カーソルのある行の背景色と下線を薄いグレーにする */
.cursor-line {
background-color: rgba(0, 0, 0, .02);
box-shadow: inset 0 -5px 5px -5px rgba(0, 0, 0, .3);
}
Presentation View
code:style.css
}
.presentation {
}
.presentation .text.code-block {
}
.presentation .code-block-start {
}
.app.presentation .line.section-title {
font-size: 60px;
font-weight: normal;
font-family: '游ゴシック','Yu Gothic',san-serif;
text-align: left;
line-height: 180%;
background-color: rgb(255, 255, 255);
}
.app.presentation .line {
font-size: 40px;
font-weight: normal;
font-family: '游ゴシック','Yu Gothic',san-serif;
text-align: left;
line-height: 180%;
background-color: rgb(255, 255, 255);
}
.app.presentation .line .indent-mark .dot {
height: 1px; width: .2em; top: 40px; bottom: 10px;
background-color: rgba(0,0,0,1);
}
リストからsettingsを消す
リストに載ったままだったので、勝手に変えました。まずかったら直してください。nia9865.icon
"ピンを上部に固定"と干渉するっぽいのでsettingsをピン→visibility: hidden;方式にしましたkofu.icon
code:style.css
/* settingを非表示 */
visibility: hidden;
}
外部リンクにiconをつける
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
特定リンクにアイコンをつける
code:style.css
:is(.line, .line .deco) a.link:is(
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f1c1';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f167';
font-weight:400;
margin-right:1px;
}
:is(.line, .line .deco) a.link:is(
)::before{
font-family:'Font Awesome 5 Free', 'Font Awesome 5 Brands';
content:'\f266';
font-weight:400;
margin-right:3px;
}
.line .deco-\. a.link:is(
)span.char-index{
display:inline-block;
width:0;
text-indent:-9999px;
}
.line .deco-\. a.link:is(
)span.char-index:nth-of-type(30) ~ span.char-index{
display:inherit;
width:inherit;
text-indent:inherit;
}
リスト
ちゃんと行の真ん中に来ていなかったので微調整しました。
なにか不具合があれば直してください。nia9865.icon
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: 1px; width: 4px; border-radius: 25%;
display: block;
position: absolute;
right: 7px;
top: 13px;
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.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 } 二重括弧による強調をマーカーっぽくする
code:style.css
.line strong:not(class) { background: linear-gradient(transparent 75%, rgba(255, 255, 102, 0.7) 25%);
}
画像の角を丸くして陰をつける
code:style.css
.line img.image {
margin : 0 auto 0.7em;
border-radius: 0.35em;
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.5));
top: 1em;
}
校正用のスタイル
code:style.css
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: ' '; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
編集したらその行の色変わる横に出るやつをズラして本文を見やすくする
気に入らない方いたら消してくださいnia9865.icon
code:style.css
/* テロメアとページメニューを脇に寄せて本文を広く見せる */
@media screen and (min-width: 1200px) {
.line .telomere .telomere-border { left: calc((100% - 960px)/2 - 120px) }
.app:not(.presentation) .page-menu { text-align: right; width: calc(100% - 20px) } }
/* テロメアの存在感を薄くする */
.line .telomere .telomere-border:not(:hover) { opacity: .4 }
.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }
アイコンを円形
code:style.css
.icon {
border-radius: 50%;
}
;){kind=link}