folita ドキュメント
エディタ

ブロック

ページに置ける 13 種類のブロックと、それぞれの設定項目。

「ブロック」タブの一覧の下の + ブロックを追加 を押すと種類の一覧が開き、選ぶとそのページに追加されます(一覧は追加すると閉じます)。追加したブロックはプレビュー上でドラッグして並び替えられます。 一覧のブロックを右クリック(スマホは長押し)すると、ページと同じく 複製・公開範囲・削除 のメニューが出ます。公開範囲は 全体公開 / 自分だけ / 非表示 で、「自分だけ」のブロックは folita にログインした自分にだけ表示され、ほかの人と MCP サーバー には出ません(編集フォームの 公開範囲 でも変えられます)。 どのブロックにも共通で 表示 / 非表示、グリッド配置 のときの 幅・高さ、スタイル があります。 ページ(タブ) を 2 つ以上作ると、置くページ も選べます。

リンク

一番よく使うボタン型のリンクです。

項目内容
タイトルボタンに表示する文字(200 文字まで)
URLhttps:// http:// mailto: tel: のいずれか
絵文字タイトルの左に出す絵文字(省略可)
新しいタブで開く既定はオン

リッチリンク(カード)

画像と説明文つきのカード型リンクです。作品や記事の紹介に向いています。

項目内容
タイトル / URLリンクと同じ
説明1000 文字まで
画像アップロードした画像、または画像の URL
新しいタブで開く既定はオン

テキスト

自由な文章(5000 文字まで)。改行はそのまま反映されます。左 / 中央 / 右揃えを選べます。

見出し

セクションの区切りに使う見出し(200 文字まで)。大きさをレベル 1〜3 から選び、左 / 中央 / 右揃えを指定できます。

画像

項目内容
画像アップロード(PNG / JPEG / WebP / GIF、2MB まで)または URL
リンク先指定すると画像全体がリンクになる(省略可)
代替テキスト画像の説明(省略可)
ラベル画像の左上に重ねて出す短い文字(60 文字まで。例: 「New Single」。省略可)
縦横比自動 / 正方形 / 16:9 / 横長

画像の横並び

複数の画像を 1 つのブロックにまとめ、横に並べます。

項目内容
並べ方横並び: 画像の枚数で列が決まります(2 枚で 2 連、3 枚で 3 連、4 枚で 4 連。5 枚以上は 4 列で折り返し)。スライド: 横にスクロールして 1 枚ずつ見せます
比率正方形(既定)/ 自動 / 16:9 / 横長。すべての画像に同じ比率を使います
画像1 ブロックに 10 枚まで。1 枚ずつアップロード(PNG / JPEG / WebP / GIF、2MB まで)するか URL を入れます。← → で順番を入れ替えられます
リンク先・代替テキスト画像ごとに指定できます(省略可)
画像の代わりに SNS アイコン画像を入れていない枠には、Instagram / X / TikTok / YouTube などのアイコンを正方形のタイルで出せます(SNS へのリンクを 4 つ並べるときなど)

カスタム CSS では .folita-gallery .folita-gallery--row .folita-gallery--slide .folita-gallery--cols-2〜.folita-gallery--cols-4 .folita-gallery__item .folita-gallery__img .folita-gallery__icon で変えられます。

SNS アイコン

横並びのアイコン列です。1 ブロックに 30 個まで置けます。対応しているサービス:

X (Twitter) / Instagram / YouTube / TikTok / GitHub / note / pixiv / Twitch / Discord / LINE / Threads / Bluesky / Spotify / Web サイト / メール

URL を入れるとサービスごとのアイコンで表示されます。「Web サイト」は任意の URL、「メール」は mailto: 形式で指定します。

タグ

「YouTube 個人」のように、ジャンル(大きめの太字)と カテゴリ を組み合わせた丸いラベルを並べます。活動しているサービスやジャンルを伝えるのに使います。

  • 候補から追加: ジャンル(Instagram / Twitter / TikTok / YouTube / 17LIVE / SHOWROOM / ツイキャス / Pinterest / 食べログ / Amebaブログ / YOUTRUST など 16 種類)を選び、カテゴリ(個人・音楽・ゲームなど)を押すと追加されます。もう一度押すと外れます
  • 自由に入力して追加: 候補に無いタグも入力できます。ジャンルは省略でき、カテゴリだけのタグにもできます
  • 揃え(左 / 中央 / 右)を選べます。1 ブロックに 30 個、ジャンル・カテゴリはそれぞれ 40 文字まで

