kivantium活動日記

プログラムを使っていろいろやります

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

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

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

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

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

widthheightは明示的に指定しないとデザインが崩れました。最適な値はよく分かりませんが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>

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

広告コーナー