ヒーロー・セクションの設定方法

表紙は、人々があなたのページで最初に目にするものです。コンテンツを紹介し、そのページに行くよう促したり、あなたのプロジェクトのユニークさを要約したりします。表紙には通常、スタイリッシュな写真、魅力的なビデオ、色、グラデーション、テクスチャなどの背景画像が含まれます。

ここでは、カバー、背景、動画をより効率的に扱うためのヒントをいくつかご紹介します。

雑誌のページとは異なり、ウェブサイトのページには固定された閲覧可能領域がありません。デバイスごとに画面サイズも縦横比も異なる。さらに、閲覧可能な領域はブラウザによって異なります。例えば、ブックマークバーが固定されているブラウザでは、表示可能領域が小さくなります。カバー画像は、画面上でボーダーレスに見えるようにトリミングされます。

ブロックのコンテンツパネル→背景画像でカバー背景画像をアップロードする。

画像を美しく見せるために、背景画像の最適な設定について以下のヒントを参考にしてください。

画像の品質に不満がある場合は、以下の参考記事を参考に、あらかじめグラフィックエディターで編集してください。

画像を選ぶ前に、Tilda Education記事「ウェブサイトの表紙の作り方」をお読みください。この記事には、独自のカバーページを作成するためのヒントと、質の高いストックフォトウェブサイトへのリンクが含まれています。

テキストは、ウェブサイト訪問者が最初に目にするメッセージであるため、どの表紙ページでも最も重要な部分です。表紙ページには、見出し、小見出し、説明、上注があり、メッセージを伝え、何が重要かを強調します。

ブロックのコンテンツパネルを使用するか、ページ編集中にテキストをクリックするかの2つの方法で、表紙をテキストで埋めることができます。

上部のコントロールパネル、またはブロック→組版の設定パネルでテキストのサイズ、色、その他のパラメータを変更することで、テキストの書式を設定できます。

クールな表紙を作るには、テキストと背景画像の組み合わせの実践例を掲載した記事「How to Create a Cover for a Website」や、ガイド「Creating a Unique Selling Proposition (USP) For a Website」をチェックして、10秒以内に訪問者を惹きつける表紙ページを作りましょう。

薄いカバーの高さは100％ではなく、60％か70％です。

このようなカバーを作成するには、ブロック設定の「高さ」フィールドに移動します。ピクセル単位（例：400px）またはビューポートの高さの単位であるパーセント単位（1vhは表示可能領域の1%）で高さを設定できます。私たちは、高さをvhで設定することをお勧めします。

背景画像のトーンを変更する方法
表紙のテキストを読みやすくしたい場合、画像のトーンを変更します。これを行うには、カバーブロックの設定パネルを開き、フィルターカラーを調整します。ここでは、1つのフィルターカラーが適用されたカバー画像を見ることができます。トーニングに使用されるのは、ブランドカラーやウェブサイトの原色であることもあります。

次のブロックの色に色をなじませる方法
カバーを次のブロックになじませることがあります。この効果を得るには、終了フィルターの色を不透明度100%に設定します。フィルターの色は次のブロックの色と同じにします。

カバーの高さを2倍にし、この2つの設定を同時に適用することで、以下のような効果を得ることができる：

YouTubeに動画をアップロードするか、既存の動画を見つけます。次に、カバーブロックのコンテンツパネルに行き、適切なフィールドに動画のリンクを貼り付けます。このようにして、動画カバーを作成することができます。

オンラインコンバータを使用してWebMやMPEG-4ビデオを作成し、サーバーまたは変換サービスのWebサイトでそれらをホストすることができます。例えば、gfycat.comでは変換とホスティングの両方が可能です。

カバーブロックの設定パネルを開き、対応するフィールドに動画リンクを追加します。

なぜ両方のフォーマットを使うのですか？
ブラウザはそれぞれ異なるフォーマットを使うので、統一されたフォーマットはありません。ユーザーがあなたのウェブサイトにアクセスすると、ブラウザが再生できる動画が表示されます。そうでない場合、表紙は空白になります。

画面にはさまざまなアスペクト比があり、デバイスによってカバーの見え方が異なることがあります。一般的なアスペクト比ではカバー画像が劇的に変化することはありませんが、モバイルデバイスでは認識できないほど変わってしまうことがあります。この包括的なガイドを参考に、モバイルフレンドリーな表紙（またはその他のブロック）の作り方をじっくり学んでください。

カバー動画がモバイルで再生されない理由

モバイルOSの特殊性により、カバー動画はモバイルデバイスで再生されません。モバイルOSは自動再生を無効にしています。自動再生動画カバーを作成した場合、カバーブロックのコンテンツパネルに画像を追加することを忘れないでください。画像が表示されるのは、動画が再生できない場合、つまり訪問者がスマートフォンやタブレットからウェブサイトにアクセスした場合です。

以下の表紙にデータ入力フォームがあります：CR26 （入力フ ィ ール ド のあ る 表紙） ・ CR26AN （複数入力フ ィ ール ド のあ る 表紙） ・ CR32 （右揃えの フ ォームのあ る 表紙） ・ CR34 （カ ウ ン ト ダ ウ ン と 購読フ ォームのあ る 表紙） ・ CR36 （画像ま たは YouTube の動画 と 2 段組の フ ォームのあ る 表紙）

「ブ ロ ッ ク ・ ラ イ ブ ラ リ 」 → 「表 紙」 で好きなオプシ ョ ン を選ぶ と 、 フ ォームがど の よ う に表示 さ れ る かを プ レ ビ ュ ーで き ます。

表紙ページのフォームも通常のフォームと同じ機能を果たし、同じようにカスタマイズすることができます。フォームをカスタマイズするには、データキャプチャフォームの設定方法の記事をお読みください。

ブロックCR34とCR35の表紙ページには、将来の特定の時間までのカウントダウン・タイマーが付いています。この機能は、プロモーションやイベントのページを作成する場合に特に便利です。

これらのブロックのコンテンツパネルでは、イベント開始時刻の日付、時刻、タイムゾーンを設定できます。

日付が正しく設定されていれば、表紙にタイマーが表示される。

表紙をフィーチャーしたブロックは、あらゆるデバイスに自動的に適応する優れたデザインの例として、試行錯誤を繰り返しています。しかし、時には要素を追加したり、カスタムカバーページを作成する必要があります。これはTildaのZero Block エディターを使って行うことができます。

多くのカバーブロックは、追加編集のためにZero Block に変換することができます。こ れを実行す る には、 ブ ロ ッ ク 設定へ進み、 下へスクロールして、 「Zero Block へ変換」ボタンをクリックします。

その後、表紙はZero Block に変換されます。フォーマットは正しく適応されます。すでに変更を加えた場合は保存されませんので、表紙を変換する際はご注意ください。