ここからスタート

スタイリング

さっそくテンプレートのスタイリングに取りかかりましょう。

カラーズ

Web3 Xテンプレートは、Color Swatchesを使用して構築されており、サイト全体で更新される色見本を簡単に編集することができます。

これを行うには、右サイドバーの「スタイル」タブを開き、タイポグラフィセクションの「色」までスクロールし、色をクリックすると、すべての色見本が表示され、サイト全体で必要な色に更新されるように編集する必要があります。

フォント

Web3 Xテンプレートでは、横方向に1つのフォントを使用し、Body（全ページ）セレクタに設定されているため、ワンクリックで全サイトのフォントを簡単に更新することができます。

どのページでも、スタイルタブの右上にあるオレンジ色のセレクタオプションをクリックし、「ボディ（全ページ）」を選択するだけです。この状態で、下の「タイポグラフィ」セクションに移動し、フォントをあなたのビジネスブランドのための任意のフォントに変更することができます。

Webflowで利用できないカスタムフォントやプレミアムフォントが必要な場合は、「プロジェクト設定」→「フォント」でカスタムフォントをアップロードしたり、Adobe Fontsアカウントに接続することができます。

グラフィック＆アイコンについて

テンプレート内の一部のアイコンやグラフィックは通常の画像/グラフィックであるため、すべての色を更新した場合、これらの色はテンプレートの色のままであることに注意してください。

これは、これらのグラフィックが画像（PNG、JPG、SVGなど）であるため、WebflowのCSS（スタイリング）を更新しても影響がないために起こります。もし、このグラフィックを再利用したい場合は、ダウンロードして、デザインソフト（Photoshop、Illustrator、Sketch、Figmaなど）を使って編集するか、ブランドに合った独自の画像やグラフィックを直接アップロードすることが可能です。

静的ページ

静的コンテンツとは、CMSを使用していない、つまり動的でないすべてのコンテンツのことです（例えば、ブログ記事のようなものです）。

左サイドバーのナビゲーターではグレーで表示され、クリックやカーソルを合わせると青い枠が表示されるので、これらのコンテンツはすべて簡単に識別することができます。

このタイプのコンテンツを編集したい場合は、ダブルクリックすれば、その場で直接入力ができるようになります。

ダイナミックコンテンツ（CMS）

ダイナミックコンテンツは、左サイドバーのCMSセクション（ページアイコンのすぐ下）に追加されたコンテンツに基づいて自動生成される、動的なコンテンツです。

左サイドバーのナビゲーターでは紫色で表示され、クリックしたりカーソルを合わせると紫色の枠が表示されるので、すべて簡単に識別できます。

このコンテンツは、CMSセクションで直接更新する必要があります。これは、常に更新する必要がある可能性が高いため、非常に簡単に更新できるようにするためのものです（例えば、新しいブログ記事を追加する場合など）。

また、完全に自動生成されたCMSページ（例えば、Blog Post）を編集したい場合は、左サイドバーのPagesセクションの全ページの下部に、このページが編集可能であることが表示されます。

商品（eコマース）

製品またはeコマースコンテンツは、CMSのダイナミックコンテンツと同様の機能を持ちますが、これはeコマース製品に特化したものです。

Eコマースコンテンツも、左サイドバーのナビゲーターで紫色で表示され、クリックしたりカーソルを合わせたりすると紫色の枠がつくので、CMSコンテンツと同様に見分けることができます。

このコンテンツは、左サイドバーのeCommerceタブで直接更新する必要があります。これは、常に更新する必要がある可能性が高いため、非常に簡単に更新できるようにするためのものです（例えば、商品の価格を変更したり、在庫を追加したりする場合など）。

また、自動生成された商品のeコマースページを編集したい場合は、全ページのほぼ最下部、CMSコレクションページのすぐ上に、このページが編集可能であることがわかります。

お役立ちメモ

ここでは、基本的な説明に加えて、よくある質問から、いくつかのヒントとハウツーを紹介します。

インタラクション

テンプレートのインタラクションを編集したい場合（表示されるエフェクトを削除したい場合など）、インタラクションを持つ要素には、左サイドバーのナビゲータに小さなインタラクションアイコン（小さな雷）が表示されているので、簡単に識別することができます。

この小さな「インタラクション」アイコンをクリックすると、この要素の右サイドバーの「インタラクション」タブが開き、インタラクションを編集することができます。

モバイルまたはタブレットでの表示

変更を加えるたびに（例えば、新しいセクションデザインを作成する）、ビューポートのトップナビゲーションに移動して、タブレットとモバイルでどのように見えるかを確認するのは良い習慣です。

テンプレートのセクションを編集してテキストや画像を更新するだけで、テンプレートのクラスを消さない場合は必要ありませんが、テンプレートをより深くカスタマイズしたり、クラスを編集したり、新しいセクションを作成する場合は、常にモバイルやタブレットのビューを編集して、すべてが完璧に見えることを確認するのがよいでしょう。

Meta Title、Desc、Featured Imageの編集

FacebookやTwitterなどでウェブサイトを共有する際に表示されるタイトル、説明、画像をカスタマイズしたい場合は、左サイドバーの「ページ」セクションで、カスタマイズしたいページの小さな設定アイコンをクリックすると、これらの設定がすべて表示されるようになっています。

ページ単位で変更することが重要ですので、ご注意ください。

バックアップ

何か問題が発生した場合、例えば、ウェブサイトの行き先が気に入らない場合、テンプレートの見栄えを良くするために必要な重要なクラスを削除した場合、または何らかの理由で以前のバージョンに戻りたい場合、いつでも「バックアップ」セクションにアクセスすることができます。

左サイドバーの「設定」セクションで見つけることができ、そして、ちょうどすべての自動または手動バックアップを見ることができます。古いバックアップへの復元は、クリックするだけです。