本文へスキップ

ガイド

テーマとダークモードを選ぶ

ブランディングと設定 · 読了まで5分

テーマは、コミュニティのブランドカラー、フォント、角丸、シャドウを、ライトモードとダークモードそれぞれに設定するものです。テーマを使って、ブランドの配色に合わせたり、メンバーにデフォルトでライトモードとダークモードのどちらを表示するかを選んだりできます。

対象者:オーナーと管理者。ライトモードかダークモードかは、メンバーが自分で選びます。 · 場所:ウェブ(管理画面)。メンバーはウェブと Mateflow アプリでモードを切り替えます。 · プラン:テーマと色にはプランによる制限はありません。カスタム CSS はプラットフォームプランによって異なります。

テーマページを開く

管理画面 → 外観 → テーマに移動します。ブランディングページのテーマでカラー&フォントを管理 → をクリックしても開けます。

  • アクティブテーマには、現在メンバーに表示されているテーマが表示されます。ライブバッジが付いています。
  • テーマライブラリには、ほかのテーマが一覧表示されます。検索したり、最近更新などで並べ替えたりできます。
  • 上部のボタンは、App Theme、Settings、Add Theme です。

プリセットから新しいテーマを追加する

  1. Add Theme をクリックします。
  2. テーマ名を入力します(50 文字まで)。
  3. プリセットを選びます。プリセットを検索... またはカテゴリのフィルターで探せます。テーマは必ずプリセットから作成します。
  4. すぐに公開するには、すぐに公開にチェックを入れます。
  5. テーマを作成をクリックします。

既存のテーマをコピーする場合は、そのテーマの ⋯ メニューを開いてクローンをクリックし、新しいテーマ名を入力して、テーマを複製をクリックします。コピーには、ライトとダークの色、タイポグラフィ、余白、枠線、シャドウがすべて引き継がれます。

テーマの色とフォントを編集する

アクティブテーマのカスタマイズをクリックするか、ほかのテーマの ⋯ メニューを開いて編集をクリックします。エディターは、テーマを編集: とテーマ名のタイトルで開きます。

  1. カラーモードで、ライトまたはダークを選びます。モードごとに色が分かれているため、両方を設定してください。
  2. カラータブで、Background、Primary、Accent、Card、Sidebar などの色を設定します。各テキストカラーには、コントラスト比が表示されます。WCAG AA のコントラスト基準を満たさない色は、スマート調整をクリックすると修正できます。
  3. タイポグラフィタブで、フォントファミリーと文字間隔を選びます。
  4. その他タブで、角丸とシャドウを設定します。プラットフォームプランに含まれている場合は、カスタム CSS もここにあります。
  5. ライブプレビューを確認します。フィード、投稿、プロフィール、UI を切り替えたり、デスクトップ表示とモバイル表示を切り替えたりできます。
  6. 保存をクリックします。

アクティブテーマを保存すると、メンバーに表示される内容が変わります。変更を安全に試すには、ライブラリのテーマを編集し、準備ができてから公開してください。

テーマを公開する

テーマライブラリのテーマで公開をクリックします。そのテーマがアクティブテーマになり、それまでのテーマはライブラリに戻ります。公開できるテーマは一度に 1 つだけです。

公開中のテーマ以外は削除できます。テーマの ⋯ メニューを開いて削除をクリックし、確認します。削除は元に戻せません。

テーマを以前のバージョンに戻す

Mateflow は、テーマが編集、公開、復元されるたびにスナップショットを保存します。

  1. テーマの ⋯ メニューを開いて、履歴をクリックします。
  2. バージョン履歴で、戻したいバージョンを探して元に戻すをクリックします。
  3. 確認します。Mateflow はまず現在の状態を新しいスナップショットとして保存するため、元に戻す操作自体も取り消せます。

デフォルトのライトモード/ダークモードを設定する

デフォルトのモードは、自分でモードを選んでいないすべての人に適用されます。

  1. テーマページで Settings をクリックします。
  2. デフォルト外観で、ライト、ダーク、システム(自動) のいずれかを選びます。システム(自動)は、各自のデバイスの設定に従います。
  3. 設定を保存をクリックします。

メンバーがライトモードとダークモードを切り替える方法

メンバーは、いつでもあなたのデフォルト設定を上書きできます。

  • ウェブ:アバターをクリックし、外観をクリックします(または設定 → 外観に移動します)。テーマで、コミュニティに合わせる、システム、ライト、ダークのいずれかを選びます。コミュニティに合わせるには、あなたがデフォルトに設定したモードが表示されます。
  • アプリ:設定とプライバシー → 表示を開きます。テーマで、コミュニティに合わせる、システムに合わせる、ライト、ダークのいずれかを選びます。

メンバーが別のテーマを選ぶことはできません。公開中のテーマの色が、各メンバーの選んだモードで全員に適用されます。

Mateflow アプリに独自の色を設定する

デフォルトでは、Mateflow アプリは公開中のウェブテーマから取った色を使います。アプリだけ色を変えるには、次の手順に従います。

  1. テーマページで App Theme をクリックします。
  2. ライトまたはダークを選び、変更したい色を設定します。空欄のままの色には、アプリのデフォルトが使われます。Derive from web をクリックすると、ウェブテーマをもとにした下書きが入力されます。
  3. 保存をクリックします。

アプリ用の上書き設定は公開中のテーマと一緒に保存され、フォントはアプリ独自のものが使われます。アプリを再びウェブテーマに合わせるには、Clear override をクリックして確認します。

関連記事

このガイドは役に立ちましたか?

ガイド一覧に戻る

お探しのものが見つかりませんか?

コミュニティのメンバーの方は、そのコミュニティの管理者にお問い合わせください。Mateflowでコミュニティを構築・運営している方は、私たちのチームがサポートします。

無料トライアルを開始