/*アイコンをお花の形に切り抜き*/ .chromatic-ignore.xEFF2.x2pHm.xraw1 { aspect-ratio: 1; --g:/23.606% 23.606% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat; mask: 100% 50% var(--g),90.451% 79.389% var(--g),65.451% 97.553% var(--g),34.549% 97.553% var(--g),9.549% 79.389% var(--g),0% 50% var(--g),9.549% 20.611% var(--g),34.549% 2.447% var(--g),65.451% 2.447% var(--g),90.451% 20.611% var(--g),radial-gradient(100% 100%,#000 36.327%,#0000 calc(36.327% + 1px)); } Copy 参考：https://coliss.com/articles/build-websites/operation/css/css-shape.html

/* フォロ限だけフキダシ表示 */ article:has(i.ti-lock).x5yeR, div:has(i.ti-lock).xD2mX.xCFgx { div.xDn7E, div.x3COt { position: relative; padding: 20px; background: var(--shadow); border-radius: 1rem; } div.xDn7E::before, div.x3COt::before { content: ""; position: absolute; left: -10px; width: 10px; height: 50px; background-color: var(--shadow); clip-path: polygon(0 10px, 20px 0, 20px 20px); } div.xDn7E::before { top: 20px; } div.x3COt::before { top: 10px; } } Copy

/* 引用RNを装飾する */ div.xChvz, div.xqQzL { background: var(--panel); border-radius: 0.25rem; position: relative; border: solid 1px var(--accent) !important; margin: 10px auto; padding: 1.5rem !important; filter: drop-shadow(5px 5px 0px var(--accentedBg)); overflow: visible; } div.xChvz:before, div.xChvz:after, div.xqQzL:before, div.xqQzL:after { font-family: "tabler-icons-outline"; font-size: 1.5rem; color: var(--accent); position: absolute; text-shadow: 1px 1px 0 var(--panel), -1px -1px 0 var(--panel), -1px 1px 0 var(--panel), 1px -1px 0 var(--panel), 0px 1px 0 var(--panel), 0-1px 0 var(--panel), -1px 0 0 var(--panel), 1px 0 0 var(--panel); } div.xChvz:before, div.xqQzL:before { content: "\efbe"; top: -1rem; left: 0.25rem; transform: scale(-1, -1) } div.xChvz:after, div.xqQzL:after { content: "\efbe"; bottom: -1rem; right: 0.25rem; } Copy

/* 背景をドット柄にする */ div.xFdHz { background-image: radial-gradient(#fff 20%, transparent 20%), radial-gradient(#fff 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; } Copy

/* ホームアイコンをお城にする */ /* ※@importはカスタムCSS入力フォームの一番上に持って行ってください */ @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"); i.ti.ti-home { position: relative; } i.ti.ti-home::before { visibility: hidden; } i.ti.ti-home::after { font-family: 'Material Symbols Outlined' !important; font-size: 1.25em; content: "\eab1"; /* サーカスのテント → \ea68 アイスクリーム → \ea69 その他 → https://fonts.google.com/icons */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } Copy

/* アイコンの周りに★を飛ばす */ .x5yeR { ._noSelect { position: relative; } ._noSelect::before, ._noSelect::after { content: "★"; line-height: 1; color: transparent; z-index: 10; display: block; position: absolute; background-image: linear-gradient(135deg, #fc00ff, #00dbde); -webkit-background-clip: text; } ._noSelect::before { top: 5px; left: -5px; font-size: 1.5em; animation: twinkle 1.8s infinite; } ._noSelect::after { bottom: 0px; right: 0px; font-size: 1em; animation: twinkle 2.0s infinite; } } @keyframes twinkle { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 85% { opacity: 0.9; transform: scale(1) rotate(360deg); } 100% { opacity: 0.5; transform: scale(0.7) rotate(361deg); } } Copy

/* 画像が表示された時にキラっとさせる */ div.xnU59.xesxE.image { display:inline-block; position:relative; overflow:hidden; } div.xnU59.xesxE.image:after { content:""; height:100%; width:30px; position:absolute; top:-180px; left:0; background-color: #fff; opacity:0; -webkit-transform: rotate(45deg); -webkit-animation: reflection 2s ease-in-out; } @keyframes reflection { 0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; } 80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; } 100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; } } Copy