網頁中嵌入 Canva 簡報
Canva 簡報 ( Canva presentation ) 是一個非常好用的線上簡報應用程式，除了可以運用 Canva 裡提供的各種樣板，更可以分享到各個平台進行觀看，這篇教學會介紹如何透過 HTML 的實作，將 Canva 簡報加到網頁中。
將 Canva 簡報發布到網路
登入 Canva 之後後前往自己的專案，開啟要分享的 Canva 簡報，點擊右上角的「分享」。
點擊後開啟分享選單後，點擊「顯示更多」。
展開更多選單後，點擊「嵌入」。
嵌入的功能會將 Canva 簡報設為「公開檢視」，確認後點擊「嵌入」
完成後會出現嵌入的 HTML 程式碼和網址，點擊複製 HTML 程式碼。
嵌入 Canva 簡報
複製 HTML 程式碼之後，貼到網頁中的 <body> 裡，執行後就會看見 Canva 簡報出現在網頁中。
<div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;">
<iframe loading="lazy" style="position: absolute; width: 100%; height: 100%; top: 0; left: 0; border: none; padding: 0;margin: 0;"
src="https://www.canva.com/design/DAFw6l_Byv4/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
</div>
oxxo 設計的 <a href="https://www.canva.com/design/DAFw6l_Byv4/view?utm_content=DAFw6l_Byv4&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Page 1</a>
修改嵌入的 Canva 簡報 HTML
觀察嵌入的 Canva 簡報 HTML，可以發現主要的 <iframe> 放在 <div> 裡，因此如果不想要使用 Canva 預設的樣式，可以單純取出 <iframe>，並修改 style，就能增加嵌入 Canva 簡報的彈性，此外，如果不需要連結資訊，只要移除 <div> 的下方額外的連結資訊即可，下方的範例會使用註解的方法，隱藏將不需要的部分，並移除 <iframe> 原本的樣式，使用其他樣式取代。
<style>
iframe{
width:300px;
height:200px;
border:1px solid #000;
}
</style>
<!-- <div style="position: relative; width: 100%; height: 0; padding-top: 56.2500%;
padding-bottom: 0; box-shadow: 0 2px 8px 0 rgba(63,69,81,0.16); margin-top: 1.6em; margin-bottom: 0.9em; overflow: hidden;
border-radius: 8px; will-change: transform;"> -->
<iframe loading="lazy" src="https://www.canva.com/design/DAFw6l_Byv4/view?embed" allowfullscreen="allowfullscreen" allow="fullscreen">
</iframe>
<!-- </div>
oxxo 設計的 <a href="https://www.canva.com/design/DAFw6l_Byv4/view?utm_content=DAFw6l_Byv4&utm_campaign=designshare&utm_medium=embeds&utm_source=link" target="_blank" rel="noopener">Page 1</a> -->
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～