ここからスタート

はじめに

Coin Xテンプレートをご購入いただきありがとうございます。この簡単なガイドでは、Coin X Webflow テンプレートから基本的な要素（色、フォント、CMS コンテンツなど）を編集する方法について、すべての基本を説明します。

Webflowにあまり慣れていない方は、Webflow UniversityのWebflow 101 Crash Courseを受講されることを強くお勧めします。

スタイリング

テンプレートのスタイリングから始めよう。

カラー

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

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

フォント

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

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

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

グラフィック＆アイコン

テンプレート内のいくつかのアイコンやグラフィックは通常の画像やグラフィックなので、すべての色を更新しても、これらの色はテンプレートの色のままであることに気づくでしょう。

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

ページの編集

それでは、ウェブサイトページを編集するための次のステップに進みましょう。通常、編集するコンテンツには以下の2種類があります。

静的コンテンツ

静的コンテンツとは、CMSベースではないすべてのコンテンツのことで、動的ではないことを意味する（例えばブログ記事のように）。

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

このタイプのコンテンツを編集したい場合は、ダブルクリックするだけで、その場で直接入力することができる。

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

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

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

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

また、完全に自動生成されたCMSページ（例えば、ブログ記事）を編集したい場合は、左サイドバーのページセクションのすべてのページの下部に、編集可能なページがあります。

商品（eコマース）

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

左サイドバーのナビゲーターでも紫色で表示され、クリックしたりカーソルを合わせたりすると紫色のボーダーが表示されるので、CMSコンテンツと同様の方法でeコマースコンテンツを識別することができます。

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

また、自動生成された商品のeコマースページを編集したい場合は、CMSコレクションページのすぐ上にある全ページの一番下に、編集可能なページがあります。

便利なメモ

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

相互作用

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

この小さな相互作用アイコンをクリックすると、この要素の右サイドバーの相互作用タブが開き、そこで相互作用を編集できます。

モバイル・タブレットビュー

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

しかし、テンプレートをより深くカスタマイズしたり、クラスを編集したり、新しいセクションを作成したりする場合は、常にモバイルやタブレットのビューを編集して、すべてが完璧に見えるようにすることをお勧めします。

メタタイトル、説明文、注目画像の編集

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

ページごとに変更することが重要です。

バックアップ

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

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

コイン X ウェブフロー テンプレート サポート

上記のように、Coin Xはベストプラクティスを用いてWebflow上で構築されているため、テンプレートの編集やカスタマイズが非常に簡単です。

しかし、もし何か問題を見つけたり、助けが必要だったり、ただ挨拶がしたいだけだったりしたら、遠慮なく次のアドレスまでメールを送ってほしい。 [メールにてご連絡ください。］- 喜んでお手伝いさせていただきます。

カスタムデザイン＆開発

一方、もしあなたがCoin Xのユニークでパーソナライズされたバージョン、またはWebflow上でゼロからデザイン＆開発された素晴らしいウェブサイトを構築するための助けをお探しでしたら、私たちのWebflowデザイン＆開発エージェンシーにお気軽にご連絡ください。Coin X Webflow Templateの素晴らしいチームがお手伝いいたします。