Canvaのデザインにメディアを「埋め込み」してWebサイトに掲載できる!

Canva初心者

CanvaのデザインにSNSのページや動画、マップを埋め込みしてブログに掲載できないかな?

Dr.オフィス

Canvaには「埋め込み」という機能をつかってデザインにさまざまなメディアを埋め込むことが可能だよ!
Canvaで埋め込みをしたデザインをWordPressのサイトに掲載するのもとても簡単だから、一緒にやってみよう!

Canvaには「埋め込み」というまだあまり知られていない機能があります。

デザインにInstagramやFacebookのページを埋め込めば、デザイン上で「いいね」や「コメント」をもらうこともできますし、画像が複数枚あるコンテンツならページをめくって画像の閲覧ができるなど、SNSのプラットフォーム外から閲覧が可能です。

またYouTubeやVimeoなどの動画やGoogleマップ、Twitterなどほかにもさまざまなメディアを簡単に埋め込みできるので、ブログや情報サイトのコンテンツをより高度でおしゃれに演出することができますよ!

Canvaでデザインにメディアを埋め込みウェブサイトに掲載する簡単ステップ

【Canvaのデザインにメディアを埋め込む】

  1. 編集画面左側の「もっと見る」を開き「埋め込み」をクリックする
  2. 「埋め込み」機能のエディターにデザインに埋め込みしたいメディアのリンクURLを記入し「デザインに追加」をクリック
  3. Canvaの機能をつかっておしゃれにデザインする

【メディアを埋め込みしたデザインをWordPressサイトに掲載する】

  1. 画面右上の「共有」をクリック
  2. 開いたタブの中の「もっと見る」をクリック
  3. 「埋め込み」を選択
  4. むらさき色の「埋め込み」ボタンをクリック
  5. 生成された「HTML埋め込みコード」をコピー
  6. WordPressのブロックエディターの「カスタムHTML」にコードをペーストする
Dr.オフィス

Canvaで作成したデザインをウェブ制作にも利用している私が、Canvaの知られざる「埋め込み」機能についてくわしく解説をしていくよ!

Canvaに埋め込みしたデザインは、もちろんCanvaのすべての機能をつかっておしゃれにデコレーションすることができます。

たとえばレシピの情報サイトを作っているのなら、Instagramのさまざまなアカウントから人気のあるレシピの投稿だけを集めてデザインに埋め込みをし掲載するなど、アイディア次第で便利に機能的につかうことが可能です!

Canvaには「埋め込み」機能以外にもまだあまり知られていない隠れた便利機能がたくさんあります。

さまざまなCanvaのつかえる技を»Canvaの便利な技を教えます!プロっぽくおしゃれに画像を編集をしよう!で紹介していますのでぜひ参考にしてください。

目次

Canvaの「埋め込み」機能で何を埋め込みできるの?

Canvaでどのようなメディアを埋め込みできるのかをこちらで紹介します。

動画系メディア

こちらはCanvaに埋め込み可能な動画やGIFアニメーションを扱うメディアです。

Canvaで埋め込み可能な動画系メディア
Canvaで埋め込み可能な動画系メディア
  • YouTube
  • Vimeo
  • TED
  • GIPHY
  • Gfycat

SNS

こちらはCanvaに埋め込み可能なSNS(ソーシャルネットワーク)を扱うメディアです。

Canvaで埋め込み可能なSNS
Canvaで埋め込み可能なSNS
  • Facebook
  • Instagram
  • Twitter
  • Tumblr
  • Pinterest
  • Flickr

音楽系メディア

こちらはCanvaに埋め込み可能な音楽を扱うメディアです。

Canvaで埋め込み可能な音楽系メディア
Canvaで埋め込み可能な音楽系メディア
  • Spotify
  • SoundCloud

その他

こちらはCanvaに埋め込み可能なマップやソースコードを扱うメディアです。

Canvaで埋め込み可能なその他のコンテンツ
Canvaで埋め込み可能なその他のコンテンツ
  • Google Maps
  • Typeform
  • CodePen

Canvaの「埋め込み」機能はどこ?

Canva初心者

ところで「埋め込み」機能ってどこにあるの?
Canvaの編集画面をパッと見ても見当たらないけど。

Dr.オフィス

Canvaの「埋め込み」機能は編集画面の「もっと見る」の中に隠れているんだ。

編集画面をパッと見ても「埋め込み」機能は見当たりません。

埋め込み機能を表示させるには以下の手順に従ってください。

「もっと見る」をクリック
「もっと見る」をクリック

Canvaの「埋め込み」機能を表示させるには、編集画面左側の「もっと見る」をクリックしましょう。

「埋め込み」をクリック
「埋め込み」をクリック

「もっと見る」のエディターを少し下にスクロールすると「メディアをインポート」という項目があり、その中に「埋め込み」機能があります。

「埋め込み」をクリックすると以下のようにエディターが表示されます。

「埋め込み」機能のエディター
「埋め込み」機能のエディター

画面左側のエディターの中にたくさんのメディアのアイコンが表示されています。

実際にこれらのコンテンツの埋め込みが可能なわけですが、試しに「Instagram」のアイコンをクリックしてみます。

「埋め込み」機能のエディターの各アイコンをクリックするとサンプルが表示される
「埋め込み」機能のエディターの各アイコンをクリックするとサンプルが表示される

するとこのように、CanvaのInstagramのページが表示されました。

これは「Instagramはこのような感じで表示されるよ」という意味のサンプルなので、実際のデザインに使用するものではありませんので、確認をしたら削除してしまいましょう。

Dr.オフィス

これでメディアをCanvaのデザインに埋め込みする準備はできたから、次は実際にInstagramの投稿ページをCanvaに挿入してみせるね!

