settings
ピン留めした位置の弾を変える
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
これでながら動いたから
このタイトルのページにCSS を書くと各ページに反映されるらしい。
ピン留めの位置変更CSSが適当されなくなってるけどなんで??
他のプロジェクトで使う方法
code:style.css
"" で囲えばいいのか
linesの幅を変えたいなって思ったけどどうしたらいいんだ。。
code:style.css
/*フォントを変更する→やっぱなし
.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のみ:見た目を変える */
align-self: flex-end;
border: black double .5px;
color: black;
background: white;
margin: .2em;
padding: .2em;
border-radius: .2px;
}
background: darkgray;
border-style: dotted;
}
code:style.css
/* +の書式用(FF11オススメっぽい色) */
.deco-\+ {
padding: 0.1em 0.2em 0.1em 0.2em;
}
.deco-\% {
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.3em;
margin: auto 0.3em;
vertical-align: top;
}
/* !の書式用 */
.deco-\! {
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* +の書式用(FF11オススメっぽい色) */
.deco-\+ {
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* カーソルのある行の背景色と下線をつける */
.cursor {
width: 3px;
background-color: rgba(20,230,0,.6)
}
.cursor-line {
background-color: rgba(0, 100, 100, 0.10);
}
.cursor-line2 {
background-color: rgba(0, 100, 100, 0.10);
box-shadow: 3px 3px red, -1em;
}
.navbar-brand::before {
content: '';
width: 40px;
height: 40px;
position: absolute;
background-size: cover;
border-radius: 4px;/*角丸はお好みで*/
}
/* クイズの答え用 */
.deco-\> {
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* クイズの問題用 */
.deco-\< {
font-weight: bold; /* 太字 */
padding: 0.1em 0.2em 0.1em 0.2em;
border: 2px solid #ffffff; /* 白色の境界線(枠線) */ border-radius: 5px; /* 枠の角を丸くする */
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5); /* 影を追加 */
}
カーソルのコードはこちらよりひとまず持ってきています!ありがたや。
%を指定
+で修飾するとオススメっぽくなるCSS書いた
HTMLスキルが0.1上がった!