Bloggerにpタグを導入して段落を作り読みやすくする。（Insertion of p tags instead of br tag by using jquery in blogger）

Bloggerでpタグを使って段落を作る

bloggerユーザーは、pタグによる段落を作ることが出来ないため、通常のブラウザ上で記事を書くと、のっぺりとした印象になってしまうことが避けられない。それを避けるためには、pタグを書けば良いのだけれどBloggerではそれがどうしても上手くいかない。

 可読性の高いブログを書くためには、どうしても段落を作らなければ！！  
はてなブログでは、段落がしっかりと出来ているため、誰が見ても読みやすく書きやすい。
とりあえずNETの海を漁り、jqueryを使って<p>タグを入れる方法を編み出したので紹介する。

jqueryを使って<p>タグを入れる方法

いろいろ試したのですが、現状ではスクリプトを使ってpタグを入れることが可能ということがわかった。
考え方としては

テキストを選択してpタグの導入→アンダーラインや太文字で改行されてしまうという不具合発生→inlineをつかって無理やり一列にする。→アンダーライン等が連続すると改行されない→Brタグを<p></p>に置き換える。

という流れでなんとかなりました。下にスクリプトを書きます。

CSSに追記

1. .intext { display: inline; }
2. .intext2 { display: inline; }

Jquery（レイアウト→HTML/JavaScriptの追加→下の文章をコピペ）

1. <script>
2. $( ".post-body>div" )
3.   .contents()
4.     .filter(function() {
5.       return this.nodeType === 3;
6.     })
7.       .wrap( "<p></p>" )
8.       .end()
9. 
   
10. </script>
11. 
    
12. <script>
13. $('u,b,i,span,strike').prev('p').replaceWith(function() {
14.   $(this).replaceWith("<p class='intext'>"+$(this).text()+"</p>")
15. });
16. $('u,b,span,strike').next('p').replaceWith(function() {
17.   $(this).replaceWith("<p class='intext2'>"+$(this).text()+"</p>")
18. });
19. $('br').replaceWith(function() {
20.   $(this).replaceWith("<p>"+"</p>")
21. });
22. 
    
23. </script>

これで段落を上手く作ることができる。<p></p>が生じてしまうので、今後もう少し改善する必要があるが、最新のSEO的には、<p></p>のからタグが有っても問題ない様子ですので、見た目重視でブログを作りたい人は、これで良い。

ー記事をシェアするー

B!