settings
ピン留めした位置の弾を変える
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
これでながら動いたから
このタイトルのページにCSS を書くと各ページに反映されるらしい。
/help-jp/UserCSS
ピン留めの位置変更CSSが適当されなくなってるけどなんで??
他のプロジェクトで使う方法
code:style.css
@import "https://scrapbox.io/api/code/cybernote/settings/style.css"
"" で囲えばいいのか
linesの幅を変えたいなって思ったけどどうしたらいいんだ。。
code:style.css
/*フォントを変更する→やっぱなし
@import url('https://fonts.googleapis.com/css?family=Sawarabi+Gothic');
.editor, .stream {
font-family: 'Sawarabi Gothic', sans-serif;
}
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
code:style.css
/* ピン止めの段落を変える? */
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
grid-column-start: 1;
}
code:style.css
/* 一覧の幅を広くする */
.container {
max-width: none !important;
}
code:style.css
/* 箇条書きの形を変える */
.line .indent-mark .dot {
height: .2em;
width: .4em;
border-radius: 25%;
background-color: rgba(3, 2, 13, .55)
}
.app:not(.presentation) .line .indent-mark .dot {
top: auto;
bottom: 0
}
code:style.css
.pin{
box-shadow: 3px 3px red, -1em;
}
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::after {
font-family:'Font Awesome 5 Free';
content: ' \f08e';
display: inline-block;
}
code:style.css
/* hashtagのみ:見た目を変える */
atype="hashtag" {
align-self: flex-end;
border: black double .5px;
color: black;
background: white;
margin: .2em;
padding: .2em;
border-radius: .2px;
}
atype="hashtag" page-link:hover {
color: #000000;
background: darkgray;
border-style: dotted;
}
code:style.css
/* +の書式用(FF11オススメっぽい色) */
.deco-\+ {
color: #f1f6b8; /* edf2bc黄色文字f1f6b8 */
padding: 0.1em 0.2em 0.1em 0.2em;
background-image: repeating-linear-gradient(#221F4E, #1D1C46 10px, #221F4E 10px, #1D1C46 20px);
}
.deco-\% {
background-color: #b2bcba;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.3em;
margin: auto 0.3em;
vertical-align: top;
}
/* !の書式用 */
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* +の書式用(FF11オススメっぽい色) */
.deco-\+ {
color: #f1f6b8; /* edf2bc黄色文字f1f6b8 */
padding: 0.1em 0.2em 0.1em 0.2em;
background-image: repeating-linear-gradient(#221F4E, #1D1C46 10px, #221F4E 10px, #1D1C46 20px);
}
/* カーソルのある行の背景色と下線をつける */
.cursor {
width: 3px;
background-color: rgba(20,230,0,.6)
}
.cursor-line {
background-color: rgba(0, 100, 100, 0.10);
border-bottom: solid 1px #f00000;
}
.cursor-line2 {
background-color: rgba(0, 100, 100, 0.10);
border-bottom: solid 2px #f00000;
box-shadow: 3px 3px red, -1em;
}
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-image:"https://i.gyazo.com/536fd83505ca9944132855891f21e942.png";
background-size: cover;
border-radius: 4px;/*角丸はお好みで*/
}
/* クイズの答え用 */
.deco-\> {
color: #ffffff; /* 白色文字 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* クイズの問題用 */
.deco-\< {
color: #ffffff; /* 白色文字 */
font-weight: bold; /* 太字 */
padding: 0.1em 0.2em 0.1em 0.2em;
background-color: #000000; /* 黒色の背景 */
border: 2px solid #ffffff; /* 白色の境界線(枠線) */
border-radius: 5px; /* 枠の角を丸くする */
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* 影を追加 */
}
カーソルのコードはこちらよりひとまず持ってきています!ありがたや。
/jiro4989/settings
background-color: #242051; /* あお背景 */
%を指定
+で修飾するとオススメっぽくなるCSS書いた
HTMLスキルが0.1上がった!
#設定ファイル