色はテーマの「カード背景」「文字色」「補助文字色」に従います。カスタム CSS では .folita-tags .folita-tag .folita-tag__genre .folita-tag__label で変えられます。 lit.link から取り込む と、lit.link の活動ジャンルはこのタグになります。

表

「名前 / 誕生日 / 趣味」のように、見出しと内容を 2 列の表で並べます。

項目内容
見出し(任意)表の上に出す文字
行見出し(40 文字まで)と内容(500 文字まで。改行可)。1 ブロックに 30 行まで。↑ ↓ で並べ替え
リンク先(任意)行ごとに指定すると、内容がリンクになります

カスタム CSS では .folita-table .folita-table__title .folita-table__row(dt / dd)で変えられます。

相互リンク

相互リンクしている相手のサイトを、1 件 1 行で並べます。丸いアイコンの右に名前、その下に @X の ID(タイムラインの投稿者の表記と同じ形)。行の右端に相手のドメインと一言。リンクは 2 つに分かれていて、アイコン・名前・@ID は X のアカウント(ID を入れたときだけ)、青いドメインの文字が相手のサイトへ飛びます。

項目内容
見出し(任意)一覧の上に出す文字(既定は「相互リンク」)
リンク名前(80 文字まで)・X の ID(任意。@ は付けても付けなくても可)・URL・一言(200 文字まで)。1 ブロックに 50 件まで。↑ ↓ で並べ替え
アイコン(任意)アップロードした画像、または画像の URL。空のままなら相手のサイトのファビコン(<link rel="icon"> の大きいもの、無ければ /favicon.ico)を folita が取ってきて出します(7 日ごとに取り直し。取れなければ地球のマーク)
承認ポスト(任意)相互リンクを承認した X のポスト。URL(https://x.com/…/status/…)を貼ると ID(Snowflake)だけを保存します。控えのためのもので、公開ページには出ません(MCP の Markdown にはリンクとして出ます)
下の一言(任意)一覧の下に出す短い文(「相互リンク募集中です」など)。リンク先を入れると文がリンクになります(相互リンクの条件を書いたページなど)

埋め込み

動画や音楽のプレイヤーをページ内に表示します。通常の共有 URL を貼るだけで、埋め込み用の URL に変換されます。

サービス貼れる URL の例
YouTubehttps://www.youtube.com/watch?v=... https://youtu.be/...
Spotifyhttps://open.spotify.com/track/... .../album/... .../playlist/... .../artist/...
Apple Musichttps://music.apple.com/jp/album/...(アルバム)、.../album/...?i=...(曲)、.../playlist/...
Vimeohttps://vimeo.com/123456789
SoundCloudhttps://soundcloud.com/artist/track

YouTube はプライバシー強化モード(youtube-nocookie.com)で埋め込まれます。対応外の URL(Apple Music のアーティストのページなど)は表示されません。

タイトル を入れると、プレーヤーの下に表示します(省略可)。プレーヤーの高さはサービスと種類で決まります(Spotify の曲・エピソードは小さく、アーティスト・アルバム・プレイリストは大きく。Apple Music は曲だけ小さく)。

フィード

note・Bluesky・YouTube・X の新しい投稿を、ページに一覧で表示します。投稿するたびにページを直す必要はありません。

項目内容
取得元note / Bluesky / YouTube / X (Twitter)
アカウントつぶやき取得アカウント に登録したアカウントから選びます。X は「連携中の X アカウント」も選べます
表示する件数3 件 / 5 件 / 10 件
見出しブロックの上に出す文字(省略すると取得元の名前)
取得元表示される投稿
note記事のタイトル・冒頭・サムネイル
Bluesky本人の投稿と添付画像 4 枚まで(返信・リポストは除く)
YouTube新しい動画のタイトルとサムネイル
Xそのアカウントのポストと添付画像 4 枚まで(動画・GIF はプレビュー画像。返信・リポストは除く)
  • 選べるアカウントがないときは、連携 › つぶやき取得アカウント で先に追加してください(YouTube は、Google で YouTube を許可していれば 自分のチャンネルを使う で入れられます)
  • 投稿は folita が一定時間ごとに取り直します(note・Bluesky 15 分、YouTube 30 分)。X だけは公開ページからは取り直さず、あなたがエディタを開いたときに 1 時間に 1 回まで取り直します
  • 取得に失敗したときは、前回取得できた投稿をそのまま表示します。一度も取得できていないブロックは公開ページに出ません(理由はエディタのプレビューに表示されます)
  • 同じアカウントの投稿を、いいね数や翻訳つきでもっと詳しく並べたいときは タイムライン ブロックを使います
  • X・Bluesky の投稿は、本文の #ハッシュタグ をアクセント色で表示し、画像を本文の下に並べます(1 枚なら切り抜かずに全体、2 枚以上は 2 列)。X の短縮 URL(t.co)は元の URL にして表示します
  • 各投稿と「もっと見る」は、それぞれのサービスのページを新しいタブで開きます。クリックは アナリティクス にこのブロックのクリックとして記録されます

X の投稿は、ほかの人のアカウントを表示するときも、連携している X アカウントのトークンで X の API から読み取ります。X を連携していないと表示できません。 非公開アカウントの投稿は表示できません。また、X 側の利用枠の都合で取得できないことがあります。

タイムライン

タイムライン で集めた X・Bluesky・Threads・note・YouTube の投稿や pixiv の作品を並べます。 スレッド・引用カード・画像・GIF・投票・いいね数・翻訳(DeepL)まで、元のサービスに近い形で表示します。

項目内容
見出しブロックの上に出す文字(任意)
出す取得元X / Bluesky / Threads / note / YouTube / pixiv から選ぶ。何も選ばなければすべて
並べ方一覧(つぶやき)/ ギャラリー(画像の作品。pixiv 向け)
件数最初に出す件数(5〜200)。続きを読み込む単位でもあります
下まで来たら続きを自動で読み込む(無限表示)オンにすると一覧の終わりが近づいたときに続きを自動で読み込みます。オフのときは「もっと見る」ボタンで読み込みます
いいね・リポスト・返信・表示回数を出すオフにすると数を出しません
取得元の切り替えタブ / アカウントの絞り込み一覧の上に「すべて / X / Bluesky …」のタブと、X・Bluesky のアカウントのチップを出します
「今すぐ同期」ボタン公開ページで、ログインしている本人にだけ出します
日本語以外の投稿に訳を付けるオフにすると訳を出しません(翻訳の提供そのものは 設定 › 便利機能 で決めます)
訳の言語の既定DeepL の言語コード(JA EN-US ZH など)。閲覧者は表示設定で変えられます
既定で出す投稿の種類投稿 / 返信 / リポスト / 引用。閲覧者は表示設定で変えられます
  • 公開範囲(鍵アカウントを自分にだけ見せるなど)は タイムライン設定 に従います
  • 各投稿の「で開く」は元のサービスのページを新しいタブで開き、アナリティクス にこのブロックのクリックとして記録されます
  • JavaScript が使えない閲覧環境では、新しい投稿 10 件を本文とリンクだけの一覧で表示します

カスタム CSS では .folita-timeline と .tl-*(.tl-entry .tl-post .tl-text .tl-quote .tl-media .tl-metrics .tl-tr など)で変えられます。

区切り

ブロックの間に細い線を引きます。設定項目はありません。

ブロックのスタイル

どのブロックでも、個別に次を指定できます。テーマ全体の設定は デザイン を見てください。

項目内容
背景色ブロックの背景
文字色ブロックの文字
角丸0〜999px
クラス名カスタム CSS から参照するためのクラス(英数字・- _ など)

より細かく変えたいときは、各ブロックに付く data-block-id 属性をカスタム CSS のセレクタに使えます。

このページの内容