旧エディター風の画像挿入

クラシックエディター:テキストモードで記事を書くことに慣れてしまっていて、ブロックエディター:コードエディターで直接画像を挿入出来ないことがネックだったのですが、解決法を見つけたので紹介します。

下書きサンプル

今もそうですが、普段下図のようにPC用エディター(CotEditor 等)で下書きをしています。
完成した下書きは、コピーします。

 

ブロック・コード へ ペースト

コピーした全文を コードエディター の 本文エリアに ペースト(張り付け) します。

 

ブロック・ビジュアル

(1) ビジュアルエディターに切り替えます。
(2) 画像挿入位置の印の文字列を選択・反転します。この時、画像名由来の文字列なら文字列をコピーしておきます。
(3) メディアを追加ボタンをクリックします。

 

メディアを追加 画面

初めて使用する画像なら、画像アイコンをドラッグします。
アップ済みの画像の場合は、ピンク枠に文字列を入れると絞り込みできます。
画像のサムネイルをクリックして、投稿に挿入ボタンをクリックします。

 
画像が挿入されました。他にも画像を挿入する場合は同様の手順です。

 

表示サンプル

下はプレビューサンプルです。先ほどの完成のまま更新・プレビューしたものが左側です。
右側は、画像と次の見出しの間にスペースを入れています。

 

スペースを入れる場合

再度 コードエディター に切り替えて、画像と見出しの間(スペースを入れたい位置)に『スペースタグ』を入れます。
スペースタグ: 

よく使うタグはPCのユーザー辞書に登録しておくと便利です。
すぺえ: 
いめ:<img src=" " alt="" width="" height="" />