きっかけ
markdown に画像をアップロードしても自由にクラスを指定できず細かい設定ができない!!!
解決策
markdown の情報を画像に render しているのはどうやらこの二つのプラグインのようだ。
gatsby-remark-images
gatsby-plugin-sharp
そのうち実際に html のコードに変換しているプラグインを見つける。gatsby のいいところは画像を自動で最適化してくれるところらしいが、このプラグインで最適化をしていそうだ。
gatsby-plugin-sharp
ではgatsby-config.js
で設定したものを元に<img>
タグにパラメータを返す。このプラグインが最適化をしている。
gatsby-remark-images
では![]()
のコードを読み込んで render してくれている。なのでこっちを書き換えれば、クラスを指定することができそうだ。
調べてみるとwrapperStyle
という option があり、そこで style の指定ができる。これを追加すれば、class を指定せずに済みそうだ。