ウェブサイトのカラーとスタイルの設定

サイト全体のボタン、テキスト、見出し、リンクの色とスタイルを設定する方法
色とスタイルはサイト設定で指定され、すべてのページに適用されます。スタイルを活用することで、ウェブサイトのデザインの一貫性を維持し、デザイナーが承認したアイデンティティに沿うことが容易になります。
サイト全体での色の設定方法
もっと読む
プロジェクトでスタイルを設定する方法
もっと読む
色、タイポグラフィ、ボタンのスタイル設定方法
もっと読む
スタイルの編集方法(色、タイポグラフィ、ボタン)
もっと読む
スタイルの適用方法(色、タイポグラフィ、ボタン)
もっと読む
プロジェクト間でスタイルを転送する方法
もっと読む
スタイル付きページを転送する方法
もっと読む
カラー設定
ウェブサイトのカラーとスタイルを設定するには、「サイト設定」に移動し、「カラーとスタイル」タブをクリックしてください。
サイト全体の見出し、テキスト、リンク、またはページ背景の色を設定するには、必要なフィールドをクリックし、3つの形式のいずれかで手動で色を選択するか、カラーコードを直接入力してください。
色は3つの形式で指定できます:HEX、RGB、HSL。
ウェブサイトの全リンクのスタイルを変更するには、「追加設定」リンクをクリックしてください。設定画面で、アンダースコアの幅と色、およびホバー時のリンクスタイルを指定します。
スタイル設定
プロジェクト用の独自のスタイルライブラリを作成するには、「スタイルの管理」ボタンをクリックしてください。
スタイル管理パネルでは、色、タイポグラフィスタイル、ボタンを追加できます。作成したスタイルをダウンロードし、別のプロジェクトにインポートすることも可能です。
スタイルの追加 
プロジェクトに新しいスタイルを追加するには、「スタイル管理」をクリックし、以下のいずれかのオプションを選択します:カラースタイルの作成タイポグラフィスタイルの作成ボタンスタイルの作成
既存のスタイルがある状態で別のスタイルを追加したい場合は、「カラー」「タイポグラフィ」「ボタン」オプションの横にあるプラスアイコンをクリックして新規追加してください。新しいスタイルは既存のスタイルの横に表示されます。
スタイルを編集するには、そのスタイルをクリックしてください。
編集スタイル
色。カラースタイルを作成する際には、名前と説明を指定してください。これらはプロジェクトスタイルに表示されます。
タイポグラフィ。タイポグラフィスタイルを作成する際、テキストの色設定、異なる画面解像度でのフォントサイズ、フォントの種類、太さ、その他のフォント設定が利用可能です。

タイポグラフィスタイルエディタの上部では、フォントをプレビューできます。モバイルデバイスでの表示を確認するには、ブレークポイント設定パネルで必要な範囲を選択してください。
ブレークポイントを編集するには、歯車アイコンをクリックすると、デフォルトデバイスを含むメニューが開きます。
ボタン。ボタンスタイルを作成する際、アイコンの表示やテキストの折り返しを別途選択できます。タイポグラフィ設定、ホバー時のスタイル、その他の基本設定も設定可能です。

ボタンスタイルは異なるデバイスでのプレビューも可能で、ブレークポイントの編集も行えます。
スタイルの使用
色。作成したカラースタイルを使用するには、色を指定したい要素をクリックし、エディターでプロジェクトスタイルを選択します。
必要なスタイルを選択すると、ブロックに自動的に適用されます。色指定されたフィールドには、スタイル名と、プロジェクトの色スタイルが適用されたことを示すアイコンが表示されます。
タイポグラフィ。作成したタイポグラフィスタイルを使用するには、ブロック設定で「タイポグラフィ」タブを選択し、「スタイル」をクリックします。

コンテキストメニューで必要なスタイルをクリックすると、ブロックに自動的に適用されます。スタイル設定に移動するには、「スタイルライブラリへ移動」をクリックします。
スタイルに説明が指定されていない場合、その設定が表示されます:フォント名、サイズ、行間。
タイポグラフィスタイルは、テキスト要素が使用されているあらゆるブロックに適用できます。ブロック設定の「タイポグラフィ」タブである必要はありません。
タイポグラフィ用のスタイルを適用後、設定画面にはそのスタイルで未指定のオプションのみが表示されます。これらのオプションを編集すると、変更は現在のブロックにのみ適用され、プロジェクトで設定されたタイポグラフィスタイルには影響しません。
重要: 適用されたスタイルで設定が指定されておらず、ブロック内で直接設定した場合、後で同じスタイルに同じ設定を同じ値または異なる値で追加すると競合が発生します。この場合、ブロック内で指定された設定が優先されます。
スタイルがブロックから切り離された場合、テキスト要素のすべての設定フィールドには、以前に適用されたスタイルで指定された値が入力されます。
ボタン。 作成したボタンスタイルを使用するには 、ブロック設定で「ボタン」タブを選択し、プリセット横の「スタイル」をクリックします。

