2019年04月16日

Blogger の編集で pタグが消えてしまうので対策を考えてみた

Blogger のエディタは 作成HTML の2種類の方法で編集できるようになっていて、通常は 作成 の方でワープロ的に記事を書いていって、調整したいときに HTML でコードを編集するという使い方になると思います。
SC20190416152259.png


作成 で[Enter]キーで改行すると、初期設定では <br />タグが挿入され、オプションで「Enter キーを押して改行」を選ぶと <div>タグが挿入されます。
日本のブログサービスでも、改行は <br />タグか <div>タグのどちらかが挿入されるようになっています。


でも本来のHTMLタグの使い方としては、文章の一括り(段落)を <p> </p>タグで挟んで、その中で改行したいときに <br />タグで改行するものです。
<p> </p>タグで挟んだ文章と、次の<p> </p>タグで挟んだ文章との間は、自動的に1行分のスペースが開くので、<br />タグを2つ並べて空白行を入れることもありませんし、そういう使い方はよくないそうです。
(この記事も、上の「作成 で・・・」と「でも本来の・・・」の上の空白行は、<p>タグによるものです)


そこで、Blogger でも HTML の編集モードで <p>タグに変えていくのですが、出来栄えを確認しようと 作成 の編集モードに切り替えると、せっかく入れた <p>タグがすべて消えてしまうのです。
出来栄えの確認はプレビューでやって、作成 モードに切り替えないで[公開]ボタンをクリックしてしまえば <p>タグが消えることはないですが、うっかり 作成 モードに切り替えてしまうとやり直しというのは、つらいところです。


Blogger の <p>タグ消え対策に Open LIve Writer を使う


何年か前に Open LIve Writer の前身の Windows LIve Writer を使ったことがあって、[Enter]キーを押すと <p>タグが挿入されてしまい、行間が空きまくりになるのを思い出しました。
[Shift]+[Enter]で <br />タグの改行になるのですが、当時は <p>タグを使うものだということを知らなかったので、面倒くさくなって使うのをやめてしまいました。


この機能が Blogger の <p>タグ消え対策に、ピッタリのような気がします。
試しに Open LIve Writer を使ってみると、改行のし方は Windows LIve Writer と同じでした。
段落の途中で改行したいときは[Shift]+[Enter]で改行、段落の終わりは[Enter]で改行という使い方をすればいいことになります。
Blogger にも対応しています。


Open LIve Writer は、オフラインで記事を書いて、完成したらそのままクリック1つで投稿できるというものなので、編集途中でブラウザの操作を間違って書きかけの記事が消失ということもないですし、投降した記事は自分のパソコンにも残るので、記事のバックアップにもなります。
<p>タグ消え対策以外にも利点はあるので、おすすめかなと思います。


Open LIve Writer のインストールは、↓ こちらの記事を参考にしてみてください。
Open Live Writer のダウンロード→インストール→日本語化の手順


私も使い始めたばかりですが、1点残念なところは、ソース(HTML)の編集モードが改行されていなくて、見にくいところです。
SC20190416170701.png
HTMLを編集したいときは、該当か所だけでも自分で改行して見やすくしてから、編集することになりそうです。
今のバージョンが 0.6.2.0(まだ Ver.1 未満)なので、今後のアップデートに期待でしょうか。



にほんブログ村 IT技術ブログ フリーソフトへ
この記事へのコメント
コメントを書く

お名前: 必須項目

メールアドレス:


ホームページアドレス:

コメント: 必須項目

この記事へのトラックバックURL
http://fanblogs.jp/tb/8729888

※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック

ブログ内を検索
ファン
最新記事
カテゴリー
最新コメント
ツイッター

広告設置のお知らせ

当ブログは、Amazonアソシエイト・プログラムの参加者です。
(Amazonアソシエイト・プログラムは、amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムです)
記事内で使用している画像の一部は、Amazonの商品画像を使用しており、その商品へのリンクになっています。

また、その他のアフィリエイト・サービス・プロバイダなどの広告も表示しています。
当ブログをご覧の際は、cookie を有効にし、Webブラウザの広告ブロック機能を使用しないで、ご覧いただきますようにお願いいたします。

プロフィール
ぽん太親父さんの画像
ぽん太親父
建築関係の小さな事務所で、他に適当な人間がいないことから、コンピューター関連の担当をさせられています。 趣味でけっこう長い間パソコンを使っていますが、ちゃんと勉強していないので、うまくいかなくて冷や汗をかくこともしばしば。
プロフィール