デザイン：色、背景、フォント

ビルダーの「テーマ」タブでは、ページ全体の見た目（色、背景、ボタンの形、フォント）を設定します。カスタムCSS以外の変更はすべて、約2秒後に自動で下書きに保存され、次に公開したときに反映されます。

タブは上から順に「テンプレート」「プリセット」「色」「背景」「コンテンツの背面」「ボタンスタイル」「フォント」「カスタムCSS」で構成されています。テンプレートには専用の記事があります。

#プリセット

プリセットは、あらかじめ用意された色の組み合わせです。クリックすると、背景色、テキストの色、ボタンの色、ボタンスタイルが一度に設定され、自分で設定したボタンの文字色はリセットされます。プリセットは16種類あります：クラシック、ミッドナイト、ハーバー、オーシャン、フォレスト、サンセット、ローズ、スレート、モノ、フロスト、ラベンダー、アンバー、チャコール、ミント、クリムゾン、サンド。4つの値のいずれも変更しない限り、有効なプリセットに印が付きます。

#色

4つの基本色があり、それぞれにカラーピッカーと16進数の値があります（透明度はありません）。

「背景」

ページの背景色です。背景の種類が「色」の場合にも使われます。

「テキストの色」

名前、自己紹介、テキストの色です。

「ボタンの色」

リンクボタンの色で、ブロック内のボタンの既定の色でもあります。

「ボタンの文字」

ボタン上の文字です。自分で選ばない場合は、ボタンの色に対して読みやすい色が自動で選ばれます。

表示される値は、テンプレート由来であっても、常に現在有効な値です。多くのブロックには「表示オプション」に独自の色の項目があります。「デフォルト（テーマ由来）」と表示されている間は、ここでの色に従います。

#背景

「色」「画像」「グラデーション」「動画」のボタンで、ページの背景の種類を設定します。切り替えても、ビルダーにいる間は他の種類の値をビルダーが記憶しています。

色

ページには「色」セクションの「背景」の色が使われます。

画像

「デスクトップ画像」

大きな画面用の背景で、1920 × 1080 pxです。

「モバイル画像」

任意で、縦向きの1080 × 1920 pxです。空欄の場合は「デスクトップと同じ」と表示され、デスクトップ画像が使われます。

「選択」でアセットが、「管理 ↗」でアセットページが開き、「削除」で画像を外します。画像が目標のサイズとちょうど同じでない場合は、トリミングツールが開き、トリミングした画像は新しいアセットとして保存されます。詳しくはページビルダーの画像をご覧ください。

グラデーション

「開始色」と「終了色」

グラデーションの2色です。

「角度」

0〜355度の方向で、5度刻みです。

「プリセット」

あらかじめ用意されたグラデーション：インディゴ、サンセット、オーシャン、フォレスト、ベリー、ミッドナイト。

動画

「デスクトップ用動画」

動画ファイル（.mp4または.webm）への直接リンク、または動画アセットから「動画を選択」で選びます。

「モバイル用動画」

任意で、モバイル通信用の小さいファイルなどに使います。空欄の場合は、デスクトップ用動画が使われます。

動画はミュートでループ再生され、操作ボタンは表示されません。システム設定で動きを減らす設定をオンにしている訪問者には表示されません。8 MBまでのMP4またはWebM形式のファイルをおすすめします。

オーバーレイの不透明度

画像、グラデーション、動画では、0〜80%のスライダーで背景の上に暗くする層を重ね、テキストを読みやすくできます。

画像、グラデーション、動画のページ背景は、テンプレートの背景画像に代わって表示されます。その場合、テンプレートの画像枠にはその旨の注記が表示されます。「色」にするとテンプレートの画像が再び表示されます。

#コンテンツの背面

背景画像、グラデーション、動画の上でもテキストを読みやすくします。

「オフ」

背面なしで、コンテンツは背景の上に直接表示されます。

「コンテンツ全体」

すべてのコンテンツの後ろに1枚のカードを置きます。

「ブロックごと」

プロフィールと各ブロックの後ろに、それぞれ別のカードを置きます。

「不透明」または「半透明」

背面をオンにすると表示されます。半透明では背景が透けて見えます。

この設定はBusiness Cardテンプレートでは効果がありません。

#ボタンスタイル

ボタンスタイルは既定値です。リンクブロックとリンクごとに上書きできます（どちらも「角の丸み」）。

#フォント

DM Sans、Figtree、Sora、Plus Jakarta Sans、Raleway、Inter、Poppins、Montserrat、Nunito、Outfit、Space Grotesk、「システム標準」（デバイス自身のフォント）から選べます。「Aa — いろはにほへと」の行にプレビューが表示されます。

LinkHarborはすべてのフォントを自ら配信します。訪問者のブラウザが、フォントのためにGoogle Fontsや他の第三者のサーバーから何かを読み込むことはありません。

#どの設定が優先されるか

色と形は、外側から内側へと細かく調整されます。

1. テンプレート：基本的なスタイルと既定の色
2. 「テーマ」タブ：ページ全体の色、背景、ボタンスタイル、フォント
3. ブロックの表示オプション：そのブロックの色と形
4. 個別のリンクのスタイル：その他すべての値より優先
5. カスタムCSS：操作パネルでカバーできないすべてのこと

独自のCSSで細かく調整する方法はページのカスタムCSSで説明しています。