コンテキストメニューで必要なスタイルをクリックすると、自動的に適用されます。
これまでと同様に、ボタンの設定では、スタイル自体で指定されていない設定のみが表示されます。それらを編集するか、そのままにしておくことができます。
ボタンにアイコンを追加するには、ブロックの「コンテンツ」に移動してください。
ボタンの横にアイコン用のスペースが表示されます。クリックするとアイコンを追加できます。メニューが開き、以下のアイコンオプションが利用可能です:矢印、絵文字、Tilda 、ザ・ナウン・プロジェクト、および独自のアイコンファイルをアップロードするオプション。
ボタンにホバー時のアイコン表示を変更するには、「ホバー時にアイコンを追加」オプションをクリックしてください。
アイコンを選択し、変更を保存してください。
アイコンを削除するには、ボタンテキスト横の画像をクリックします。「アイコン」タブを選択し、ゴミ箱アイコンをクリックします。変更を保存すると、アイコンが消えます。
ブロックにスタイルを適用した後に編集が必要な場合は、サイト設定に移動し、「色とスタイル」タブを選択してスタイルを編集してください。変更を反映させるには、プロジェクト設定を保存し、再公開することを必ず行ってください。

スタイルが使用されているブロックでは、スタイルの変更が自動的に適用されます。ブロック内でスタイルを編集したり再割り当てしたりする必要はありません。
ブロック内では、同じ要素に対してカラースタイルとタイポグラフィ/ボタンスタイルを組み合わせて適用できます。例えば、タイポグラフィスタイルでテキストカラーが指定されていない場合、ブロック設定でこのスタイルを割り当て、カラーのカラースタイルを設定できます。
プロジェクトからのスタイルのインポート、エクスポート、および削除
プロジェクトスタイルをダウンロードするには、[スタイル管理]ボタンをクリックし、必要なオプションを選択してください。プロジェクト名と.tildastyles拡張子を持つファイルがデバイスにダウンロードされます。
プロジェクトのスタイルにアップロードするには、.tildastyles拡張子を持つファイルのみを使用できます。他のファイルは使用できません。
スタイルをアップロードするには、コンテキストメニュー内の対応するオプションも選択してください。新規スタイルは、以前にプロジェクト内で作成されたスタイルに追加されます。以前にプロジェクト内で作成されたスタイルは削除または更新されません。
スタイルは別のTilda またはご自身のプロジェクトにのみ再度アップロードできます。.tildastylesファイルを手動で編集・変更することはできません。
プロジェクトからスタイルを削除して設定を保存しても、そのスタイルは今後2週間はブロック設定に適用されたままになります。スタイルが以前適用されていたブロックには通知が表示されます。

2週間後、スタイルはプロジェクトから完全に削除され、ブロック設定はリセットされます。
スタイル付きページを別のプロジェクトに移行する
あるプロジェクトでページにスタイルを追加した後、同じページを現在のアカウントまたは別のアカウント内の別のプロジェクトに移行する必要がある場合、ページはスタイルと共に移行されます。

移行時には、ブロックが正しく表示されるよう、スタイルが新しいプロジェクトにコピーされます。
このページを現在のアカウントまたは別のアカウント内の別のプロジェクトに転送する方法について詳しく知りたい場合は、このガイドをお読みください
プロジェクト全体で作成できる全種類のスタイルの合計上限は500です。
スタイルが設定されたページを、スタイル制限に達している、または達する予定の同一アカウント内のプロジェクトに転送しようとすると、エラー通知が表示されます。ページの転送を完了するには、別のプロジェクトで余分なスタイルを削除する必要があります。
スタイル付きページを、上限に達している別のアカウントのプロジェクトに転送しようとすると、ページは転送されません。「承諾」をクリックすると、上限を超えているため余分なスタイルを削除する必要があるという通知が表示されます。
製造元
Tilda