アダルトアフィリエイト実践記

THE WORLDで<p> </p>を使わずに段落を空ける方法

 


THE WORLDで<p> </p>を使用せずに行間を取り、ビジュアルエディタでも段落の行間を反映させる方法が見つかりましたのでご紹介します。

私が使用しているテーマ「THE WORLD」のデフォルト設定では段落間の余白が0になっているので、段落の間に空白の行を入れるには<p> </p>を入れる必要があります。

<p> </p>が挿入されてしまうと、無駄なソースが増え、SEO上無駄なタグがあるとマイナスになるようなので削除することにしました。

<p> </p>を消すことに成功

こちらの2つの画像をご覧ください。

Before

p tag 01

After

p tag 03

一見まるっきり同じように見えるのですが、ページのソースを表示すると、

Before

p tag 02

After

p tag 04

Beforeの画像には「<p> </p>」が改行ごとに挿入され、Afterでは取り除かれているのがお分かりいただけるでしょうか?

EnterとShift+Enterによる改行の違い

ワードプレスを使用している方は分かると思うのですが、ワードプレスのビジュアルモードで記事を書くときにEnterを押すと「<p>段落」が入力され、Shift+Enterを押すと「<br />改行」が挿入されます。

行間を広くしました

THE WORLDでは段落の余白の広さを「詳細オプション」で設定できるので、行間を広くするように設定しました。

この機能を使えば<p>&nbsp;</p>を入れなくても<p>段落の間にスペースを入れることができます。

一括削除にはプラグイン「Search Regex」を使用

そうすると、これまで<p>&nbsp;</p>で改行していた分と設定しなおした分で改行のスペースがかなり広く開いてしまいました。
これを修正するにはこれまで投稿した記事を全て編集しなおさなくてはなりません。

そこでプラグイン「Search Regex」の登場です。
このプラグインを使って<p>&nbsp;</p>を一括削除することができました。

ビジュアルエディタのスタイルシートを編集する必要がある

<p>&nbsp;</p>を取り除くことには成功したのですが、今度はビジュアルエディタで記事を書くときに、<P>の行間が反映されなくなってしまいました。

プレビュー表示すると行間が開きますが、ビジュアルエディタだと文字がくっついてしまいます。
これだと<br />と<P>の区別がつかないし、プレビューとビジュアルエディタの表示が異なるので非常に編集しづらい。
プラグインもいろいろと試しましたが全くダメした。

THE WORLDの発売元に問い合わせて回答をいただきましたが、それを実行すると今度はビジュアルエディタのフォントが明朝体のようになってしまうのです。

かくかくしかじかあっていろいろ試した結果、下記のようにビジュアルエディタのスタイルシートを編集したらうまくいきました。

ビジュアルエディタのスタイルシートのカスタマイズ方法

「外観」「テーマの編集」「ビジュアルエディタのスタイルシート」を開きます。

この部分を探します。

* { margin: 0; padding: 0; }

p { margin: 0; padding: 0; }

#tinymce {
line-height: 160%;
margin: 10px 15px;
padding: 10px;
font-size: 14px;
text-align: left;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Me
iryo,'MS Pゴシック';
background: #FFFFFF;
}

このソースをこのように書き換えました。

* { margin: 0; padding: 0; }

p { margin: 0 0 20px 0; padding: 0; }

#tinymce {
line-height: 160%;
margin: 10px 15px;
padding: 10px;
font-size: 14px;
text-align: left;
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Me
iryo,'MS Pゴシック';
background: #FFFFFF;
}

赤い部分を書き換えます。

これでビジュアルエディタで記事を書く時にも段落の改行が反映されるようになりました。

ちなみに「p { margin: 0 0 20px 0; padding: 0; }」の数字を変えると行間の幅を変えることができます。

数字の順番は「上、右、下、左」の順です。

画像の余白を調整する方法

テーマのバリエーションによって異なりますが、画像に余白が設定されているバリエーションでは、段落の余白に画像の余白が足されて間隔が空きすぎてしまう場合があります。

その場合の編集方法はこちら。

「外観」「テーマの編集」「スタイルシート」を開きます。

p img{
margin:15px 0;

p img{
margin:0px 0;

に変更してください。

リストタグに余白を追加する方法

スタイルシートに「ol, ul{ margin-bottom: 10px; }」と追加することでリストタグに余白を追加することができます。

pxはお好きな数値を設定します。

まとめ

<p>&nbsp;</p>がソースにあってもSEO上マイナスにはならないそうですが(賛否両論あり)、<p>&nbsp;</p>がソースにあるサイトはあまり見かけませんでした。

できれば余計なソースは削除したかったのでこの方法で何とかうまくいき良かったです。

スタイルシートは全然詳しくないのでこの方法が正しいかどうかわかりません。
行う際は自己責任でお願いします!

 

SEO対策   0

この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: