settings

コードブロックの行番号を表示するUserCSS

code:style.css

@import '/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css';

画像に影をつける

code:style.css

.line img.image {

margin : 0 auto 0.7em;

border-radius: 0.35em;

filter: drop-shadow(0px 0px 5px rgba(160, 160, 160, 0.5));

top: 1em;

}

画像を非表示にする

code:style.css

/* 画像強調レベル1のとき非表示化 */

.level-1 img {

display: none !important;

}

/* 代わりの記号を表示 */

.level-1 .modal-image::before {

font-family: 'Font Awesome 5 Free', sans-serif;

color: gray;

font-size: 0.6em;

content: '\f03e_image';

}

ホーム画面の設定

ピンした頁を単独で上部に固定

code:style.css

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

grid-column-start: 1;

}

ピン

code:style.css

.app{padding-top: 55px;}

.grid li.page-list-item a .pin{display:none;}

.page-list .grid li.pin{margin-bottom: 2.5em;}

.page-list .grid li.pin:after{

content: "...";

letter-spacing: 1em;

text-indent: 1em;

font-size: 1em;

position: absolute;

left: 50%;

transform: translateX(-50%);

bottom: -1.3em;

}

.container .grid li.pin a .content{

flex-direction: column;

background: var(--card-content-bg);

}

.grid li.page-list-item a .header.pinned {background-color: var(--card-title-bg);}

.grid li.page-list-item a .header.pinned .title{color: var(--card-title-color-pinned);}

.container .grid li.pin a .description{color: var(--card-description-color-pinned);}

サムネのデザイン

code:style.css

.grid li.page-list-item a{

border-radius: 5px;

}

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

height: 100%;

flex-direction: column-reverse;

}

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

background-color: var(--card-title-bg);

padding: 8px 10px;

border-top: none;

}

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

position: relative;

padding: 0;

margin: auto;

}

.grid li.page-list-item a .icon img {

width: auto;

max-height: 90px;

max-width: 90%;

border-radius: 5px;

}

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

font-size: 0.9em;

text-align: center;

font-family: 'Zen Kaku Gothic New';

font-weight: 500;

letter-spacing: 0.05em;

text-indent: 0.05em;

}

ポップアップメニューのアイコン化

code:style.css

/* ポップアップメニューの修飾ボタンをアイコン化 */

.popup-menu .button-container .button.strong-button > strong,

.popup-menu .button-container .button.italic-button > i,

.popup-menu .button-container .button.strike-button > strike {

display: inline-block; width: 0; text-indent: -9999px }

.popup-menu .button-container .button.link-button::after,

.popup-menu .button-container .button.strong-button::after,

.popup-menu .button-container .button.italic-button::after,

.popup-menu .button-container .button.strike-button::after {

font: 900 100%/normal 'Font Awesome 5 Free';

display: inline-block; min-width: 16px; text-align: center }

.popup-menu .button-container .button.strong-button::after { content: '\f032' }

.popup-menu .button-container .button.italic-button::after { content: '\f033' }

.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }

/* ポップアップメニューのボタン周りの線を消す */

.selections .popup-menu .button-container .button:not(:first-of-type) { border: 0 }

のびのびドロップダウン(UserCSS)

code:style.css

.navbar-form .dropdown.open ul.dropdown-menu {

min-width: 100%;

max-height: calc(100vh - 130px) !important;

overflow-y: auto;

}

見出しのデザインを変える

色設定

code:style.css

@import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/color.css";

code:style.css

strong.level-2 /* .deco-\* */ {

padding-left: 11px;

margin-bottom: 3px;

}

画像を大きくできる

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

外部リンクを区別するUserCSS

code:style.css

/* 外部リンクにiconをつける */

font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands';

font-weight: 900;

font-size: 1.2rem;

content: ' \f35d';

display: inline-block;

}

箇条書きを控えめにする

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: 10px; bottom: 0 }

インデントの可視化

code:style.css

.indent-mark {

height: 100% !important;

}

.indent-mark .pad {

height: 100% !important;

overflow: unset !important;

}

