settings
code:style.css
@import '/api/code/noratetsu/_CSS_Title2/style.css';
@import '/api/code/noratetsu/_CSS_Deco/style.css';
@import '/api/code/noratetsu/_CSS_Grid/style.css';
@import '/api/code/noratetsu/_CSS_related-page-list_left/style.css';
@import '/api/code/noratetsu/_CSS_Code-block/style.css';
/*@import '/api/code/noratetsu/●背景をうっすら青海波柄にする/style.css';*/
code:style.css
display: block;
content: '※初心者の自分用メモのため内容には誤りを含む可能性があります。';
text-align: center;
font-size: 12px;
margin: 0;
padding: 0;
}
code:stylex.css
.quick-launch .flex-box .flex-item .right-box::after {
position: absolute;
display: block;
font-family: "UD デジタル 教科書体 NK-B";
color: rgb(195,32,2);
/* content: '現在CSSの修正作業中のため、タイミングによって表示の乱れが生じる可能性があります。'; */
content: '↑試しにうろちょろさせています。';
max-width: 70vw;
text-align: left;
left: var(--margin-side);
}
元のThemeはDefaultのLight
code:style.css
body{
}
.new-button {
background-color: var(--new-button-bg, #CCC); }
code:style.css
@media screen and (min-width: 1261px) {
:root {--margin-side: calc(50vw - 592px);}
}
@media screen and (min-width: 992px) and (max-width: 1260px) {
:root {--margin-side: 38px;}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
:root {--margin-side: 23px;}
}
@media screen and (max-width: 767px) {
:root {--margin-side: 8px;}
}
code:style.css
span.kamon.kamon-caret-down {
display: none;
}
.quick-launch .flex-box .flex-item .left-box {
position: fixed;
top: 0;
left: calc(var(--margin-side) + 48px); /* 変数は上記で設定したもの */
color: white;
z-index: 1000;
}
.quick-launch .project-home, .quick-launch .project-home .title {
}
.quick-launch .project-home .title {
max-width: 190px; /* プロジェクト名が長すぎる場合の応急処置 */
}
ナビゲーションバーのScrapboxアイコンサイズを小さくする
code:style.css
.brand-icon {
width: 25px;
height: 25px;
}
x
code:style.css
.stream-btn {
display: block !important;
}
.stream-btn .kamon:hover::after {
display: block;
position: absolute;
top: 44px;
content: '更新履歴';
font-size: 12px;
line-height: 16px;
width: 60px;
height: auto;
text-align: center;
}
x
ページに影をつける
code:style.css
.page {
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
ページタイトル
code:style.css
.line.line-title .text {
border-bottom: solid 3px #ddd ; padding-bottom: 0;
margin-bottom: 28px; /* 枠下 */
text-align: center; /* 中央寄せ */
}
code:stylex.css
.line .telomere:not(:hover) {
opacity: 0.3;
transition: opacity 2s;
}
.line .telomere:hover {
/*opacity: 0.4;*/
opacity: 1;
transition: opacity 1s;
}
.line .telomere .telomere-border {
}
.line .telomere .telomere-border.unread {
}
箇条書き調整
c-0
c-1
c-2
c-3
c-4
c-5
c-6
c-7
code:style.css
/* バレットを少し薄くする */
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
}
/* バレットの色をだんだん薄くする */
.line .indent-mark .c-0 + .dot {
background-color: rgba(0,0,0,.6)
}
.line .indent-mark .c-1 + .dot {
background-color: rgba(0,0,0,.5)
}
.line .indent-mark .c-2 + .dot {
background-color: rgba(0,0,0,.4)
}
.line .indent-mark .c-3 + .dot {
background-color: rgba(0,0,0,.3)
}
.line .indent-mark .c-4 + .dot {
background-color: rgba(0,0,0,.2)
}
.line .indent-mark .c-5 + .dot {
background-color: rgba(0,0,0,.1)
}
.line .indent-mark .c-6 + .dot {
background-color: rgba(0,0,0,.05)
}
.line .indent-mark .c-7 + .dot {
background-color: rgba(0,0,0,.05)
}
code:style.css
.line .indent-mark .dot:hover::before {
position: relative;
top: -11px;
right: 22px;
border-radius: 6px;
padding: 1px 3px;
font-size: 0.8em;
font-weight: 600;
background-color: blue;
}
.line .indent-mark .c-0 + .dot:hover::before {
content: '1';
}
.line .indent-mark .c-1 + .dot:hover::before {
content: '2';
}
.line .indent-mark .c-2 + .dot:hover::before {
content: '3';
}
.line .indent-mark .c-3 + .dot:hover::before {
content: '4';
}
.line .indent-mark .c-4 + .dot:hover::before {
content: '5';
}
.line .indent-mark .c-5 + .dot:hover::before {
content: '6';
}
.line .indent-mark .c-6 + .dot:hover::before {
content: '7';
}
.line .indent-mark .c-7 + .dot:hover::before {
content: '8';
}
※テーブルの上を空行にすること
table:test
あ い う え お
か き く け こ
さ し
共通部
code:style.css
.table-block .cell {
}
.table-block .cell:first-child {
}
.section-title + .line .table-block .cell {
}
.section-title + .line .table-block .cell {
font-weight: bolder;
text-align: center;
}
12色で一周する版
code:style.css
.table-block .cell:nth-child(12n){
background-color: hsla(0,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+1){
background-color: hsla(30,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+2){
background-color: hsla(60,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+3){
background-color: hsla(90,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+4){
background-color: hsla(120,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+5){
background-color: hsla(150,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+6){
background-color: hsla(180,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+7){
background-color: hsla(210,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+8){
background-color: hsla(240,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+9){
background-color: hsla(270,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+10){
background-color: hsla(300,100%,90%,0.4);
}
.table-block .cell:nth-child(12n+11){
background-color: hsla(330,100%,90%,0.4);
}
.section-title + .line .table-block .cell:nth-child(12n) {
background-color: hsla(0,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+1) {
background-color: hsla(30,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+2) {
background-color: hsla(60,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+3) {
background-color: hsla(90,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+4) {
background-color: hsla(120,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+5) {
background-color: hsla(150,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+6) {
background-color: hsla(180,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+7) {
background-color: hsla(210,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+8) {
background-color: hsla(240,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+9) {
background-color: hsla(270,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+10) {
background-color: hsla(300,100%,80%,0.6);
}
.section-title + .line .table-block .cell:nth-child(12n+11) {
background-color: hsla(330,100%,80%,0.6);
}
code:style.css
.indent.table-block-row {
overflow-x: auto;
}
引用の斜体を解除
code:style.css
.line .quote {
font-style: normal ;
}
code:style.css
.level-1 img { width: 16.7% }
.level-2 img { width: 33.3% }
.level-3 img { width: 50% }
.level-4 img { width: 66.7% }
.level-5 img { width: 83.3% }
.level-6 img { width: 100% }
画像に影をつける
code:style.css
.line .image, .line .strong-image {
filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.3));
}
code:style.css
.editor .line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after,
font-family: 'Font Awesome 5 Free';
content: ' \f360';
font-weight: 900;
font-size: 0.9rem;
padding-right: 0.5rem;
display: inline-block;
}
code:style.css
.line a.link:is(
)::before {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: -3px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 2px;
}
content: '';
}
content: '';
}
content: '';
}
content: '';
}
x
x
水平線アイコンをタップ不可に
/icons/水平線.icon
うっかりタップorクリックして無駄に飛ばないように
ついでに自分のアイコンもnora.icon
code:style.css
pointer-events: none;
}
アイコンの縦位置を調整
code:style.css
.line img.icon {
vertical-align: -8.5px; /* -9% */
}
2022/01/02修正
x
code:style.css
/* 行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 768px) {
.editor .lines { counter-reset: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.editor .line:not(.line-title) { counter-increment: line }
/* タイトルから数えるときは :not(.line-title) を消してね */
.app:not(.presentation) .editor .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 }
/* カーソル行の行番号を濃く表示する */
.editor .line:not(.line-title)::before { opacity: .5 }
.editor .line.cursor-line:not(.line-title)::before { opacity: 1; font-weight: bolder } }
code:style.css
.grid li ,.quick-launch .project-home .title {
font-family: "UD デジタル 教科書体 NK-B", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
.editor, .stream {
font-family: "UD デジタル 教科書体 NK-B", "MotoyaLMaru W3 mono", "Kosugi Maru", "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
}
冒頭でwebフォントインポート
code:style.css
/* 検索ワードを強調 */
.list li.page-list-item a .description strong {
background-color: yellow;
}
/* 検索結果にスクロールバーをつけたり */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description {
max-height: 70px;
margin: 10px 0;
overflow-y: auto;
border-style: solid hidden;
}
/* 検索結果を改行させる */
.page-list.clearfix > .list:not(.create-searched-page) li.page-list-item a .description span {
display: block;
}
code:style.css
.quick-launch .search-result-count small {
display: none;
}
code:style.css
::-webkit-scrollbar{
width: 10px;
}
::-webkit-scrollbar-track{
background: rgba(255, 255, 255,0.4);
border: none;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.2);
border-radius: 10px;
box-shadow: none;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.4);
}
関連リンクを左列へ+エディタ部分をスクロール
code:style.css
.page-list .grid li:is(
) {
display: none;
}