settings
特定のハッシュタグの後ろに、画像を表示させる。
https://twitter.com/mtane0412/status/1523698163374333953より
code:style.css
@media only screen and (min-width: 480px){
atype="hashtag"href="/rashitamemo/%E7%A0%94%E7%A9%B6%E3%83%8E%E3%83%BC%E3%83%88"::after{
/* #研究ノート*/
content:"";
background-image:url("https://i.gyazo.com/416e4c4db40564eb92ec299bef5a74d1.png");
background-size:204px 256px;
display:block;
width:204px;
height:256px;
position:fixed;
right:30px;
bottom:50px;
z-index:20;
}}
/madobes/settingsより
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
/* 画像を使うパターン content: url("https://i.gyazo.com/adcc9b85d97df1115d702bcc854077eb.png"); */
content:'2021年7月23日新刊『すべてはノートからはじまる あなたの人生をひらく記録術』!\A' URL(https://i.gyazo.com/822604329a5a86a0e3b7e59b8159b440.jpg);
white-space:pre-wrap;
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid #0003; border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
/scrasobox/画像を並べて表示より
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line class^="level" .deco-\| { flex-wrap: wrap }
.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) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% }
/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }
.line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em }
バレットを少し薄めに
code:style.css
.line .indent-mark .dot {
top: 12px;
width: 6px;
height: 4px;
background-color: #c9c9c9;
}
code:style.css
.deco-\+ { color: green }
.deco-\- { color: grey;opacity: 0.37; }
/scrasobox/拡張記法がきた!
Amazonアフィリエイトで作成したリンクを特別表示する
code:style.css
a[href*="https://amzn"]::after {
content: "→Amazon"; /* "amazon" の前にスペースを追加して、リンクテキストとの間隔を空ける */
}
日ごとノートなどのカードの背景色を変更するUserCSS
code:style.css
.grid li.page-list-item > ahref^="/rashitamemo/2025" {
background-color: #fff8dc;
background-color: #f4e0c4;
background-color:aliceblue
}
.grid li.page-list-itemdata-page-links*='研究ノート'>a{
background-color: #e7f4ed;
}
/* 🔬→テーマ、🚀→プロジェクト */
.grid li.page-list-item > ahref^="/rashitamemo/%F0%9F%94%AC", .grid li.page-list-item > ahref^="/rashitamemo/%F0%9F%9A%80" {
background-color: #e7f4ed;
}
.grid li.page-list-item > ahref^="/rashitamemo/%F0%9F%97%82" {
background-color: #ffe9e9;
}
.grid li.page-list-item > ahref^="/rashitamemo/%E3%80%8E" {
/* background-color: #eeffe4;*/
}
.grid li.page-list-item > ahref^="/rashitamemo/%E2%86%93%" {
background-color: #ffe9e9;
}
.grid li.page-list-item > ahref^="/rashitamemo/%E5%80%89%E4%B8%8B%E5%BF%A0%E6%86%B2%E3" {
background-color: #faffe9;
}