ページタイトルに装飾
https://gyazo.com/68de22b16a8e46f37fde243255d975a7
参考
ページの更新日を表示するUserScript - nekobatoken
CSS疑似クラス 『::after と ::before』 を使いこなす！ / サイドスリー
CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選
【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）
ページタイトルに飾りを付ける。
斜めスライドインのアニメーションを追加した。
プレゼンモードのときは更新日時を表示しないようにした。
code:style.css
.line.line-title .text {
line-height: 25px;
position: relative;
color: #004614;
font-size: 24px;
font-weight: 600;
padding: 0em 0em 0.5em 1.6em;
border-bottom: solid 1px #5D8165;
animation: slide-skew 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slide-skew {
0% {
transform: translate(180px,30px);
opacity: 0;
}
100% {
transform: translate(0,0);
}
20%,100% {
opacity: 1;
}
}
.line.line-title .text ::before,
.line.line-title .text ::after {
position: absolute;
content: '';
border-radius: 100%
}
.line.line-title .text ::before {
top: -0.2em;
left: .1em;
z-index: 2;
width: 20px;
height: 20px;
background: rgba(202, 232, 226, .3);
}
.line.line-title .text ::after {
top: .35em;
left: .5em;
width: 15px;
height: 15px;
background: rgba(0, 164, 172, .7);
}
/* プレゼンモードのときは更新日時表示をしない */
.presentation .page-last-update {
display: none;
}
ページ上部に更新日時を書く。
code:script.js
function getHtml (dateString) {
return '<span class="page-last-update" style="position: absolute; font-size: 12px; top: 15px; right: 0px; color: #AAA; ">▶ ' + dateString + '</span>'
}
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(1).attr('title')
if ($('.page-last-update').length > 0) {
$('.page-last-update').text('▷ ' + dateString)
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime()
#UserCSS
UserCSS.icon
#UserScript 　
UserScript.icon
Spica - Scrapbox研究会