WordPressで書くブログの行間が空かない・文字の大きさがバラバラ!の原因は「div タグ」のせい!大量にあっても簡単に取る方法

覚書

 

WordPress でブログを書いていますが、ビジュアルモードで、ある記事のフォントや行間がバラバラで格好が悪くなっているのを発見しました!

 

「テキストモード」で見ると該当箇所は見慣れぬ「div」というタグで挟まれていました。

 

対処法は、テキストモードで現れる「div」を取っ払ってしまうことでした。

 

 

最初「 divタグというやつ」は勝手にいじると良くないのかと思っていました。

 

でも、よくよく考えるとこれはブログ1記事の下書きに過ぎないのでバンバン削除してしまって良いんですよね。

 

「divタグ」にはちゃんと役割があるんでしょうけれども今回の場合は邪魔なだけでした汗 。

 

Enterキーを押しても行間が開かない!➔テキストモードで見ると大量のdivタグが挟まっていた(怖)

 

この記事。ビジュアルモードでEnter キーで行間を開けているつもりなのに空かないし、フォントも小さく見えます。

 

ブログはビジュアルモードで書くのに慣れきっているのでテキストモードで眺めることはまず無い。

 

 

「Enterキー」で行間を開けようとしても全然空いてくれないのが不思議で不思議で。。。

 

でも、埒が明かないので、面倒だがテキストモードで見てみることを思いつきました。

 

すると、該当箇所は見慣れぬ「div」というタグで挟まれていました。

 

Enterキーを押した分だけ<div></div>が増殖して、行間にいくら割り込んで来てもビジュアルモードではなにも反映されない不思議なヤツ。

 

 

 

 

使われているタグを調べるのに「ブログ投稿の表示」と「ダッシュボードの投稿の表示」とをこんな風に2枚表示にさせて比較しました。

 

 

 

でも、良く理由が分からなかったので、わざと小見出しを作って「ああああああああああ・・・・」だけでブログ風に新記事を作ってみました。

 

結果、全然どこにも「異常箇所」は見当たらない。

 

 

 

 

新規で記事を書く分には全然どこにも「異常箇所」は見当たらないのに何故?

 

思い起こせば、あの記事は 旧ブログからこのブログにインポートした記事でした。

 

どうも、コピペやインポートなどで他から記事を持ってくるとこういう現象が起こりやすいみたいです。

 

対処法 ~テキストモードにして「divタグ」を削除~

 

得体の知れない「divタグ」ですが勝手に削除するのも怖いですし、見た目上格好が整っても何か「タブー」があるかもしれないので一応先生に聞いてみました。

 

聞くところによると、この場合、これは取ってOKとのことだったので一つ一「div」というタグを削除しました。

 

<p>&nbsp;</p>とか <p>&nbsp;</p>とか<p>とか</p>というタグに置き換えです。

 

効率的にdiv タグを外す方法 その①…..プレーンテキストでコピペ

 

その後、もっと速く「タグ」を取る方法を知りましたので追記しました。

 

 「コピペ」するとき「貼り付け」の代わりに「プレーンテキストとして貼り付ける」を選択します。

 

こっちはビジュアルモードでの作業になります。

 

 

こうすることによって、テキストに付いてくる「タグ」が全て取れた状態で「貼り付け」をすることが出来ます。

 

文字フォントが見事に全部同じになってスッキリします。

 

但し、フォントの色を変えたり大きくするためのタグも全部無くなってしまいます。

 

改行もなくなり、全部同じ調子でベタベタと書いてあるだけになってしまいます。

 

めんき
めんき

こういうのを「装飾の無効化」っていうんだって🍡

 

 

 

ここからは「ビジュアルモード」で「Enterキー」を押して行間を空けるだけの話です

 

 

 

「テキストモード」で見るといつもの「タグ」が挟まっています。

 

 

 

拡大図 ↓

効率的にdiv タグを外す方法 その②…..divタグを記事の中から検索する

 

「ページの中でキーワードがいくつ使われているか、またその箇所を調べる」

 

この方法を利用してみました。

 

黄色やオレンジで単語がハイライトになります。

 

記事内キーワード検索

 

「/div」と「div」は別々に探さなければなりませんが、正確です。

 

当時これを知っていればこんなに苦労はしなかっただろうに。。。。。

 

ページ内でキーワードを検索する方法
ページ内で特定の単語がいくつ使われているかを調べる方法について書きました。黄色やオレンジで単語がハイライトになります。数を調べるだけでなく、どの箇所で使われているかも一目瞭然です。

 

まとめ

 

文字のフォントが微妙にバラバラなことに薄々勘付いてはいたのですが、違和感を感じながらも放置していました。

 

1個1個比べると「お。。。んなじ。。。だよね?!。。。。」というレベル。

 

文字のフォントが均一になった記事を見たときには、やっぱり今まで変だったんだと実感。

 

6000字超の記事。面倒臭すぎて「どうしたものか」と思いつつ放置していましたが思い切って直すことにして良かったです。

 

ブログを書くのにHTMLの知識があったほうが良いのはわかっているのですがどうも苦手ですが少しづつ覚えていきたいです。

 

コメント

タイトルとURLをコピーしました