メインコンテンツにスキップ

フォントとタイポグラフィをカスタマイズする

結婚式ウェブサイト全体でカスタムフォントを選択し、テキストスタイルを調整します。

対応者:Brian
今日アップデートされました

フォントとタイポグラフィをカスタマイズする

結婚式ウェブサイト全体でカスタムフォントを選択し、テキストスタイルを調整します。

結婚式ウェブサイトに完璧なタイポグラフィを持たせたいですか?サイト全体の異なるテキスト要素のフォント、サイズ、間隔などをカスタマイズできます。結婚式のスタイルに合う、一貫した美しいデザインを作成しましょう。

カスタマイズできる項目

WedSitesでは、7種類の異なるテキストタイプのタイポグラフィを制御できます:

本文テキスト(フォント): メイン段落とコンテンツ

カップルの名前(名前フォント): ヘッダーのお二人の名前

アンパサンド(アンパサンドフォント): 名前の間の「and」または「&」

日付(日付フォント): 結婚式の日付テキスト

見出し(見出しフォント): セクションの見出し

タイトル(タイトルフォント): ページタイトル

ラベル(ラベルフォント): フォームラベル、ボタン、小さなテキスト

それぞれにカスタマイズ可能なフォントファミリー、サイズ、大文字小文字、文字間隔、行の高さがあります。

タイポグラフィ設定にアクセスする手順

  1. メインナビゲーションのウェブサイトに移動します

  2. 設定アイコンをクリックしてサイト設定を開きます

  3. 上部のフォントタブをクリックします

  4. 各テキストタイプのセクションが表示されます

  5. 希望に応じて各要素をカスタマイズします

  6. 下部の変更を保存をクリックします

タイポグラフィがサイト全体で更新されます。

デフォルトフォントを復元する

フォントタブの上部にはデフォルトを復元リンクがあります。

これをクリックすると、すべてのフォント設定がテーマの元のタイポグラフィにリセットされます。最初からやり直したい場合に便利です。

フォントの大文字小文字オプション

各テキストタイプについて、大文字小文字を選択します:

混合大文字(Aa): 通常の大文字小文字 - 「Emily and Jordan」

大文字(AA): すべて大文字 - 「EMILY AND JORDAN」

小文字(aa): すべて小文字 - 「emily and jordan」

大文字小文字ボタンをクリックして、テキストの表示方法を変更します。

本文テキスト(フォント)のカスタマイズ

メインコンテンツテキストを制御します。

フォントファミリー: ドロップダウンから選択(200以上のフォントが利用可能)

フォントサイズ: 10〜72px

文字間隔: -0.2〜0.8(スライダー)

行の高さ: 1〜3(スライダー)

大文字小文字: 混合、大文字、または小文字

これはサイト全体のすべての段落テキストに影響します。

名前フォントのカスタマイズ

カップルの名前の表示方法を制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 24〜300px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

自動リサイズ: 異なる画面に合わせてサイズを自動調整するチェックボックス

すべてのデバイスでよく見えるレスポンシブな名前のために自動リサイズを使用してください。

アンパサンドフォントのカスタマイズ

名前の間の「and」または「&」のみを制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 24〜300px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

「and」を綴る: 「&」の代わりに「and」を書くチェックボックス

アンパサンドを装飾的にするか、シンプルに保つかを選択できます。

日付フォントのカスタマイズ

結婚式の日付テキストを制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 10〜72px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

フォーマリティレベルに合わせて日付をスタイリングしましょう。

見出しフォントのカスタマイズ

サイト全体のセクション見出しを制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 24〜200px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

自動リサイズ: レスポンシブな見出し用チェックボックス

見出しは目立ちつつ読みやすくあるべきです。

タイトルフォントのカスタマイズ

ページタイトルを制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 24〜200px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

自動リサイズ: レスポンシブなタイトル用チェックボックス

タイトルは見出しに似ていますが、テーマでは異なって表示される場合があります。

ラベルフォントのカスタマイズ

フォームラベル、ボタン、小さなテキストを制御します。

フォントファミリー: ドロップダウンから選択

フォントサイズ: 10〜72px

文字間隔: -0.2〜0.8

行の高さ: 0〜3

大文字小文字: 混合、大文字、または小文字

ラベルは読みやすく機能的に保ちましょう。

フォントファミリーを選ぶ

フォントドロップダウンには、200以上の専門的に選択されたフォントが含まれています:

セリフフォント: 伝統的、エレガント(Playfair、Loraなど)

サンセリフフォント: モダン、クリーン(Open Sans、Ralewayなど)

スクリプトフォント: 装飾的、手書き風(Great Vibes、Pacificoなど)

ディスプレイフォント: ユニーク、装飾的

ドロップダウンでフォントをプレビューして、どう見えるか確認してください。

フォントペアリングのヒント

コントラスト: セリフとサンセリフをペアリング(見出しはセリフ、本文はサンセリフ)

類似性: 調和のために同じファミリーのフォントを使用

階層: フォントサイズと太さで視覚的階層を作成

制限: 2〜3以上の異なるフォントファミリーを使わない

