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。
以上、メモ終わり。
コメントを投稿