settings
https://gyazo.com/0ce08c0bfabfbcec44255163baeec9c2
行間を調整する
code:style.css
/* 行間調整 */
.line .section-0{
line-height: 1.4em !important;
}
＃で始まるタグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
display: inline-block;
padding: 0px 10px;
margin: 0 8px 10px 0;
font-size: 80%;
border-radius: 18px;
transition: .1s;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.line.number-list .indent-mark {
display: none;
}
［* ］<-これに蛍光のラインを足す
code:style.css
.level-1{
background: linear-gradient(transparent 60%, rgb(105, 251, 170) 60%);
}
code:style.css
.grid li.page-list-item a {
border-radius: 6px;
box-shadow: 0 1px 0 rgba(0,0,0,0.13);
}
.grid li.page-list-item a .title {
font-weight: bold;
}
/* ナビゲーションバーの色 */
.navbar-default {
}
body {
}
.page {
box-shadow: 0 4px 0 rgba(0,0,0,0.16);
border-radius: 6px;
}
code:style.css
element.style {
border-width: 0px 0px 0px 8px;
}
.line .meta {
}
.line .meta.unread {
}
.grid li.page-list-item:hover
{
border-radius: 5px;
transition: box-shadow .1s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.grid li.page-list-item:active {
transition: box-shadow .3s;
transition-delay: .3s;
}
.grid li.page-list-item a .hover {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(116, 206, 133, 0.31);
transition: background-color .5s;
}
.grid li.page-list-item a:active .hover{
background-color: rgba(242, 126, 72,0);}
関連ページのアレ
code:style.css
.grid li.relation-label a {
background-color: rgba(0, 0, 0, 0.07);
}
.grid li.page-list-item a .pin {
画像サイズ
使い方 : [** [画像URL]]
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }
code:style.css
/* 行内の画像を左寄せにする */
.line .text { clear: both; overflow: hidden }
.line img.image { float: left; margin-right: .5em }
吹き出し本体
css selectorでは、{等の記号は\でエスケープする必要がある
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
左吹き出しの角
kinari321.icon これ
code:style.css
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
}
右吹き出しの角
これkinari321.icon
code:style.css
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
}
強調吹き出しの角
kinari321.iconこれ
code:style.css
.deco-\!:before, .deco-\!:after {
}
吹き出し内のリンク色の調整
code:style.css
.deco-\{ a,
.deco-\} a {
}
画像の表示サイズを［** ］で設定できるようにする
[*** [画像のURL]]
という記法で画像の表示サイズを変えられるようにするUserCSSです。 記法の*の数とyy
cssの.level-xxのxxの部分
が対応しています。
code:style.css
.level-1 img { width: 16.7%; max-height: none; }
.level-2 img { width: 33.3%; max-height: none; }
.level-3 img { width: 50%; max-height: none; }
.level-4 img { width: 66.7%; max-height: none; }
.level-5 img { width: 83.3%; max-height: none; }
.level-6 img { width: 100%; max-height: none; }