テスト: フォントが一緒に読みやすいことを確認

良いペアリング例:
- 名前:エレガントなスクリプト
- 本文:クリーンなサンセリフ
- 見出し:大胆なセリフ

フォントサイズのガイドライン

本文テキスト: 14〜18px(長い段落に読みやすい)

名前: 48〜96px(目立つが圧倒的ではない)

見出し: 24〜36px(本文より大きく、名前より小さい)

ラベル: 12〜16px(小さいが読める)

サイズはテーマとデザインによって異なる場合があります。

文字間隔(トラッキング)

文字間のスペースを制御します。

負の値: 文字が近く(タイト、コンパクト)

ゼロ: デフォルトの間隔

正の値: 文字が離れて(エアリー、広々)

大文字テキスト: 多くの場合、より多くの文字間隔が必要

小文字テキスト: 通常デフォルト間隔で問題なし

スライダーを調整して完璧な間隔を見つけてください。

行の高さ(レディング)

テキストの行間の垂直スペースを制御します。

低い値(1〜1.5): タイト、コンパクト

中程度の値(1.5〜2): 快適な読み取り

高い値(2〜3): エアリー、多くの余白

本文テキスト: 読みやすさのために通常1.5〜1.8

見出し: タイトでよい、1.2〜1.4

自動リサイズ機能

名前、見出し、タイトルで利用可能。

有効時: フォントサイズが異なる画面サイズに合わせて自動調整

無効時: フォントサイズは固定

推奨: モバイルで機能するレスポンシブタイポグラフィのためオン

タイポグラフィのテスト

カスタマイズ後:

  1. ライブサイトを訪問します

  2. 本文テキストの読みやすさを確認します

  3. 名前と見出しを見ます

  4. 異なるページを表示します

  5. モバイルでテストします

  6. 異なるブラウザでテストします

  7. 友人に意見を求めます

タイポグラフィは美しくかつ機能的であるべきです。

モバイルの考慮事項

フォントサイズ: スマートフォンでは異なって表示される場合があります

自動リサイズ: フォントが小さな画面に適応するのに役立ちます

文字間隔: モバイル用に調整が必要な場合があります

行の高さ: モバイル読み取りのために快適に保ちます

常にモバイルタイポグラフィをテストしてください。

アクセシビリティ

読みやすいフォント: 本文テキストには過度に装飾的なフォントを避けます

十分なサイズ: 本文テキストは少なくとも14〜16pxであるべき

行の高さ: 簡単に読めるように十分な間隔

コントラスト: テキストが背景から際立つようにします

一貫性: 階層を明確に使用(見出しを本文より大きく)

良いタイポグラフィはすべてのゲストがサイトを楽しむのに役立ちます。

一般的なタイポグラフィスタイル

クラシックエレガント:
- 名前:Playfair Display
- 本文:Lora
- 見出し:Cinzel

モダンクリーン:
- 名前:Montserrat Bold
- 本文:Open Sans
- 見出し:Raleway

ロマンチックスクリプト:
- 名前:Great Vibes
- 本文:Quicksand
- 見出し:Libre Baskerville

ラスティックカジュアル:
- 名前:Amatic SC
- 本文:Karla
- 見出し:Merriweather

フォーマルとカジュアル

フォーマルな結婚式:
- セリフフォント
- 適切な大文字小文字
- タイトな文字間隔
- クラシックな組み合わせ

カジュアルな結婚式:
- サンセリフまたは遊び心のあるフォント
- すべて小文字もあり
- 緩い文字間隔
- 楽しい組み合わせ

タイポグラフィを結婚式の雰囲気に合わせましょう。

タイポグラフィの階層

明確な階層を作成:

最大: 名前(80〜100px)
大: タイトルと見出し(30〜40px)
中: 本文テキスト(16〜18px)
小: ラベル(12〜14px)

サイズの違いにより、ゲストがコンテンツをナビゲートしやすくなります。

ブランドの一貫性

結婚式のブランディング(招待状、ステーショナリー)がある場合:

フォントを合わせる印刷物から

相対的に同じサイズを使用

同じスタイルを維持(フォーマル、カジュアル、ロマンチック)

一貫性によりすべてが一体感を感じさせます。

テーマのデフォルト

テーマには慎重に選ばれたタイポグラフィが付属しています。上部のデフォルトを復元リンクは、最初からやり直したい場合にこれらのテーマ設定にリセットします。

高度なタイポグラフィ用のカスタムCSS

さらに制御が必要な場合は、デザインタブでカスタムCSSを使用できます。ただし、フォントタブでほとんどのタイポグラフィのニーズをカバーできます。

タイポグラフィ設定を保存する

フォントの選択とサイズを書き留めておきましょう:

名前: Great Vibes、72px
本文: Open Sans、16px
見出し: Playfair Display、32px

必要に応じて設定を再作成できます。

フォントとタイポグラフィをカスタマイズすることで、結婚式のスタイルに完璧に合い、コンテンツを読みやすくする、ユニークで洗練されたルックを結婚式ウェブサイトに与えます。

こちらの回答で解決しましたか?