吹き出しの体裁で段落を挿入できるようにした

2020/11/29

[[balloonLeft]] | 日本語のアフィリエイトブログでよく見る、吹き出しのブロックを挿入できるようにした

[[balloonRight]] | どうやったの?

[[balloonLeft]] | このサイトは Gatsby で HTML を生成している。 | ブログの記事は Markdown ファイルで書いていて、そのパーサーにremark のプラグインを使っている。 | remark もプラグイン機構を持っていて、Markdown 記法を拡張して任意の HTML に変換できる

[[balloonLeftNoAvatar]] | 今回は吹き出しを挿入できるようにするにあたって、gatsby-remark-custom-blocksを利用した

[[balloonLeftNoAvatar]] | 下記のような Markdown を、 | | [[balloon]] | gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する |

[[balloonLeftNoAvatar]] | このような HTML に変換できる | | [[balloonLeft]] | <div class="custom-block balloon"> | <div class="custom-block-body"> | <p>gatsby-remark-custom-blocks で任意のスタイルのブロックを追加する</p> | </div> | </div> | | あとは吹き出しっぽい見た目に体裁を整えただけ

[[balloonRight]] | なるほど、よさそう

[[balloonLeft]] | 完


morishitter

フリーランスのデザイナー。デジタルプロダクトのUIデザインを中心に、ブランディングからユーザー体験設計、ビジュアルデザインをおこなう。

© 2021, Masaaki Morishita