クラスと CSS 変数
公開ページの HTML に付くクラス名・属性と、テーマの CSS 変数の一覧。カスタム CSS のセレクタに使います。
使い方と例は カスタム CSS を見てください。ここに載せた名前はバージョンアップでも変えません。
ページの構造
<body class="folita-page">
<div class="folita-cover">…</div> <!-- カバー画像（設定時のみ） -->
<main class="folita-container">
<header class="folita-header">
<img class="folita-avatar"> <!-- 画像が無いときは .folita-avatar--initial -->
<h1 class="folita-name">…</h1>
<p class="folita-bio">…</p>
</header>
<div class="folita-blocks"> <!-- グリッド配置では .folita-blocks--grid も付く -->
<div class="folita-block folita-block-link" data-block-id="…">
<a class="folita-link folita-btn">…</a>
</div>
…
</div>
<footer class="folita-footer">…</footer>
</main>
</body>クラス
| クラス | 要素 |
|---|---|
.folita-page | ページ全体（<body>）。CSS 変数はここに定義されている |
.folita-theme-material .folita-theme-liquidglass | 使っている テーマ（.folita-page に付く）。リキッドグラスでは .folita-lg-headercard（プロフィールのカード）.folita-lg-lens（下バーのレンズ）も付く |
.folita-has-nav .folita-nav-bottom .folita-nav-top | ページが 2 つ以上でナビを出しているとき（.folita-page に付く） |
.folita-avatar-wrap / .folita-status / .folita-avatar-cake | アイコンの枠 / ひとことステータスの吹き出し / 誕生日当日のケーキ（左下に隣接） |
.folita-panels / .folita-panel | ページ（タブ）の並び / ページ 1 つ（data-page にページの #。表示中は .is-active） |
.folita-nav / .folita-nav__item | ナビ（.folita-nav--bottom 下バー / .folita-nav--top 上のタブ）/ 項目（選択中は .is-active、リンクは .folita-nav__item--link）。.folita-nav__label は名前、.folita-nav__lens は下バーのレンズ |
.folita-handle | 名前の下の @ID。Windows のテーマだけ表示（ほかのテーマでは display: none。カスタム CSS で出せる） |
.folita-chrome | ナビが下バーのときの骨組み（.folita-page に付く）。広い画面（769px 以上）では左メニュー .folita-sidebar（アカウント欄 .folita-brand + ページの一覧 .folita-nav--side + .folita-sidebar__foot）と本文の上の見出し .folita-topbar__title、狭い画面では上のバー .folita-topbar（名前とアイコン）と下バー |
.folita-menu | アカウント欄のアイコンを押すと右から出る設定の面（マテリアル / リキッドグラス）。.folita-menu__sheet（面）.folita-menu__account（アカウントのカード）.folita-menu__group .folita-menu__item（項目）。閉じている間は hidden |
.folita-panel--account | Windows でアカウント欄を押すと開くアカウントのパネル（#account。.folita-acct-card .folita-acct-expander など） |
.folita-cover | カバー画像。あるときは .folita-container--cover も付く |
.folita-container | 本体（最大幅を持つ中央の列） |
.folita-header | アイコン・名前・自己紹介のまとまり |
.folita-avatar | アイコン。形は .folita-avatar--circle --rounded --square、画像が無いときは .folita-avatar--initial |
.folita-name / .folita-bio / .folita-birthday | 表示名 / 自己紹介 / 誕生日（.folita-birthday__icon、.folita-birthday__text、.folita-birthday__badge、誕生日の当日は .is-today） |
.folita-blocks | ブロックの並び。グリッド配置では .folita-blocks--grid |
.folita-block | 各ブロックの外枠。種類ごとに .folita-block-link -richlink -text -heading -image -social -embed -divider |
.folita-block--hidden | 非表示にしたブロック（エディタのプレビューでのみ出る） |
.folita-col-1 .folita-col-2 / .folita-row-1 .folita-row-2 | グリッド配置での幅 / 高さ |
.folita-link .folita-btn | リンクのボタン。スタイルは .folita-btn--solid --outline --soft --shadow --glass |
.folita-richlink | リッチリンク（カード） |
.folita-text / .folita-heading | テキスト / 見出し。見出しは .folita-heading--1 --2 --3 |
.folita-align-left -center -right | テキスト・見出しの揃え |
.folita-image / .folita-image-link | 画像 / リンク付き画像。縦横比は .folita-aspect-square -video -wide |
.folita-social / .folita-social-icon | SNS アイコンの列 / アイコン 1 つ |
.folita-embed | 埋め込み。種類ごとに .folita-embed--video（YouTube / Vimeo）--spotify --soundcloud |
.folita-feed / .folita-feed__item | フィード / 投稿 1 件。取得元ごとに .folita-feed--note --bluesky --youtube --x |
.folita-feed__text / .folita-feed__tag | 投稿の本文 / 本文中のハッシュタグ |
.folita-feed__images / .folita-feed__img | X・Bluesky の添付画像の並び（1 枚なら .folita-feed__images--single）/ note・YouTube の横のサムネイル |
.folita-table / .folita-table__row | 表 / 行（dt 見出し・dd 内容）。.folita-table__title は表の見出し |
.folita-timeline | タイムライン。並べ方ごとに .folita-timeline--list --grid |
.tl-entry / .tl-thread / .tl-post | 投稿のカード / スレッドのカード / 投稿 1 件（返信は .tl-reply） |
.tl-name .tl-handle .tl-open .tl-text | 投稿者の名前 / @ID / 「で開く」/ 本文（.tl-hashtag .tl-mention） |
.tl-media .tl-poll .tl-place .tl-quote | 添付メディア / 投票 / 位置情報 / 引用カード（返信先は .tl-parent）。センシティブ設定のメディアは .tl-media.is-sensitive に .tl-sensitive（タップするまでのマスク）が重なる |
.tl-metrics .tl-metric .tl-time | いいね・リポスト・返信・表示回数の行 / 数 1 つ / 日時 |
.tl-tr .tl-tr-toggle | 翻訳バー / 「翻訳を表示・原文を表示」 |
.tl-tabs .tl-tab / .tl-accounts .tl-chip | 取得元のタブ / アカウントのチップ |
.tl-grid .tl-work | ギャラリー / 作品 1 つ |
.folita-divider | 区切り線 |
.folita-footer | ページ下部の folita 表記（左メニューが出るときは左メニューの © の上。.folita-footer--side） |
属性
| 属性 | 内容 |
|---|---|
data-block-id="<UUID>" | 各ブロックの外枠。ID はエディタでブロックを選択したときに表示され、プロフィール JSON の id と同じ |
| ブロックの設定の クラス名 | そのブロックの外枠に追加される |
CSS 変数
.folita-page に定義されています。値は デザイン の設定から作られます。
| 変数 | 内容 | 既定値（クリーン） |
|---|---|---|
--f-bg | 背景（色またはグラデーション） | #f7f7f5 |
--f-text | 文字色 | #171717 |
--f-muted | 補助の文字色 | #737373 |
--f-accent | アクセント色 | #111111 |
--f-btn | ボタンの色 | #111111 |
--f-btn-text | ボタンの文字色 | #ffffff |
--f-btn-radius | ボタンの角丸 | 14px |
--f-card | カードの背景 | rgba(255,255,255,0.85) |
--f-max | 本体の最大幅 | 560px |
--f-avatar | アイコンの大きさ | 96px |
--f-font | フォント | Noto Sans JP |
--f-surface | メニュー・モーダルの下地（文字色から自動で白か黒） | #ffffff |
--f-border | 区切り線（補助の文字色を薄めた色） | — |
--t-* | テーマ固有の設定（リキッドグラスは --t-orb1〜--t-orb4 --t-tint --t-blur --t-refraction など） | — |
--tl-link | タイムラインのハッシュタグ・翻訳の切り替え・投票の色（.folita-timeline に定義。既定はアクセント色） | var(--f-accent) |
取り除かれる CSS
カスタム CSS は保存時に次を取り除きます。それ以外の CSS はそのまま出力されます。
<style><script>などのタグ@importexpression()javascript:で始まる URL