こいつらいつ使うん埋め込み集

2024 / 5 / 21

ブログ内に埋め込むことができるコンテンツたちの代表例をまとめました

#tips #Markdown

いつ使うのか分かりませんが、こんなもの埋め込めますよというのをリストアップします。
基本的にはHTMLに埋め込めるものは使えるようです。

Web サイト見出し「Web サイト」

<iframe src="https://www.takahashi.qse.tohoku.ac.jp" class="w-full"></iframe>

Google Map見出し「Google Map」

<iframe
class="aspect-[16/9]" frameborder="0" title="map"
marginheight="0" marginwidth="0" scrolling="no"
src="https://www.google.com/maps/embed?pb=!1m28!1m12!1m3!1d2220.7717857620264!2d140.836551948494!3d38.25521785690698!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m13!3e3!4m5!1s0x5f8a28567b9e0203%3A0x966a44e822756a66!2z6Z2S6JGJ5bGx!3m2!1d38.255548!2d140.83552559999998!4m5!1s0x5f8a28570c44e331%3A0x856877930a591764!2z57eP5ZCI56CU56m25qOf!3m2!1d38.2545539!2d140.8394304!5e0!3m2!1sja!2sjp!4v1701865600982!5m2!1sja!2sjp"
width="100%" allowfullscreen="" oading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>

CodePen見出し「CodePen」

<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="mdYPywN" data-pen-title="Untitled" data-user="Futty93" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/Futty93/pen/mdYPywN">
  Untitled</a> by Futty93 (<a href="https://codepen.io/Futty93">@Futty93</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

See the Pen Untitled by Futty93 (@Futty93) on CodePen.

Asciinema見出し「Asciinema」

<script id="asciicast-7592" src="https://asciinema.org/a/7592.js" async></script>

Figma見出し「Figma」

<iframe class="aspect-[16/9]" style="border: 1px solid rgba(0, 0, 0, 0.1);" height="auto" width="100%"
src="https://www.figma.com/embed?embed_host=astra&url=https://www.figma.com/file/LKQ4FJ4bTnCSjedbRpk931/Sample-File" allowfullscreen >
</iframe>

Speaker Deck見出し「Speaker Deck」

<iframe
class="speakerdeck-iframe" frameborder="0"
src="https://speakerdeck.com/player/cd6be68a4e2145068d58808c51318a1a"
title="使いにくいヒューマンインターフェースの館" allowfullscreen="true"
style="border: 0px; background: padding-box padding-box rgba(0, 0, 0, 0.1); margin: 0px; padding: 0px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 40px; width: 100%; height: auto; aspect-ratio: 16 / 9;" data-ratio="1.7777777777777777">
</iframe>

SlideShare見出し「SlideShare」

<iframe class="aspect-[16/9]" src="//www.slideshare.net/slideshow/embed_code/key/B6SfqHFrWhihpr"
width="100%" height="auto" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"
style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" loading="lazy" allowfullscreen>
</iframe>

Google Slide見出し「Google Slide」

<iframe
class="aspect-[16/9]"
src="https://docs.google.com/presentation/d/e/2PACX-1vT6_5Wrpyx9_rwW2CR4EvwzSrpK1K-8wM9bPScv8KIbbIDVTUAEk7T2ZQQWtqDlhJyyHapESHmbFVTu/embed?start=false&loop=false&delayms=3000"
frameborder="0" width="100%" height="auto" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true">
</iframe>

Docswell見出し「Docswell」

<script
async class="docswell-embed" src="https://www.docswell.com/assets/libs/docswell-embed/docswell-embed.min.js"
data-src="https://www.docswell.com/slide/LK7J5V/embed" data-aspect="0.5625">
</script>
<div class="docswell-link">
  <a href="https://www.docswell.com/s/ku-suke/LK7J5V-hello-docswell">Docswell（ドクセル）はじめました by @ku-suke</a>
</div>
Docswell（ドクセル）はじめました by @ku-suke

Youtube見出し「Youtube」

<iframe
class="h-full w-full aspect-[16/9]"
src="https://www.youtube.com/embed/nue-bLFGKK8?si=f07CP0PP8KIReCMn" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen>
</iframe>