Bloggerの画像張付けとMarkdown Hereの共存

Markdown Hereと、Bloggerの投稿画面にある画像の貼り付けツール（これ）

画像の貼り付けツール

どうも相性がよろしくない。使い勝手が悪い。

たとえば…

• 画像のセンタリングが効かない
• たまに Markdown Here の書式が崩れた際、プレーンテキストでエディタに貼り直すと画像が消える
• 説明を追加するとテーブルが挿入され、MDHのテーブルのCSSが適用されてしまう

試行錯誤の結果、以下のとおりにすると、具合がよい模様。

---

1. Bloggerから普通に画像を貼り付ける

上記のツールバーから、まずは、普通に画像を貼り付ける。

2. HTML画面で画像部分のHTMLをコピー

次に、エディタをHTMLに切り替えて内容を確認すると

HTMLでの編集画面

こんなコードが挿入されている。

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttK4RvZgkvEYBMemayiEUwHmwBodR2ye3dcCXjQtDaW8OOjxcmGADiwrMMP2Ii23XHHNLB43o0kzvbPOHKGnVCO1o1Gg7XErHb3tgES2QBBgLzj-p-87k5zTnqn9IeMGPGs628_wcZyU-/s1600/image_tool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttK4RvZgkvEYBMemayiEUwHmwBodR2ye3dcCXjQtDaW8OOjxcmGADiwrMMP2Ii23XHHNLB43o0kzvbPOHKGnVCO1o1Gg7XErHb3tgES2QBBgLzj-p-87k5zTnqn9IeMGPGs628_wcZyU-/s1600/image_tool.png" height="20" width="320" /></a></div>

この部分をコピーして、普段のプレーンテキストの画面の、元画像の下に貼り付ける。

Markdown Hereは、この<div>も<a>も<img>も、ありがたいことに生のまま扱ってくれる様子。

3. 元の画像を削除

プレーンテキストの方の画面では、元になった画像と、下に貼り付けた <div class="separator"... から始まるHTMLコードと、2つの画像が張られている。

元となった画像は、もういらないので、右クリックしてメニューを出して削除する。
（一応安全を見て、挿入したツールに削除させている）

元画像の削除

これで、画像貼付けのHTMLスニペットが、Markdown Hereの管理下になった。

4. 画像タイトルを追加してMDH切り替え

画像のタイトルは、</a>の前後に、<br />付きで追加できる。こんな感じ。

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttK4RvZgkvEYBMemayiEUwHmwBodR2ye3dcCXjQtDaW8OOjxcmGADiwrMMP2Ii23XHHNLB43o0kzvbPOHKGnVCO1o1Gg7XErHb3tgES2QBBgLzj-p-87k5zTnqn9IeMGPGs628_wcZyU-/s1600/image_tool.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjttK4RvZgkvEYBMemayiEUwHmwBodR2ye3dcCXjQtDaW8OOjxcmGADiwrMMP2Ii23XHHNLB43o0kzvbPOHKGnVCO1o1Gg7XErHb3tgES2QBBgLzj-p-87k5zTnqn9IeMGPGs628_wcZyU-/s1600/image_tool.png" height="20" width="320" /><br />画像の貼り付けツール</a></div>

最後に、”Ctrl-Alt-M” で文字修飾を有効し、投稿をセーブすればOK。

以上、メモ終わり。

​