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

勉強したことをアウトプット

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

WRITER
 




この記事を書いている人 - WRITER -
詳しいプロフィールはこちら

 

 

こんにちは!めんかです。

 

ある記事のフォントがバラバラで格好が悪くなっているのを発見しました!

 

おかしいな、と思ったので「ビジュアルモード」と「テキストモード」で見比べてみました。

 

すると「テキストモード」で見たときに「異変」があるのに気づきました。

 

該当箇所は見慣れぬ <div></div> というタグで挟まれていました。

 

フォントが小さくなるばかりではなく、Enter キーで行間を開けようにも「テキストモード」では「 <div></div> タグ」が増殖するばかりです。

 

それでもって「ビジュアルモード」では一向に行間が開かない。

 

得体の知れない「アイツ(タグ)」ですが勝手に削除するのも怖いですし。

 

見た目上格好が整っても何か「タブー」があるかもしれないので一応先生に聞いてみました。

 

聞くところによると、この場合、これは取ってOKとのことだったので一つ一つ<div>というタグを削除し<p>タグに置き換えて・・・・としていったら文字のフォントが統一されてスッキリしました。

 

違和感を感じながらも放置していたのですが、文字のフォントが均一になった記事を見たときには、

 

「やっぱり今まで変だったんだ。」

 

と思いました。

 

書き直すのが大変でした (TOT)

 

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

 

 

 

 

思い起こせば、あの記事は ( 全体的に少ないアクセスなりに )他の記事よりもアクセスが多かった。

 

なので「旧ブログ→このブログ」に「エクスポート→インポート」した記事でした。

 

 

「 divタグ」の撤去作業

 

 

正しく表示されているページが、

 

  • <p>&nbsp;</p>
  • <p></p>

 

などで構成されていたので <div></div>  と置き換えてみました。

 

こんなふう。

 

 

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>テキストモードでみてみると、文章の間に入っている「タグ」が違います。</p>

<p>&nbsp;</p>

<p>テキストモードでみてみると、文章の間に入っている「タグ」が違います。</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

 

一部分ならば勝手に直してしまっていたのですが、1記事全体的がこんな状態で、しかも6000字超の記事。

 

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

 

「フォントの大きさが微妙に違う」

 

私はこの現実を直視しようとはせず、気のせい!気のせい!と思い込もうとしていました。

 

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

 

しかし、人が見ても変なレベルで文字フォントが違っていました。

 

 

 

 

テキストモードでみてみると、文章の間に入っている「タグ」が違います。

文字が大きいところでは「<p>&nbsp;</p>」・「<p>と</p>」が使われています。

文字が小さいところは<div>と</div>が使われています。

 

「 divタグ」って何者?

 

 

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

 

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

 

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

 

すると、Enterキーを押した分だけ<div></div>が増殖しています。

 

<div></div> って、行間にいくら入っていてもビジュアルモードではなにも反映されない不思議なヤツ。

 

「領域がどうの、とのこと」

 

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

 

 

 

 

 

わざと小見出しを作って「ああああああああああ・・・・」だけでブログ風に記事を作ってみたり。

 

新規で記事を書く分には全然どこにも「異常箇所」は見当たりませんね。

 

 

 

新しく作るページでは現れないアイツ。

 

他からインポートしてきたこのベネッセの考える力プラス中学受験講座を振り返っての記事だけこうなったのかが解りません。

 

余計なタグを削除して良いとのことなので安心して一つ一つ手作業で消しました。

 

すると見事に文字フォントが全部同じになってスッキリしたのは良いが

 

改行がなくなりベタベタと書いてあるだけになってしまいましたが、以前と比べたら気持ちいいぐらいに文字の大きさが揃っています。

 

<div></div>を外すと、文章がひとかたまりになって「団子状態」になるんですね。

 

 

 

 

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

 

行が空くところには「<p>&nbsp;</p>」が入るはず。

 

ともあれ、タグを置き換えたら文字のフォントが統一されてスッキリしました。

 

はじめは迂闊にいじってはいけないものかと思っていましたが、よくよく考えるとこれはブログ1記事の下書きに過ぎませんでした。

 

「設定を変える云々」とは別物なんですよね。

 

最悪、全部削除したって全く問題がない。

 

あれから「ディブる( めんかの造語 )」ことは何故かなくなりました。

 

 

 

もっと簡単にdiv タグを取る方法を見つけたので 追記しました ❣

 

 

もっと簡単にdiv タグを取る方法を見つけたので 追記しました。

 

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

 

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

 

 

 

 

 

ブログのダッシュボードは「ビジュアルモード」にします。

 

 

 

 

 

「テキストモード」で見ると、あいだに「タグ」が挟まっています。

 

ここでは別のタグ

 

 

拡大図 ↓

 

 

 

 

本来「ビジュアルモード」で「カット&ペースト」をするのですが、

 

「切り取り(カット)」のあとの「貼り付け(ペースト)」の代わりに、

 

 

 

 

「プレーンテキストとして貼り付ける」を選択します。

 

 

 

 

すると「ビジュアルモード」では、見た目上はっきり分かりませんが、

 

 

 

 

 

「テキストモード」にすると「タグ」が取れているのがわかります。

 

 

 

 

拡大図 ↓

 

 

 

 

あとは通常通りの作業になります。

 

「ビジュアルモード」で、行間をあけたいところで「Enter」キーを押せば OK です。

 

 

 

 

確認 !「テキストモード」で見てみると「div」ではない「タグ」がちゃんと入っています。

 

  

 

このことを確か「装飾の無効化」というのだと思います。

 

 

 

この記事を書いている人 - WRITER -
詳しいプロフィールはこちら
スポンサードリンク




スポンサードリンク

- Comments -

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Copyright© めんかの 毎日が自由研究 , 2018 All Rights Reserved.