settings

https://gyazo.com/d37bd9dbe52687d3d99656db058ac3ad

インポート

code:style.css

//@import "../ダークモードUserCSS/style.css";

箇条書きを控えめ

hoge

fuga

code:style.css

/* 箇条書きを控えめにする */

.app .line .indent-mark .dot {

height: .2em; width: .4em; border-radius: 25%;

background-color: rgba(173,173,173,.55) }

.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }

吹き出し

code:style.css

/* フキダシになるタグ ※アイコン記法は除く */

display: inline-block; position: relative; vertical-align: text-top;

padding: 3px 4px 1px 5px; margin-left: 10px;

border-radius: 4px; border-bottom-left-radius: 0 }

display: block; /* reduce the damage in FF3.0 */

position: absolute; bottom: 0; left: -7px;

width: 0; content: "";

/* フキダシ記法版 */

.line:not(.cursor-line) .deco-\{ {

display: inline-block; position: relative; max-width: calc(100% - 4em);

padding: 3px 4px 2px 5px; margin-left: .6em;

border-radius: .4em; border-bottom-left-radius: 0 }

.line:not(.cursor-line) .deco-\{::after {

display: block; /* reduce the damage in FF3.0 */

position: absolute; bottom: 0; left: -0.45em;

width: 0; content: '';

border-width: 0 0 .5em .5em; border-style: solid; border-color: rgba(107, 177, 148, 0.85) transparent }

/icons/hr.icon

Theme

一人で使うのでテロメアは消す

code:style.css

.telomere {

display: none;

}

コードブロックを見やすく

code:style.css

/* code blockの頭を静かな色にする */

.line span.code-block .code-block-start {

padding: 2px 5px 2px 5px !important;

}

マーカー・太字

code:style.css

font-size: 100%;

padding: 0 0px;

margin: 0 0px;

width: auto;

}

.line strong{

font-size: 100%;

}

span.quote {

padding: 10px;

width: 100%;

display: block;

}

関連リンクのラベル

code:style.css

.grid li.relation-label.links .arrow {

}

.grid li.relation-label.links a {

border-radius: 7px;

}

.grid li.relation-label.links a .title {

}

.grid li.relation-label a {

border-radius: 7px;

}

グリッド

code:style.css

.grid li.page-list-item {

margin-bottom: 0.7em ;

font-family: "Avenir Next", Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;

}

.grid li.page-list-item a .title {

text-align: center;

}

.grid li.page-list-item a,

.grid.grid-md li.page-list-item a,

.grid.grid-lg li.page-list-item a {

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

border-radius: 7px ;

}

.grid li.page-list-item a:hover,

.grid.grid-md li.page-list-item a:hover,

.grid.grid-lg li.page-list-item a:hover {

box-shadow: 7px 7px 15px rgba(0,0,0,0.02);

}

.grid li.page-list-item a::before,

.grid li.page-list-item a::after {

display: block ;

content: '' ;

position: absolute ;

width: 13em ;

}

.grid li.page-list-item a .header {

border-top: 0 ;

}

＃で始まるタグをラベル風にする

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);

}

}

引用

this is 引用テキスト

わいわい

こんにちは

code:style.css

.line .quote {

font-style: normal;

font-size: 100%;

padding-left: 15px;

}

code:style.css

.line img.image{

display: block;

margin: 0 auto;

}

code:style.css

.line .section-0{

line-height: 1.2em !important;

}

code:style.css

.level-1{

}

code:style.css

.line strong.level-2{

display: block;

position: relative;

padding-left: 16px;

}

.line strong.level-2:before{

content: '';

position: absolute;

width: 5px;

height: 100%;

top: 0;

left: 0;

}

code:style.css

.line strong.level-3{

display: block;

position: relative;

font-size: 200%;

line-height: 160%;

text-align: center;

margin: 12px auto 18px;

font-weight: 100;

}

.line strong.level-3:after{

position: absolute;

content: '';

width: 100px;

top: 0;

bottom: -0.5em;

left: 0;

right: 0;

margin: 0 auto;

}

アイコンをテキストの高さに合わせる

code:style.css

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

.page-list-item.pin + .page-list-item:not(.pin) {

clear: both;

}

画像を横並びにできる

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) }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */