はてなブログにAdventarのAdvent Calendarを埋め込む

現在開催中の創作+機械学習 Advent Calendar 2021で、AdventarのAdvent Calendarを埋め込んでいる人がいたのでやり方を調べてみました。

調べてみるとこのAdventarの埋め込み機能はnote向けに実装されている機能のようでした。

• noteに「#アドベントカレンダー」を埋め込めるようになりました！12/25までに記事を書いて、みんなで今年の創作を締めくくりませんか？｜note公式｜note
• テキスト記事に埋め込みできるサービス一覧 – noteヘルプセンター
• embed機能 開発ガイドライン – noteヘルプセンター

はてなブログはこの埋め込みに対応していないので自力でこの機能を再現する必要があります。 noteが生成したHTMLを読んだところ、次のHTMLを手動で入力すればはてなブログでも同様の埋め込みが実現できることが分かりました。

<iframe src="https://adventar.org/calendars/<カレンダーID>/embed" width="xxx" height="xxx" frameborder="0" loading="lazy"></iframe>

widthとheightは明示的に指定しないとデザインが崩れました。最適な値はよく分かりませんがnoteでは620x362で表示されていたので同じ値を設定しておきます。

創作+機械学習 Advent Calendar 2021を例にすると次のようになります。

<iframe src="https://adventar.org/calendars/6442/embed" width="620" height="362" frameborder="0" loading="lazy"></iframe>

親要素にtext-align: centerを指定すると中央揃えできます（<center>タグでもいいですが既に廃止されているので避けたほうが良いらしいです）

<div style="text-align: center">
<iframe src="https://adventar.org/calendars/6442/embed" width="620" height="362" frameborder="0" loading="lazy"></iframe>
</div>

より良い方法があれば教えてください。