StackEditでhtmlタグにstyle属性を埋め込んでexportすると, style属性が消えてしまいました.
解決方法を一言で
class属性を使い, cssでstyleを記述しましょう.
<style>
.icatch {
display: none;
}
</style>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" class="icatch" />
環境
- Web
エラー発生
私はブログを書くのにStackEditというウェブアプリを使っています.
今回, ブログを書くときにアイキャッチ画像を載せてみたいが, ブログ本文には表示させたくないと思い, 以下のようなimgタグをブログの冒頭に貼りました.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" style="display: none;" />
## スケジュール
...
しかし, StackEditからBloggerにexportすると, 画像がそのまま表示されてしまいました.
なぜ?と思い, Chrome DevTools で確認してみると, style属性が消えていました. どこいったの…?
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg"/>
## スケジュール
...
さらに原因を切りわけるため, StackEditからHTMLファイルをダウンロードしてみました.
すると, そのHTMLファイルでもstyle属性が消えていたので, StackEditがMarkdownからHTMLに変換するときに落とされているのだろうと当たりをつけました.
対処
色々Web上を調べた結果, コミュニティでHTML Stripping on Exportというディスカッションを見つけました.
どうやらXSS攻撃を防ぐために, StackEditでは変換のプログラムがstyle属性を省くそうです.
そのため, 解決策として, StackEdit の中の右メニューのTemplatesから, Templateを作ってそこにstyle属性を貼る方法が紹介されていました.
そのため, hide icatchという次のようなテンプレートを作成しました.
<!-- hide icatch -->
<style>
.icatch {
display: none;
}
</style>
{{{files.0.content.html}}}
本文では, HTMLタグの中にclass="icatch"を埋め込みます.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlnYK_utfa-5ciP4jCHcMVpSyiR7TDUksb5ghn3AH90jLeeaPfDoMkGpkAmFY4lSsWg9FaMxG9gN1b7J87j-w85P1Reixv8dhTEMd20wsKWNhCdsREkm7KFuvZYTW6AL3QtDX6vALZ_nC0/s640/2734951_m.jpg" class="icatch" />
## スケジュール
...
あとはexportする際にtemplateをhide icatchを選択し, exportすることでstyleが適用されました🎉
この方法だとclass属性を作れば良いので, Bloggerのテンプレートのヘッダーにあらかじめstyleを作っておき, StackEditではclass名のみを記述するという運用でもいいかもしれません.
ただ, 私はモノグサなのでこの方法をしばらく使っていきます.
