folita ドキュメント
エディタ

配置とページ(タブ)

ブロックの並べ方(縦並び / グリッド)と、ページ(タブ)・下バーのナビの作り方。

配置はプレビュー上部の切り替え、または「デザイン」タブの 配置 で変更します。

縦並び

すべてのブロックが 1 列に、上から順に並びます。もっとも読みやすく、スマートフォンでも同じ見た目になります。

グリッド(Bento 風)

2 列のグリッドにブロックを敷き詰めます。ブロックごとに 幅 と 高さ を決められます。

設定選択肢
幅半分(1 列)/ 全幅(2 列)
高さ1 行 / 2 行
  • 「半分」のブロックを 2 つ続けると横に並びます
  • 「2 行」にすると、隣の 2 つのブロックと同じ高さになります(画像やリッチリンクを大きく見せたいときに)
  • 幅が狭い画面(スマートフォン)では自動的に 1 列になります

並び替え

どちらの配置でも、プレビュー上のブロックをドラッグして順番を変えられます。スマートフォンではブロックをロングタップしてからドラッグします。 「ブロック」タブの一覧でも同じ順番で並んでいます。

全幅に置く

ホームは、左にプロフィールのカード、右にブロック、その下に全幅のブロックという 2 列の配置です。ブロックの設定の「全幅に置く」で、そのブロックを右の列に置くか下に全幅で置くかを選べます。何も指定しなければ表だけが全幅で、ほかは右の列です(例: 相互リンクを全幅にして、小さな表を右の列に)。

ページ(タブ)とナビ

ブロックを複数のページ(タブ)に分けて置き、下バー や 上のタブ で切り替えられます。 ナビにはページのほか、外部サイトへのリンクも並べられます(あわせて 8 個まで)。設定は「デザイン」タブの ページとナビ です。

設定内容
ナビの位置下バー(画面の下のバー。あわせて上のバーと、広い画面では左メニューが出ます。下の「下バーの骨組み」)/ 上のタブ(プロフィールの下)/ 出さない(最初のページだけ)
プロフィールの見出し全ページに出す / 最初のページだけ
アイコンの下に名前を出すオフにするとアイコンだけ
項目ページ: 名前・アイコン・URL の #(半角英数字)。リンク: 名前・アイコン・リンク先・新しいタブで開くか
  • ページは「+ ページを追加」、リンクは「+ リンクを追加」で足し、← → で並べ替えます。「ブロック」タブのページの一覧でも、ブロックと同じく ⋮⋮ をドラッグして並べ替えられます
  • 「ブロック」タブのページの一覧を右クリック(スマホは長押し)すると、名前を変更(その場で入力。Enter で決定)・アイコンを変更(Windows のエクスプローラーと同じ色付きのアイコンから選びます)・複製・公開範囲・削除ができます。ホームのページは外せません
  • ページを外すと、そのページのブロックはホームに移ります
  • 「ブロック」タブのページの一覧で、編集するページを選びます。ブロックを追加すると、選んでいるページに入ります(ブロックの 置くページ でも移せます)
  • プレビューのナビを押しても切り替わります。ブロックをほかのページの一覧へドラッグしても移せます
  • 公開ページでは folita.me/@ID#ページの# で、そのページを直接開けます。ブラウザーの戻る / 進むにも対応しています
  • ページが 1 つだけのときは、ナビは出ません

下バーの骨組み

ナビの位置を 下バー にすると、アプリのような骨組みになります(テーマごとの見た目は デザイン のとおり)。

画面の幅出るもの
狭い(スマホ)上のバー(名前とアイコン)と下バー
広い(769px 以上)左メニュー(アイコンと名前・ページの一覧・© とfolita の表記)と、本文の上にページの見出し。下バーは出ず、本体は左メニューの右側いっぱいに広がります
  • 上のバーや左メニューの アイコン を押すと、マテリアルでは Google アプリのアカウントメニュー、リキッドグラスでは iOS の設定のような面が右から出ます。見ている人のアカウント(ログイン中なら名前と ID、未ログインなら「ゲスト」)と、アカウントの管理・ログアウト / ログイン、あなた自身には「このページを編集」が並びます
  • Windows では、アイコンを押すと「アカウント」のページ(#account)が開きます。見ている人のアイコン・名前・ID と、アカウントの種類(自分のページなら「管理者」、ほかの人のページでは「最高管理者」「管理者」「コントリビューター」「標準ユーザー」のいずれか。未ログインは「ゲスト」)が出ます
  • マテリアルでは、プロフィール(アイコン・名前・自己紹介)とブロックがそれぞれ面のパネル(角丸 28px)に入り、広い画面では左にプロフィール、右にブロックが横に並びます(プロフィールはスクロールしても留まります)
  • マテリアルでは、見ている人がページの持ち主(あなた)ならアイコンに紫と青のリングと「Admin」のバッジ、folita.me の運営がコントリビューターにしたアカウントなら青から緑のリングと「Contributor」のバッジ、ほかの folita.me アカウントでログインしていれば Google アプリと同じ 4 色のリングと「Standard」のバッジが付きます(運営本人は「Owner」)

カスタム CSS では .folita-nav .folita-nav--bottom .folita-nav--top .folita-nav__item(選択中は .is-active).folita-panel(data-page)で変えられます。

このページの内容