settings

フォント

フォントをNoto sans に

code:style.css

html, body,

.grid li {

font-family: 'Noto Sans JP', sans-serif;

}

画像の外周に影をつける

code:style.css

.deco-\| img{

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

}

https://gyazo.com/22f87457ab0bcb71e5931f7abef1920f

参考

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

}

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

強調の時、マーカーを引く。

code:style.css

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

}

あああ

code:script.js

document.querySelector('.app')

.insertAdjacentHTML('beforeend', '<div id="presentation-progress" style="display:none"></div>')

document.querySelector('.app')

.insertAdjacentHTML('beforeend', `<style media="screen">

display: block !important;

z-index: 100; position: fixed; bottom: 0; left: 0; width: 100vw;

text-align: center; line-height: 1;

font-size: x-small; /* 📝バーの高さを変えたいときはフォントサイズを変えてね */

--complete: 0;

background: linear-gradient(to right,

var(--bar-color) var(--complete), var(--bar-bgcolor) var(--complete), var(--bar-bgcolor))

}

</style>`);

(() => {

const updateProgress = () => {

const sections = Array.from(document.querySelectorAll('.section-title'))

const currentPos = sections.findIndex(e => {

return window.getComputedStyle(e, null).getPropertyValue('display') != 'none'

}) + 1

const complete = currentPos / sections.length * 100

const progressBarElem = document.getElementById('presentation-progress')

progressBarElem.style.setProperty('--complete', complete + '%')

}

const appObserver = new MutationObserver(mutations => {

mutations.forEach(mutation => {

const addedStyles = Array.from(mutation.addedNodes).filter(node => node.tagName == 'STYLE')

if (addedStyles.length) {

// プレゼンモード開始？

// STYLEタグも MutationObserver で監視したかったけど無理ぽいのでキーイベント拾います

window.addEventListener('keydown', updateProgress)

updateProgress()

}

const removedStyles = Array.from(mutation.removedNodes).filter(node => node.tagName == 'STYLE')

if (removedStyles.length) {

// プレゼンモード終了？

window.removeEventListener('keydown', updateProgress)

}

})

})

appObserver.observe(document.querySelector('.app'), { childList: true })

})()

画像の表示サイズを［** ］で設定できるようにする

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

/* サムネ画像をフィットさせる */

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

position: relative;

}

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

padding: 10px 12px 2ppagex;

}

/* 最小表示 */

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

height: 40px;

}

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

display: table-cell;

width: auto;

margin-bottom: 5px;

max-height: 100px;

max-width: 88%;

vertical-align: middle;

border-radius: 5px;

position: absolute;

top: calc(25% + 45px);

left: 50%;

transform: translateX(-50%) translateY(-50%);

}

夏用CSS適用時のデザイン調整

code:style.css

/* サムネ上部の帯を白色にする */

}

ページ内の画像を小さくする

code:style.css

span.deco strong.level-1 span.modal-image a img.image{

height: 5em;

/*display:none;*/

}

画像を選択してpopupのmenuからStrongを選ぶと良い

サムネイルとして使いたい画像を記事内に貼ってるときなどに使う

通常

https://gyazo.com/22f87457ab0bcb71e5931f7abef1920f

小さくすると

https://gyazo.com/22f87457ab0bcb71e5931f7abef1920f

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

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

/* YouTube等の動画プレイヤーを固定幅にする */

.video-player,.iframe-video-player {

max-width: 400px; /* 400px幅にする（好みの数字に変更可） */

margin-right: auto; /* 左寄せにする */

}

https://www.youtube.com/watch?v=_ITy_QEvHvM&t=1261s