.indent-mark span:nth-child(6n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

.indent-mark span:nth-child(6n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

.indent-mark span:nth-child(6n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

.indent-mark span:nth-child(6n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

.indent-mark span:nth-child(6n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

.indent-mark span:nth-child(6n+):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {

}

インデントのドットの色を変える

code:style.css

.line .indent-mark .dot {

margin-top: 4px;

}

.line .indent-mark .c-1 + .dot {

}

.line .indent-mark .c-2 + .dot {

}

.line .indent-mark .c-3 + .dot {

}

.line .indent-mark .c-4 + .dot {

}

見た目の変更その1

code:style.css

/* テロメアとページメニューを脇に寄せて本文を広く見せる */

@media screen and (min-width: 1200px) {

.line .telomere .telomere-border { left: calc((100% - 960px)/2 - 120px) }

.app:not(.presentation) .page-menu { text-align: right; width: calc(100% - 20px) } }

.app:not(.presentation) .page-menu { text-align: top; width: calc(100% - 40px) } }

/* テロメアの存在感を薄くする */

.line .telomere .telomere-border:not(:hover) { opacity: .4 }

.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }

/* 本文の最後にテキスト挿入 */

.app:not(.presentation) .page::after {

content: '本文はここで終わっている';

display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;

border: solid rgba(0,0,0,.2); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }

.app:not(.presentation) .page.not-persistent::after {

content: '本文は書かれていない' }

@media screen {

/* 本文のフォント設定: 文字サイズ */

.app:not(.presentation) .editor { font-size: 120% }

/* 本文のフォント設定: 文字詰め */

.line .text:not(.code-block) { font-feature-settings: "pkna" }

/* 本文のフォント設定: 行間 */

.app:not(.presentation) .line .text:not(.code-block) { line-height: 1.8 }

.line .indent-mark .dot { top: calc(100% - .2em) }

/* ページタイトルのフォント設定と罫線 */

.app:not(.presentation) .line.line-title .text {

font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;

border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem } }

/* カード型ページリンクの枠 */

.grid li.page-list-item a { border: 1px solid rgba(0,0,0,.14) }

.grid li.page-list-item a .header { border-top: unset }

特定のページの非表示化

code:style.css

/* settingを非表示 */

display: none !important;

}

/* 絵文字関連ページの非表示化 */

/* AE */

display: none !important;

}

/* Pr */

display: none !important;

}

/* Safari */

display: none !important;

}

/* Chrome */

display: none !important;

}

/* Firefox */

display: none !important;

}

/* HTML */

display: none !important;

}

/* CSS */

display: none !important;

}

display: none !important;

}

/* 仮 がタイトルについてるカード */

display: none !important;

}

サイドメニューのランダムボタンを消す

code:style.css

.random-jump-button {

display:none !important;

}

校正用のスタイル

code:style.css

.deco-\+ { color: blue }

.deco-\+.deco-- { color: lightgrey }

.deco-\+.deco--::before {

content: ' '; display: inline-block;

color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }

嘘リンク（文字の色をリンクと同じ色にする）

code:style.css

解説を控えめに挿入

code:style.css

.deco-\# { color: green; font-size: smaller; padding: 0 .2em }

薄い文字

code:style.css

code:style.css

.deco-\| {

display: inline-block ;

position: relative ;

}

.deco-\| a{

display: inline-flex ;

position: absolute ;

top: -1em ;

left: 0 ;

right: 0 ;

justify-content: space-around ;

font-size: 0.5em ;

}

.deco-\| a:link,

.deco-\| a:visited {

}

文中に引用を挿入

code:style.css

.deco-\" {

border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);

font-size:95%; font-style: italic }

.deco-\"::before {

content: '\f10d'; vertical-align: super }

マーカー

code:style.css

/* 二重括弧による強調をマーカーっぽくする */

チェックボックスになるタグ 2

code:style.css

/* チェックボックスになるタグ v2 Font Awesome版 */

display: inline-block; width: 0; text-indent: -9999px }

display: inline-block; min-width: 1.15em; padding-left: 1px;

font-family: 'Font Awesome 5 Free'; font-weight: 400;

font-size: 120%; text-align: center; vertical-align: middle }

画像を並べて表示 兼 ヘッダー画像風の表示

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(90%/2); height:80%; }

.line .level-3 .deco-\| > span { width: calc(100%/3); height:80%; }

.line .level-4 .deco-\| > span { width: calc(100%/4); height:80%; }

全体的なデザイン調整

code:style.css

/* ピン留めアイテムとそれ以外を分ける */

.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {

clear: left;

}

/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */

/*li.grid-style-item,

div.related-page-list ul.grid li.relation-label {

width: 154px;

height: 169px;

margin: 0 16.8px 16.8px 0;

}*/

/* ページタイトルのスタイル */

div.line-title .text {

font-size: 28px;

border-bottom: 2px solid var(--line-title-color);

padding-left: 0.25em;

padding-bottom: 9px !important;

margin-bottom: 21px;

}

/* コードブロックのタイトル行のスタイル */

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

display: inline-block;

font-size: 14px;

margin-left: 0.5px;

padding: 2px 4px;

color: var(--page-text-color);

background-color: var(--accent-color);

filter: brightness(90%);

border-right: var(--code-start-border);

border-bottom: var(--code-start-border);

}

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

color: var(--page-text-color);

}

タグのタグ化

code:style.css

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

padding: .5rem 1rem .5rem 0;

display: inline-block;

line-height: 1.3;

vertical-align: middle;

border-radius: 25px 0px 0px 25px;

margin-bottom: 0.6rem;

pading-right: 10px;

font-size: 0.9em;

}

content: '●';

color: white;

margin: 0.6em;

}

code:style.css

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

position: absolute;

width: 100%;

text-align: center;

}

code:style.css

.deco-\~:not(:hover) {

filter: blur(3px);

}

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

filter: none;

}

code:記法まとめ

強調

小見出し

見出し

マーカーを引いて強調

解説を挿入

ネタバレ防止記法

見出しっぽい太字テキスト

引用文が書ける

アンダーライン引ける

取り消し線引ける

挿入

挿入取り消し

引用文

薄い文字

中央揃え