テーマのERBスプラッシュテンプレートを直接編集することはできず、スプラッシュはコアCSS/JSより前に読み込まれるため、カスタマイズは困難です。\n\nテーマの通常のCSS/SCSSタブに記述したCSSはコンパイルされ、スプラッシュローダーが表示された後にのみ読み込まれます。そのため、CSSがそこで機能しても、ロード時に元のドットが短時間表示されます。\n\nとはいえ、テーマの**head_tag**にインラインCSSを挿入することで、スプラッシュアニメーションをオーバーライドできます。これにより、スタイルがすぐに適用され、デフォルトのドットのちらつきが回避されます。\n\n\n以下は、デフォルトのドットアニメーションをCodepenにあるようなPulserエフェクトに置き換える例です。\n\nhtml\n<style>\n :root {\n --pulser-color-1: #ffcc00;\n --pulser-color-2: #ff6347;\n }\n #d-splash .dots {\n all: unset;\n position: absolute;\n width: 1.6em;\n height: 1.6em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n #d-splash .dots[style*=\"--n:-2\"] { transform: translate(-300%, -50%); }\n #d-splash .dots[style*=\"--n:-1\"] { transform: translate(-150%, -50%); }\n #d-splash .dots[style*=\"--n:0\"] { transform: translate(0%, -50%); }\n #d-splash .dots[style*=\"--n:1\"] { transform: translate(150%, -50%); }\n #d-splash .dots[style*=\"--n:2\"] { transform: translate(300%, -50%); }\n #d-splash .dots::before,\n #d-splash .dots::after {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n border: 2px solid var(--pulser-color-1);\n top: 0;\n left: 0;\n opacity: 0;\n animation: pulse 1s ease-out infinite;\n }\n #d-splash .dots::before {\n border-color: var(--pulser-color-2);\n animation-delay: 0.3s;\n }\n @keyframes pulse {\n 0% {\n transform: scale(0.5);\n opacity: 0.6;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.3;\n }\n 100% {\n transform: scale(1.8);\n opacity: 0;\n }\n }\n</style>\n\n注意：ブラウザは<style>タグ内でSCSSを解析できません。そのため、SCSSをインラインで記述することはできません。SCSSの代わりにCSSを使用する必要があります。\n\n結果：\n\n
\n\n\n新しいテーマコンポーネントを作成し、コードの編集をクリックし、Headタグに入力して上記の<style>ブロックを貼り付けます。\n\n保存してサイトをハードリロードで更新すると、更新されたパルスアニメーションがスプラッシュで即座に表示されます。\n\nこれは、Discourseが計画中のv2アップデートでよりカスタマイズ可能なスプラッシュスクリーンを実装するまでの、巧妙な回避策です。
「いいね！」 5