settings

いろいろ試してみるテスト

code:style.css

文章を囲む

code:style.css

.deco-\, {

font-size: 100%;

font-weight: bold;

padding: 2em 1em;

margin: 2em 0;

background: green;

}

code:style.css

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

code:style.css

/* インデントレベルごとに行頭文字を切り替えるスタイル指定*/

/* メニューのHide Dotと連動する */

/* この例では、第５レベルまでの行頭文字を指定。第６レベルからはドットに戻る */

/* すべてのビュレット文字に共通の設定 */

.line .indent-mark .dot:before {

display: block;

position: absolute;

right: -5px;

top: -10px;

}

/* 第１レベルのインデント（c-0）の設定 */

/* ドットはバックグラウンドカラーなので透明にする */

/* セレクタとして

.line .indent-mark .dot { ... }

を使うとインデントレベルごとに

background-color: transparent;

を指定する必要はないが、指定のないレベルのドットが消える

*/

/* .line .indent-mark .c-0 + .dot {

background-color: transparent;

} */

/* このレベルの行頭文字を表示 */

/* .line .indent-mark .c-0 + .dot:before {

content:"◎";

} */

/* 以下同様　*/

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

background-color: transparent;

}

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

content:"●"; /* ★ → ● */

}

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

background-color: transparent;

}

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

content:"○"; /* ○ → ▶ */

}

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

background-color: transparent;

}

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

content:"■";

}

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

background-color: transparent;

}

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

content:"□";

}

画像サイズの調整

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: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行は不要 */

栞記法のCSS

code:style.css

/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */

@media screen {

.app:not(.presentation) .line .deco-\.::after {

position: absolute; top: 3px; left: -1.4em;

content: '\f02e'; font: 900 1.7rem/1 'Font Awesome 5 Free'; color: yellowgreen } }

@media screen and (max-width: 990px) {

.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }

/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */

button#Bookmarks.tool-btn:hover { text-decoration: none }

button#Bookmarks.tool-btn::before {

position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }

button#Bookmarks.tool-btn img { opacity: 0 }

表のカスタマイズ

code:style.css

/* セル間に線を入れる */

.table-block .cell {

/* 全てのセルの右と下 */

}

.table-block .cell:first-child {

/* 1列目のセルの左 */

}

.section-title + .line .table-block .cell {

/* 1行目のセルの上 */

}

/* 1行目を太字、中央揃え */

.section-title + .line .table-block .cell {

font-weight: bolder;

text-align: center;

}

文字装飾記法

code:style.css

.deco-\! { /* 重要な部分は!を付ける */

font-weight: bold; /* タイトルなので太い文字にする */

font-size: 2.5rem; /* タイトルなので最初から大きな文字（2.5倍）にする */

}

小見出し

code:style.css

.line strong.level-5{

font-size: 100%;

margin-top: 36px;

margin-bottom: 36px;

padding-bottom: 2px;

padding-left: 0px;

}

背景色を変更

code:style.css

body {

}

全ての画像をフルサイズで表示する

code:style.css

.line img.image {

max-height: none !important;

max-width: 95% !important;

}

字間と行間を少し空ける

code:style.css

.line {

line-height: 1.7em !important;

letter-spacing: 0.1em !important;

}

code:style.css

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

display: inline-block; position: absolute; top: -0.6em; right: -6vw;

max-width: 40%; padding: .3rem 1rem;

transform: rotate(-0.8deg); box-shadow: 4px 1px 3px rgba(0,0,0,.2) }

.presentation .line .deco-\~ { position: static; max-width: 100% }

@media screen and (max-width: 768px) { .line:not(.cursor-line) .deco-\~ { position: static; max-width: 100% } }

@media print { .line:not(.cursor-line) .deco-\~ {

/* 太字記法との組み合わせでスタイルを変える場合 */

/* 付箋記法内で打消し線記法と下線記法を併用する場合 */

.line .deco-\~.deco-- { text-decoration: line-through }

.line .deco-\~.deco-_ { text-decoration: underline }

code:style.css

text-decoration: none;

}

code:style.css

.grid li.page-list-item a .pin { background-color: transparent; background-image: none }

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

diplay: inline-block; transform: rotate(35deg) }

code:style.css

a#Pinned.tool-btn:hover { text-decoration: none }

a#Pinned.tool-btn::before { position: absolute; content: '\f08d'; font: 900 22px/46px 'Font Awesome 5 Free' }

a#Pinned.tool-btn img { opacity: 0 }

行内の画像を左寄せにする

code:style.css

.line .text, .stream .line { clear: both; overflow: hidden }

.line img.image { float: left; margin-right: .5em }

code:style.css

.line strong {

}

見出しのデザイン変更

code:style.css

.line strong.level-2{

font-size: 125%;

margin-top: 36px;

margin-bottom: 36px;

padding-left: 10px;

}

カーソル点滅CSS

code:style.css

.cursor {

animation: blink 1s infinite;

}

@keyframes blink {

0% { opacity: 0; }

50% { opacity: 0; }

51% { opacity: 1; }

100% { opacity: 1;}

}

code:style.css

display: inline-block;

padding: 2px 8px;

margin: 0 8px 24px /*10px*/ 0;

font-size: 0.8em;

/* font-size: 0.3em; */

border-radius: 3px;

transition: .3s;

-webkit-transform: scale(1);

transform: scale(1);

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

タイトル行の文字サイズ

code:style.css

@media print {

.line-title {

font-size:10px !important;

}

}

@page {

size: A4; /* A4サイズ固定 */

margin: 10mm; /* 上下左右に10ミリのマージンを取る */

}

@media print {

body {

width: 190mm; /* needed for Chrome BODY要素の幅を明示的に指定、ただしマージン分を差し引くこと */

}

}