日本語のアフィリエイトブログでよく見る、吹き出しのブロックを挿入できるようにした
どうやったの?
このサイトは Gatsby で HTML を生成している。 ブログの記事は Markdown ファイルで書いていて、そのパーサーにremark のプラグインを使っている。 remark もプラグイン機構を持っていて、Markdown 記法を拡張して任意の HTML に変換できる
今回は吹き出しを挿入できるようにするにあたって、gatsby-remark-custom-blocksを利用した
下記のような Markdown を、
[[balloon]]
gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する
このような HTML に変換できる
[[balloonLeft]]
<div class="custom-block balloon">
<div class="custom-block-body">
<p>gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する</p>
</div>
</div>
あとは吹き出しっぽい見た目に体裁を整えただけ
なるほど、よさそう
完