WordPressの改行について…その2

こんばんわ、Gammy Design Works代表の石上です。

 

WordPressの改行についてちょっと調べたので、

備忘録としてブログに残しておきます(^_^;)

 

さて、Wordpressの改行で調べてみてビジュアルエディターにおける

改行を思い通りにするプラグインをご紹介しておきます。

 

「PS Disable Auto Formatting」

 

というプラグインなのですが、どういうものかと言いますと…

 

元々Wordpressというものは、XHTMLの規則に

「自動的に合わせる」仕組みになっているそうです。

 

「この自動的に規則に合わせるの」というのが

思うように改行できない原因なんですね^^

 

で、このプラグインは「自動的に規則に合わせる」という機能を止めてしまうプラグインです。

 

なので、投稿画面には、横長の英語で書かれた長い文章が

表示されるようになりますのですが、とりあえず、無視しましょうw

 

さて、その手順を簡単に説明します^^

 

「PS Disable Auto Formatting」のインストールと使い方

1.プラグインをインストールするので、

「プラグイン」にマウスを載せてから、「新規追加」をクリック

ren000025

 

 

2.検索から「PS Disable Auto Formatting」を入力して検索し、

一番上のプラグインをインストールして有効化します。

2013_12_09_21_42_30

 

3.有効化できたら、メニューの「設定」にマウスを載せて、

「自動整形」をクリック。

ren000028

 

4.とりあえず、上の二つにチェック入れとけば間違い無いですw

2013_12_09_21_44_35

 

5.試しに投稿してみるので、「投稿」にマウスを載せてから

「新規追加」をクリック。

ren000032

 

6.試しに1回改行したのと、3回分改行してみました。

えらい改行の割には行間が広い…

2013_12_09_21_47_13

 

7.プレビューしてみると、めっちゃスカスカですw

でも、一応改行は反映されています。

2013_12_09_21_47_47

 

8.で、テキストエディタで確認してみると<p>と</p>で括られています。

 

スペースを空けた場所にも何やらタグがありますね…

「&nbsp」というのは、「何もありませんよ」みたいな感じですかね!?

 

これがあると、自動整形する際になかった事にされて上に詰められてしまいます。

 

2013_12_09_21_55_17

だから、2行以上の改行が反映されないんですねw

 

9.<p>~</p>だと改行した時に不自然な隙間が空くので、

狭くした改行を紹介します^^

 

下の画像だと、いい感じのスペースになってますよね?

2013_12_09_21_55_45

これは「Shift」+「Enter」で改行したらこうなりますw

なぜかと言いますと、「別のHTMLタグが挿入されるから」です。

 

 

10.テキストエディタで見てみましょう^^

2013_12_09_21_56_31

すると、今度は<br />の改行タグが挿入されているのがわかります。

ちなみに、横に並ぶので見難いですw

 

<p>と、<br />の違いとして、

<br />はそのまんまの改行に対し、
<p>は文章の段落ということになります。

 

追記2015.4.28:

改行と段落の違いを理解していれば、インデント(字下げ)の機能を使って、
より読みやすい文章にすることもできます。

 

 

僕はせっかくなので、スペースの幅を使い分けるのにそのままにしていますw

 

久しぶりにビジュアルエディターを使いましたが、やっぱり便利ですね^^

 

ぜひ試してみてください^^

 

 

この記事を書いた人

石上 貴哉
石上 貴哉Gammy Design Works代表
Webデザイン事業「Gammy Design Works」代表。
主にWordpressの構築や、ヘッダー画像などのWebデザインを行っています。
クライアントの魅力を引き出すデザインを心がけています^^

趣味はパソコン(Mac)読書(心屋仁之助)ギター(洋楽HR/HM、嵐)
車(スバル車)などです。

お気軽にFacebookやtwitterで絡んでくださいね^^

この記事が気に入ったら
いいね ! しよう


Posted in Wordpress, ブログ and tagged .

4 Comments

  1. WordPressでの改行はたぶん初心者さんは皆つまづくんじゃないでしょうか。
    僕もそうでしたしね(笑)

    役立つ情報ありがとうございました^^

    • >三太さん
      標準仕様は絶対違和感ありますよねw
      僕も四苦八苦しました。

      実は三太さんのおすすめプラグインの方が、
      僕の使い方には合ってるかも…(^_^;)

  2. プラグインでも出来るっていうのは聞いたことがあるんですが、面倒で導入してませんでした^ ^

    勉強になります!

    フェイスブックのコメント欄でもShift+Enterで改行出来ますね!
    でも1行しか開かないので、それ以上開ける方法を知ってたら教えて下さい(*^_^*)

    • >よっしーさん
      Facebookのコメントをする時に
      半角スペースを入れて改行してみましたが、
      投稿して、反映されるときにキュッと詰められてしまいましたw
      こちらもWordpress同様、自動整形が働いている仕様みたいですね…

      調べてみましたが、「シフト+エンター」の記事が多く、
      複数改行については、見当たりませんでした…
      うーん、お力になれず申し訳ない(^_^;)

      WordPressの自動整形をキャンセルするプラグインは
      インストールしてチェック入れるだけなので簡単に
      設定できますよ(*´ω`*)

      P.S
      Facebookのコメント改行のからくりが見えてきましたw

      半角スペース入れて改行すればその分スペースができます。
      ただし、コメントを一度でも編集すると、
      キュッとスペースが詰められます…
      コメントは一発勝負のようですねw

Comments are closed.