埋め込み機能のつかい方

実際に「埋め込み」機能をつかってInstagramの投稿ページをサンプルにデザインに挿入し、埋め込み機能の使い方を説明していきます。

デザインに埋め込みをしたいページのURLをコピーする
デザインに埋め込みをしたいページのURLをコピーする

まずはCanvaに埋め込みをしたいInstagramのフィードを開きURLをコピーしましょう。

次にCanvaの「埋め込み」機能が表示された編集画面に戻ります。

「埋め込み」機能のエディターにURLをペーストし「デザインに追加」をクリック
「埋め込み」機能のエディターにURLをペーストし「デザインに追加」をクリック
  1. リンクマークのついたフィールドに先ほどコピーしたInstagramのページのURLをペーストする
  2. 「デザインに追加」をクリック

するとCanvaのデザイン編集画面の中にリンクとまったく同じInstagramのフィードが埋め込まれました!

Canvaの機能をつかって埋め込み画像をデザイン
Canvaの機能をつかって埋め込み画像をデザイン

あとはCanvaのデザイン機能をつかって埋め込まれたInstagramのフィードがおしゃれに見えるように編集しましょう。

Canvaのその他の編集機能については»【Canva】無料でおしゃれなデザインが作れるツール徹底解説!の記事で紹介しています。

Dr.オフィス

Canvaの「埋め込み」機能は無料版のCanvaでつかえるよ!
まだCanvaをもっていない人は無料でWeb版もスマホ版もCanvaアプリをインストールできるからぜひつかってみてね!

埋め込みをしたCanvaのデザインをウェブサイトの記事に掲載する方法

メディアを埋め込みしたデザインの作成ができたら、続いてウェブサイトに掲載する方法を紹介します。

以下の手順に従ってください。

「共有」の中の「もっと見る」をクリック
「共有」の中の「もっと見る」をクリック
  1. 編集画面右上の「共有」をクリック
  2. 開いたタブの一番下の「もっと見る」をクリック

するとタブが以下のように変化します。

「埋め込み」をクリック
「埋め込み」をクリック

タブの中から「埋め込み」を探しクリックしましょう。

すると編集画面右上に以下画面が表示されます。

「埋め込み」をクリック
「埋め込み」をクリック

むらさき色の「埋め込み」と書かれたボタンをクリックしてください。

すると以下のような埋め込みリンクが作成、表示されます。

「HTML埋め込みコード」をコピー
「HTML埋め込みコード」をコピー
  • HTML埋め込みコード
  • スマート埋め込みリンク

今回はサンプルとしてWordPressにCanvaで作成したメディアを埋め込んだデザインを掲載していきますので、「HTML埋め込みコード」を「コピー」します。

なお、「スマート埋め込みリンク」はHTMLコードをサポートしていないプラットフォームに使用してください。

以下はWordPressのブロックエディターの編集画面です。

WordPressのブロックエディターで「カスタムHTML」を選択
WordPressのブロックエディターで「カスタムHTML」を選択
  1. ブロックの「+」をクリック
  2. 検索欄に「HTML」と記入する
  3. タブに表示された「カスタムHTML」をクリック

すると以下のようにエディターの中にカスタムHTMLの記入欄が表示されます。

HTML埋め込みコードをペースト
HTML埋め込みコードをペースト

先ほどコピーした、Canvaで生成した「HTML埋め込みコード」をブロックエディターの中にペーストしましょう。

するとWordPressのブロックエディター内にHTMLコードが表示されます。

プレビューで埋め込みを確認
プレビューで埋め込みを確認

エディター上にはCanvaのメディアを埋め込みしたデザインは表示されませんので「プレビュー」でデザインがきちんと反映されているかどうかを確認しましょう。

Canvaで埋め込みをしたデザインをブログに掲載したときのサンプル画像
Canvaで埋め込みをしたデザインをブログに掲載したときのサンプル画像

こちらは実際のウェブサイトの記事の画面です。

きちんとCanvaで作成したInstagramを埋め込んだデザインが反映されました!

埋め込みされたメディアから実際に操作ができますので、きちんと作動するかを触って確かめてみてくださいね!

Canvaでさまざまなメディアを埋め込みしてウェブサイトに掲載できる!

Canvaの「埋め込み」機能をつかってCanvaにメディアを埋め込みおしゃれに装飾したデザインを、ウェブサイトに載せることができました!

埋め込みしたデザインから実際にSNSのフィードに「いいね」や「コメント」が付けられたり、動画を再生することもできてとても便利です。

またひとつのデザイン上に埋め込んだメディアに加え、テキストやグラフィック素材などCanvaの機能をつかってデコレーションができるので、閲覧者にとってとても親切でわかりやすいデザインができますね!

おさらい
  • 埋め込みをしたデザインからSNSや動画を見たり、音楽も試聴できるので各メディアの公式プラットフォーム外からでも閲覧者を増やせる
  • メディアを埋め込みしたデザインをウェブサイトに掲載するには「ダウンロード」ではなく「共有」で埋め込みコードを生成する
  • 埋め込んだメディアにCanvaの機能で装飾もできるので、ただメディアをのみを掲載するだけと比べてデザイン性も上がる

ぜひ、ウェブサイトを運営している方はCanvaの「埋め込み」機能をつかっておしゃれで便利なサイト構築に役立ててくださいね!

Canvaでは平面のデザインだけではなく、動画編集などのより高度なデザインを初心者でも簡単にすることができます。

Canvaで動画を編集する方法を»【Canva】動画を編集する方法を徹底解説!誰でも簡単にできる!の記事で紹介していますのでぜひご覧ください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次