ドキュメントサイトの外観をカスタマイズする
ドキュメントサイトのロゴ、ファビコン、ブランドカラー、フォント、角の形状、デフォルトのテーマ、ホームページのヘッダーを設定し、「Powered by Clevera」バッジを表示するかどうかを選択します。保存して公開する前に、すべての変更をプレビューできます。
外観では、読者に表示されるドキュメントサイトの見た目を制御します。ロゴやファビコン、ブランドカラー、フォント、角の形状、デフォルトのライト/ダークテーマ、ホームページのヘッダーなどが含まれます。変更内容はライブプレビューで確認でき、次回の公開時に反映されます。
始める前に
- オーナー、管理者、編集者は外観を変更できます。それ以外のユーザーには「管理者と編集者のみがサイトの外観を変更できます。」と表示されます。
- 一時停止中のサイトは読み取り専用です。「このサイトは一時停止中です。外観を変更するには再開してください。」
- サイト名はここではなく、設定 → 一般で設定します。
外観を変更する
外観を開く
ドキュメントサイトを開き、サイトの下にある外観に移動します。左側にフォーム、右側にライブプレビューが表示されます。ウィンドウが狭い場合は、プレビューをクリックして開いてください。
ライブプレビュー付きの外観画面 変更を加える
以下のセクションを順に進めてください。入力に合わせてプレビューが更新されます。
プレビューを確認する
プレビューをデスクトップと電話、ライトとダーク、そしてホームページと記事ページの間で切り替えて確認できます。
保存して公開する
バーに未保存の変更が表示され、破棄と保存を選択できます。保存をクリックしてから、サイトを公開して新しい外観を反映させます。自動公開がオンになっている場合は、数分後に自動的に公開されます。
未保存の変更がある状態でページを離れようとすると、Cleveraが確認を求めます。
ロゴとファビコン
「PNG、JPG、WebP、またはSVG形式、最大2 MBまで。」
| スロット | 用途 | 空の場合 |
|---|---|---|
| ライト背景 | ライトモード時のヘッダーロゴ | サイト名がテキストで表示されます ("Site name as text") |
| ダーク背景 | ダークモード時のロゴ | "ライトロゴを使用" |
| ファビコン | ブラウザタブの小さなアイコン | "ロゴから生成" |
各スロットにはアップロード、置き換え、削除があります。「ダーク用のロゴをスキップした場合、ダーク背景にはライトロゴが使用されます。ファビコンは、アップロードしない限りロゴから生成されます。」
色
「ボタン、リンク、ハイライトに使用するブランドカラーを1色設定します。」
- 8つの見本から選択するか、カラーピッカーを使用して「色を選択または貼り付け」ます（例：
#2563ebのような16進数）。デフォルトは#4f46e5です。 - ダークモードの色を設定をオンにすると、ダーク背景で使用する色を選択できます。オフの場合：「ダーク背景用に色を明るく調整します。」派生した色は、16進数とともに自動として表示されます。
- 下部のコントラストに関する注記でリンクを確認します。「リンクはライト背景とダーク背景の両方で読みやすいです。」と表示されれば問題ありません。「リンクが読み取りにくい場合があります。少し暗く調整します。」と表示された場合、サイトは読みやすさのためにリンクの色を調整します。
タイポグラフィ
「あらゆる言語で機能する人気の組み合わせ、または任意のGoogleフォント。」
| 組み合わせ | 見出し | 本文 |
|---|---|---|
| Inter (デフォルト) | Inter | Inter |
| Geist | Geist | Geist |
| Manrope | Manrope | Manrope |
| Plus Jakarta Sans | Plus Jakarta Sans | Plus Jakarta Sans |
| DM Sans | DM Sans | DM Sans |
| IBM Plex Sans | IBM Plex Sans | IBM Plex Sans |
| Space Grotesk + Inter | Space Grotesk | Inter |
| Source Serif + Sans | Source Serif 4 | Source Sans 3 |
それ以外のフォントを使用する場合は、その他のフォント…をクリックし、見出し、本文、またはその両方に任意のGoogleフォントを選択します。リストには人気のフォントが先頭に表示されます。名前を入力して検索することも可能です。各フォントには、サンセリフ、セリフ体、表示、手書き、またはモノラルのスタイルが表示されます。
「任意のGoogleフォント。サイトと一緒にホストされるため、読者がGoogleから読み込むことはありません。フォントに含まれない言語は、組み合わせのフォントが使用されます。」つまり、選択したフォントに日本語の文字が含まれていない場合、日本語のページは選択した組み合わせのフォントにフォールバックされます。
形状とテーマ
| 設定 | オプション | デフォルト |
|---|---|---|
| 角 | シャープ、ソフト、ラウンド：ボタン、カード、ボックスの角の丸み | ソフト |
| デフォルトのテーマ | システム（読者のデバイス設定に従う）、ライト、ダーク。「読者はヘッダーで切り替え可能です。」 | システム |
ホームページヘッダー
ホームは「サイトのトップページ上部」を設定します。
| フィールド | 機能 | デフォルト |
|---|---|---|
| タイトル | 大きな見出し（最大120文字） | サイト名 |
| サブタイトル | その下の行（最大300文字） | 空 |
| 検索ボックス | タイトル下の検索ボックス | オン |
| 背景 | 「タイトルと検索ボックスの背後」に配置されるもの | グラデーション (ソフトグロー) |
タイトルとサブタイトルは言語ごとに設定できます。フィールドの下にあるその他の言語を開くか、すべての言語に翻訳をクリックして不足分を無料で埋めてください。空の言語にはデフォルト言語のテキストが表示されます。
背景
「テキストの色は、ライトモードとダークモードの両方で読みやすくなるよう自動調整されます。」「タイトルコントラスト · ライト 7.1:1 · ダーク 9.4:1」のようなコントラスト値で、タイトルの読みやすさを確認できます。
| オプション | 選択肢 |
|---|---|
| プレーン | タイトルの背後に色、グラデーション、画像なし |
| 色 | 「ブランドカラーから提案された色、または任意の色」：淡い色合い、明るい色合い、ソフトな色合い、ブランドカラー、深い色合い、インク、ペーパー、チャコール |
| グラデーション | ソフトグロー、ウォッシュ、オーロラ、サンライズ、ブランド、ミッドナイト、ミスト、サンド、グラファイト |
| 画像 | 描画パターン（波、メッシュ、ドット、ブループリント、輪郭、リング、ライン、星座）または独自の画像 |
パターンはブランドカラーに従い、すべてのプランで利用可能です。独自の画像はStarterプラン以上が必要です。「PNG、JPG、またはWebP形式、最大8 MBまで。横長の画像が最適です。読者向けにリサイズおよび圧縮されます。」これは「パターンの代わりに表示され、タイトルが読めるように暗く調整されます。」
バッジ
「Powered by Clevera」を表示は「フッターに小さなバッジを追加します。」
| プラン | バッジ |
|---|---|
| Free | 常に表示。スイッチはロックされています |
| Starter、Pro、Business、Custom | デフォルトでオン。オフにして非表示にできます |
各プランに含まれるもの
| オプション | Free | Starter以上 |
|---|---|---|
| ロゴ、ファビコン、色、フォント、角、テーマ | はい | はい |
| ホーム背景：プレーン、色、グラデーション、パターン | はい | はい |
| ホーム背景：独自の画像 | いいえ | はい |
| バッジを非表示 | いいえ | はい |
その他の詳細については、ドキュメントサイトのプランと制限をご覧ください。
トラブルシューティング
| 表示内容 | 対処法 |
|---|---|
| "その画像は2 MBを超えています。" | ロゴを小さくするか、WebPまたはSVGとして保存してください。ホーム画像は最大8 MBまで可能です。 |
| "PNG、JPG、WebP、またはSVG画像を使用してください。" | ロゴとファビコンはこれらの形式のみ対応しています。ホーム画像はPNG、JPG、WebPに対応しています。 |
| "この画像を使用できませんでした。PNGまたはJPGを試してください。" | ファイルを読み込めませんでした。PNGまたはJPGとして再度エクスポートしてください。 |
| "その画像はアップロードされませんでした。再試行してください。" | アップロードが中断されました。もう一度試してください。 |
| "外観を保存できませんでした。再試行してください。" | 何も保存されていません。赤くマークされたフィールドを確認し、保存を再度クリックしてください。 |
| "フォントリストを読み込めませんでした。" | 再試行をクリックしてください。現在のフォントはそのまま維持されます。 |
| ライブサイトが古いままです | 保存は公開を意味しません。サイト上部の公開をクリックしてください。 |