Featured image of post 埋め込みテスト

埋め込みテスト

記事書くのにあたっていろんなものを貼り付けると思うので動作確認も兼ねて色々外部サイトを埋め込んでみるテスト

URL

https://seeds-9.com/

https://blog.seeds-9.com/post/hello-world/

OGPあっても出ない

Misskey Notes

https://a19n.seeds-9.com/notes/9teyk5ygdv8u001j

Missbed使用

Missbedを使うとTLやノートを埋め込めるらしい。フォントがちょっとおかしいのと、縦幅をよしなにしてくれないので使い方が難しい。

Youtube

https://www.youtube.com/watch?v=qU9QJGhGXpY

Youtubeはショートコードが既にある。スタイルがちゃんと当てられていてコンテンツ幅に応じて拡縮するので、こちらを使えということだろう。

Bandcamp

Album

https://dccd.bandcamp.com/album/punctuated-equilibruim

横型

横型(トラックリストあり)

縦型

Song

https://dccd.bandcamp.com/track/multiverse

アルバムとの差が分かりづらすぎる

Soundcloud

画像がガビガビなのはこのサイズの素材しかもう手元に残っていなかったからなので、Soundcloudくんのせいではない。

https://soundcloud.com/czk/battery-music-04

Czk · Battery Music #04

Spotify

Song

https://open.spotify.com/intl-ja/track/2Mu8Vqlv8BzH62cbkuJijX?si=b060194a1e6d488b

Album

https://open.spotify.com/intl-ja/album/3zEZr24E4kHUaE74lVzoPU?si=bIyxGFORSmqWGTFqni1zJQ

ひとまず

URL貼るだけではそのままリンクになるだけだった。そりゃそうか。他は自分でショートコード作れば、ということらしい。iframe貼るのが面倒過ぎるようだったら考えるか。作ってもいいけどテーマによって意匠が異なるから全然汎用性ないなってなるとブログのネタにもならないから今のところはあまり食指は動かない。

とはいえiframeで横幅がピクセル指定のコードを貼り付けると当然ながらレスポンシブに対応しないのでモバイル表示時とかに死ぬ。そのへんをケアするとなると、CSSだけでも用意しないと駄目かもしれない。

https://gohugo.io/templates/shortcode-templates/

MisskeyのノートはURL貼るだけで勝手にパースしてショートコード展開する、みたいな挙動だと思うけどあれは楽でよかったな。

Photo by: Pixabay

Licensed under CC BY-NC-SA 4.0