インタラクティブなCanvaコーディングのデザインと素材を編集する
この記事は機械翻訳されました。誤りを見つけた場合はお知らせください。
クイズ、電卓、カウントダウンなどのインタラクティブ機能をデザインに作成するためにCanvaコードを使用したことがある場合は、Canvaで直接編集できます。
Canvaコードページまたは再利用可能な要素を編集する方法は次のとおりです。
ヒント：
インタラクティブなCanvaコード生成ページを編集する
Canva Codeを使用すると、Canva AIで直接編集とプロンプトを組み合わせて使用して、コンテンツとインタラクションの両方を簡単に絞り込むことができます。
- ほとんどのテキスト、テキスト書式、画像は、キャンバス上で直接編集できます。 レイアウトセクション、サイズ変更、およびスタイリングについては、Canva AIを使用して変更を行います。
- また、デザインを直接プレイして操作することで、オーディエンスと同じようにページを体験できるため、インタラクションやフローをリアルタイムでテストできます。 クリックすると、編集中のアイテムの選択が解除され、ボタンやフィールドが表示されます。
注意：レスポンシブ構造のため、すべてのデザイン要素を直接編集できるわけではありません。 編集したいが選択できない素材がある場合は、Canva AIタブを使用して変更を説明し、プロンプトを送信します。
- エディターで、編集するページを選択します。
- すべてのデザイン要素を直接編集できる場合は、以下の手順に従います。
- サポートされているテキストを選択して編集する
- ツールバーを使用して、フォント、カラー、スタイリングを調整する
- レイアウトセクションのサイズと位置を変更する
- 希望の方法で直接編集できない場合は、選択して次の手順に従ってください。
- ツールバーで、[Canva AI]を選択します。
- 変更点を説明してください。 たとえば、「チャートをダッシュボードに切り替える」や「ラベルを画像に変更」などです。
- また、Canva AIにページ全体を絞り込むよう依頼することもできます。
- デザインのコードをコピーするには、[コード]、[コードをコピー]の順に選択します。
- デザイン内のメディアを、素材からの写真とグラフィック、またはアップロードからの自分のコンテンツに置き換えることができます。 ドラッグアンドドロップして画像を直接置き換え、ツールバーから[置き換え]をタップします。
- Canva AIを使用してプロンプトを表示する場合は、「デザインをこのようなスタイルに更新」など、プロンプトで参照するためにアップロードを添付することができます。
- アップロードを添付して、デザインに直接埋め込むこともできます。たとえば、「デザインにこのロゴを使用する」などです。
- 選択すると、ページが削除され、新しいデザインが作成されます。
- 「すべてのデザインでこれを変更する」プロンプトは、コードデザインには適用されません。 一度に1ページにAIの変更が適用されます。 複数のデザインにわたる一括更新には対応していません。
- AIの更新は、現在編集中のページにのみ適用されます。 変更は他のコードページには引き継がれません。
- 各ページには独自のAIチャット履歴があります。
インタラクティブな素材を編集する
- Canvaコード生成要素を含むデザインを開きます。
- インタラクティブ要素をクリックして選択します。
- ツールバーで[編集]を選択します。 [編集]パネルが開き、次のことができます。
- タイトルとサブタイトルを追加または変更します。
- トグルスイッチを使用して、エクスポートボタン、検索バー、タグフィルタを表示します。 注意：編集パネルのオプションは、Canvaコードが生成したものによって異なる場合があります。 [エクスポート]、[共有]、[タグフィルター]などのボタンが常に使用できるとは限りません。
- フォントと色を編集するには：
- ツールバーでカラータイルを選択し、カラーパネルを開きます。
- カラーパネルで、希望する色を選択します。 背景とボタンの色が自動的に調整されます。
- ドロップダウンメニューからフォント（ブランドキットフォントを含む）を選択して、インタラクティブ素材全体に適用します。
- ツールバーコントロールを使用して、フォントサイズを増減することもできます。
- ビジュアルエフェクトを追加するには、[アニメーション]ボタンを選択します。
- [位置]ボタンを選択して、[配置とレイヤー]パネルを開きます。 デザインの他の素材と一緒に、Canvaコードで生成されたインタラクティブ素材の配置やレイヤーを調整します。
ホームページでCanvaコーディングが見つかりませんか？ Canvaコーディングのアクセス制限について詳しくは、こちらをご覧ください。
次のステップ： Canvaコーディングウェブサイトの公開と管理
お役に立ちましたか？
高評価
低評価