Blogger HTMLビューを見やすくする
Bloggerで作成ビューでは、気にはならないことなのですが、HTMLビューとなると、大変読みにくくなります。例えば、このように
フォントが小さい
改行が全くされていない
ためです。例えば、この投稿では、作成ビューは次のようですが、
HTMLビューでは、最初の画像のようになります。
ジョークかとも思えるほどです。分かりにくいですね。（多分、できれば触ってほしくないから、分かりにくくしているのでしょう） 慣れていない頃は、本当に泣きました。とりわけ、老眼には酷です。
フォントサイズについては、Cntrl と ＋ を押すことで表示を拡大して、何とかしのげます。でも、本当は、HTML編集中のフォントサイズの設定ができるようになればいいなと、思います。+
ちなみに、Cntrl と ＋ で拡大した後、どうやって元に戻すのか？
＞＜ を ＞改行＜ に全て置換する
HTMLビューで、全て選択、コピーして、テキストエディタに貼り付けました。そこで、
>< を >\n<
に、全置換してみました。置換したものを、全て選択、コピーして、ここに戻り、HTMLビューで、全て選択、貼り付けます。
すると、次のようになりました。
ぐんと読みやすくなりました。作成ビューに戻って、異常がないことが、確認できました。
なお、このような（また、以下のような）置換をする場合は、
現在のコードをテキストエディタなどに、別に保管しておきましょう。
何かを間違えて、元に戻れなくなると、本当に取り返しのつかないことになってしまいます。私自身、それに近いことがありました。
また、置換したコードを貼り付けた後は、
必ず、すぐに、作成ビューに移って、問題ないことを確認してください。
文法に問題があると、警告が出ます。「キャンセル」ボタンを押して、問題点を直していきます。
テキストエディタでの置換の仕方
テキストエディタには、いつも、TeraPadにお世話になっております。（ウインドウズ付属のメモ帳ではできません）
オプションの３行目にチェックを入れておく必要があります。
しかし
またまたタグの強引な割り込みで、読みにくくなったら
作成ビューで編集を続けていると、改行を入れた部分はそのままなのですが、新しいタグが、また強引に割り込んでいます。
HTMLビューを再度、整理したいと思ったら、同じように、すべて置換すればOKです。
サクラエディタを使って、マクロという手もあり
Bloggerで、HTMLコードをコピーした後は、サクラエディタでマクロを実行して、改行済みのコードをコピーする、という所まで、一度にやってしまう、という手もあります。
（コードを編集するのも、Blogger上でやるのよりは、楽ですから、そのままサクラエディタで編集して、その後でコピーして、Bloggerに貼り付ける、という手もあります。）
サクラエディタには、キーマクロの記録、という機能があります。それを使うと、Bloggerでコードをコピーした後、サクラエディタに移動して、
- すべてを選択
- 貼り付け
- すべて置換
- すべてを選択
- コピー
を記録して、保存しますと、
//キーボードマクロのファイルSelectAll(0); // すべて選択Paste(0); // 貼り付けReplaceAll('><', '>\\n<', 190); // すべて置換ReDraw(0); // 再描画SelectAll(0); // すべて選択Copy(0); // コピー
のようなファイルが、マクロ置き場に作られます。 このマクロを、共通設定で、呼び出せるように、登録しておきます。登録できたら、その後は、ツール→登録済みマクロ、で呼び出せます。
Bloggerでコードをコピーして、サクラエディタに貼り付け、まず、適当な名前で保存しておくと、万が一の時に、元に戻れます。
その後で、マクロを実行、そのままBloggerに戻って、すべてを選択、貼り付け、で読みやすいコードに変わります。作成ビューに戻って、エラーがないことを確認します。
もし、エラーがあれば、警告が出ますので、「キャンセル」ボタンを押して、問題点を直していきます。Bloggerの元に戻すメニューで、元のコードに戻れます。
まったく楽ちんです。
サクラエディタのマクロについては、
が、大変分かりやすいので、訪問してみてください。
WEBで簡単に置換できるようにしました
しかし、エディターを度々開いて置換、というのも、何回かやっていると、面倒くさくなってきます。
WEB上で、ブラウザのまま、タブの切り替えだけで、この置換作業をやれたら良い、と思って、JavaScriptを使ったページを作りました。
です。ご利用ください。