[{"data":1,"prerenderedAt":318},["ShallowReactive",2],{"help-\u002Fhelp\u002Fen\u002Fappearance":3},{"article":4,"counterpart":173},{"id":5,"title":6,"body":7,"description":164,"extension":165,"meta":166,"navigation":167,"order":168,"path":169,"seo":170,"stem":171,"__hash__":172},"help\u002Fhelp\u002Fen\u002Fappearance.md","Customize your page's appearance",{"type":8,"value":9,"toc":149},"minimark",[10,14,18,23,26,30,33,37,40,44,47,53,57,60,83,88,93,104,108,111,115,118,126,130,137,140],[11,12,6],"h1",{"id":13},"customize-your-pages-appearance",[15,16,17],"p",{},"With thamit, you can style your page to match your vibe.\nOpen the appearance settings in the editor (the theme\u002Ffont drawer) and adjust everything on the spot, without leaving your work.",[19,20,22],"h2",{"id":21},"color-themes-presets","Color themes (presets)",[15,24,25],{},"Choose from a set of ready-made color presets.\nEach preset switches the base tones and accent color together, so it's the quickest way to change your page's impression.",[19,27,29],{"id":28},"light-dark","Light \u002F Dark",[15,31,32],{},"You can fix your page's brightness to \"Light\" or \"Dark\".\nVisitors to your public page can also switch between the two with a toggle on the page.",[19,34,36],{"id":35},"corner-radius","Corner radius",[15,38,39],{},"Choose how rounded your blocks and buttons look: \"Sharp\", \"Soft\", or \"Round\".\nCorner radius is a setting independent from the color presets, so changing the preset won't change your corners.",[19,41,43],{"id":42},"block-entrance-animations","Block entrance animations",[15,45,46],{},"You can set an animation that plays once as each block scrolls into view on your public page.\nChoose from \"Fade up\", \"Fade\", \"Zoom\", or \"Glitch\" (the default is \"None\").",[48,49,50],"blockquote",{},[15,51,52],{},"For visitors who have \"Reduce motion\" enabled on their device, the animation is skipped and blocks are shown from the start.",[19,54,56],{"id":55},"custom-backgrounds","Custom backgrounds",[15,58,59],{},"Instead of the preset background, you can set your own.",[61,62,63,71,77],"ul",{},[64,65,66,70],"li",{},[67,68,69],"strong",{},"Solid color"," … Use any color (#rrggbb) as your page's background. Text colors are adjusted automatically for readability.",[64,72,73,76],{},[67,74,75],{},"Image"," … Use an uploaded image as the background. For readability, it's shown with a dark overlay (scrim) and white text.",[64,78,79,82],{},[67,80,81],{},"Video"," … Use a short looping video as the background — think of it as a live wallpaper.",[48,84,85],{},[15,86,87],{},"When a custom background is set, the page's look is fixed to a single version and the light\u002Fdark toggle no longer applies.",[89,90,92],"h3",{"id":91},"video-background-tips","Video background tips",[61,94,95,98,101],{},[64,96,97],{},"MP4 or WebM, up to 4MB per file on the free plan. A small file around 10 seconds at 720p works best.",[64,99,100],{},"No audio is played.",[64,102,103],{},"Visitors with \"Reduce motion\" or data-saver enabled on their device see a still image of the first frame instead of the video.",[19,105,107],{"id":106},"fonts","Fonts",[15,109,110],{},"Choose the body font from \"Gothic\" (sans-serif), \"Rounded gothic\", \"Mincho\" (serif), \"Pop\", or \"Handwritten\".\nTry a typeface that matches your page's mood.",[19,112,114],{"id":113},"avatar-frames","Avatar frames",[15,116,117],{},"You can add a decorative frame around your avatar image.",[61,119,120,123],{},[64,121,122],{},"Frame styles: \"None\", \"Thin ring\", \"Bold ring\", \"Double ring\", or \"Glow\".",[64,124,125],{},"The frame color can follow your accent color, or be any color you pick.",[19,127,129],{"id":128},"preview-color-scheme","Preview color scheme",[15,131,132,133,136],{},"The \"Preview color scheme\" option in the appearance settings switches whether the preview and the blocks you are editing are shown in light or dark.\n",[67,134,135],{},"It does not change your public page's initial color scheme."," The initial scheme is determined by which row (light\u002Fdark) you pick when choosing a preset.",[138,139],"hr",{},[15,141,142,143,148],{},"You can check your styling in the preview tab.\nFor editor basics, see ",[144,145,147],"a",{"href":146},"\u002Fhelp\u002Fen\u002Feditor-basics","Editor basics",".",{"title":150,"searchDepth":151,"depth":151,"links":152},"",2,[153,154,155,156,157,161,162,163],{"id":21,"depth":151,"text":22},{"id":28,"depth":151,"text":29},{"id":35,"depth":151,"text":36},{"id":42,"depth":151,"text":43},{"id":55,"depth":151,"text":56,"children":158},[159],{"id":91,"depth":160,"text":92},3,{"id":106,"depth":151,"text":107},{"id":113,"depth":151,"text":114},{"id":128,"depth":151,"text":129},"How to style your page — color theme presets, light\u002Fdark, backgrounds, fonts, avatar frames, and more.","md",{},true,7,"\u002Fhelp\u002Fen\u002Fappearance",{"title":6,"description":164},"help\u002Fen\u002Fappearance","RiIzXY0eqZS8OIwv9oofQ5AQBEFE_XUH8afR-8s9JkA",{"id":174,"title":175,"body":176,"description":312,"extension":165,"meta":313,"navigation":167,"order":168,"path":314,"seo":315,"stem":316,"__hash__":317},"help\u002Fhelp\u002Fappearance.md","ページの見た目を変える",{"type":8,"value":177,"toc":300},[178,180,183,187,190,194,197,200,203,206,209,214,217,220,240,245,248,259,262,265,269,272,280,283,290,292],[11,179,175],{"id":175},[15,181,182],{},"thamitでは、ページの雰囲気を自分好みに変えられます。\nエディターの外観設定(テーマ\u002Fフォントのドロワー)から、編集を止めずにその場で調整できます。",[19,184,186],{"id":185},"配色テーマプリセット","配色テーマ(プリセット)",[15,188,189],{},"あらかじめ用意された配色プリセットから選べます。\nベースの色合いやアクセントカラーがまとめて切り替わるので、いちばん手軽に印象を変えられます。",[19,191,193],{"id":192},"ライト-ダーク","ライト \u002F ダーク",[15,195,196],{},"ページの明るさを「ライト」または「ダーク」で固定できます。\n公開ページの閲覧者は、ページ上のトグルで好きな方に切り替えて見ることもできます。",[19,198,199],{"id":199},"角丸",[15,201,202],{},"パーツやボタンの角の丸さを「シャープ」「ソフト」「ラウンド」から選べます。\n角丸はプリセット(色合い)から独立した設定なので、プリセットを変えても角丸は変わりません。",[19,204,205],{"id":205},"パーツの出現アニメーション",[15,207,208],{},"公開ページをスクロールして各パーツが画面に入ったとき、一度だけ再生されるアニメーションを設定できます。\n「フェードアップ」「フェード」「ズーム」「グリッチ」から選べます(初期値は「なし」)。",[48,210,211],{},[15,212,213],{},"端末で「視差効果を減らす」(モーションの軽減)を設定している閲覧者には再生されず、パーツは最初から表示されます。",[19,215,216],{"id":216},"カスタム背景",[15,218,219],{},"プリセットの背景の代わりに、自分で背景を指定できます。",[61,221,222,228,234],{},[64,223,224,227],{},[67,225,226],{},"単色"," … 好きな色(#rrggbb)をページ全体の背景にできます。文字色は読みやすいように自動で調整されます。",[64,229,230,233],{},[67,231,232],{},"画像"," … アップロードした画像を背景にできます。読みやすさのために、暗めの覆い(スクリム)と白文字で表示されます。",[64,235,236,239],{},[67,237,238],{},"動画"," … 短いループ動画を背景にできます(ライブ壁紙のようなイメージです)。",[48,241,242],{},[15,243,244],{},"カスタム背景を設定すると、見た目は1つに固定され、ライト\u002Fダークの切り替えは効かなくなります。",[89,246,247],{"id":247},"動画背景のポイント",[61,249,250,253,256],{},[64,251,252],{},"MP4 または WebM 形式で、無料プランでは1ファイル4MBまでです。10秒前後・720p程度の小さいファイルがおすすめです。",[64,254,255],{},"音は再生されません。",[64,257,258],{},"端末で「視差効果を減らす」(モーションの軽減)や省データモードを設定している閲覧者には、動画の代わりに先頭フレームの静止画が表示されます。",[19,260,261],{"id":261},"フォント",[15,263,264],{},"本文のフォントを「ゴシック」「丸ゴシック」「明朝」「ポップ」「手書き」から選べます。\nページの雰囲気に合わせて書体を変えてみてください。",[19,266,268],{"id":267},"アバターの枠フレーム","アバターの枠(フレーム)",[15,270,271],{},"アバター画像のまわりに飾り枠を付けられます。",[61,273,274,277],{},[64,275,276],{},"枠の種類は「なし」「細いリング」「太いリング」「二重リング」「グロー」から選べます。",[64,278,279],{},"枠の色は、アクセントカラーに合わせるか、好きな色を指定できます。",[19,281,282],{"id":282},"プレビューの配色",[15,284,285,286,289],{},"外観設定の「プレビューの配色」は、プレビューと編集中のパーツをライト\u002Fダークどちらの配色で表示するかの切替です。\n",[67,287,288],{},"公開ページ自体の初期配色は変わりません","。初期配色は、プリセット選択のライト\u002Fダークの段で決まります。",[138,291],{},[15,293,294,295,299],{},"設定した見た目は、プレビュータブで確認できます。\n基本操作は ",[144,296,298],{"href":297},"\u002Fhelp\u002Feditor-basics","エディターの基本"," を参照してください。",{"title":150,"searchDepth":151,"depth":151,"links":301},[302,303,304,305,306,309,310,311],{"id":185,"depth":151,"text":186},{"id":192,"depth":151,"text":193},{"id":199,"depth":151,"text":199},{"id":205,"depth":151,"text":205},{"id":216,"depth":151,"text":216,"children":307},[308],{"id":247,"depth":160,"text":247},{"id":261,"depth":151,"text":261},{"id":267,"depth":151,"text":268},{"id":282,"depth":151,"text":282},"配色テーマ・ライト\u002Fダーク・背景・フォント・アバターの枠など、ページの外観を整える方法を紹介します。",{},"\u002Fhelp\u002Fappearance",{"title":175,"description":312},"help\u002Fappearance","7shfB6x_NTKweEnzYIQFWsjz2Nz6f_hL6ehx5BPhd4c",1786008345067]