WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

ブログ初心者がカン違いする!段落、改行タグをわかりやすく解説する

この記事は約2分10秒で読めます

段落、改行タグの正しい使い方

ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

今回はWordPress初心者がよく間違う段落と改行タグの使い方について説明したいと思います。

pタグは段落、brタグは改行を表現するときに使います。

文法上は連続で改行タグを使うのはNG

私はぶっちゃけますと
今までbrタグを連続で使って改行して
ブログ記事を書いてきました。

例えばこんな感じに書いていました。

こんな感じで書いていました。

実際に表示するとこんな感じになります。

えるしっているか

死神は

りんごしかたべない

見た目は問題ないですが、
これってHTML文法上はNGなんです。知ってました?

追記(2014/09/03)

WordPressは自動整形機能で重複するbrタグは自動で削除されます

また、ビジュアルエディタモードで改行すると空白が挿入された空行が表示されます。

この方法も非推奨なので、CSSでマージンを指定しましょう。

→ WordPressの自動整形機能を無効化する方法

以前に書いたこの記事ですが、非推奨です!

行間を空けたい場合はCSSで余白を入れましょう!

文法上はまちがっていても上位に表示される?

連続改行して書いても
内容がしっかりしていれば
検索エンジンはきちんと評価してくれます。

(上位表示されます)

pタグで囲っても、
pタグで囲わなくても、
検索結果に影響はほぼありません。

どうすれば正しい書き方になるの?

pタグで囲ってCSSでmarginを指定して余白を表示します。

最初は面倒に感じるかもしれません・・・

ですが、
あなたが正しい文法で書くことで

他のサイトとの『差』になるのではないでしょうか。

余白クラス(mt, mb)の使い方

えるしっているか

死神は

りんごしかたべない

pタグにmbクラスを指定してマージン(margin)を設定して余白を表示しています。

mbはmargin-bottomの略で、数字は改行したい列数の意味を付けてます。

style.cssに余白クラスを追加しよう

上のソースをコピーしてstyle.cssに追加してください。

余白クラスの使用例

上に2行、下に2行の余白ができます。

下に2行の余白ができます。

普通の段落

上に3行の余白ができます。

pタグ以外にも、divタグやhタグにも指定できます。

今はこの方法で書いています。

何行余白が表示されるのか、見やすいんですよね。

数字を変えれば余白の数も変えられます。

cssで全体の余白を変更したりと融通も利くので私はこの方法をオススメします。

クイックタグを登録できる効率アップのプラグイン

「AddQuickTag」というプラグインを使うとクイックタグを追加できます。

作業効率が格段にあがるプラグインなので、導入を推奨しています!

→ 「AddQuickTag」はこちら

またはプラグイン→新規→「AddQuickTag」で検索でインストールください

編集後記

段落、改行タグの書き方を理解できましたでしょうか?

分からないにくいところがあったらコメントくださいね。

私自身、段落と改行タグは
いい加減に書いていたこともあってあまり強くは言えませんが(笑)

正しい文法で記事を書いて
読み手にも、検索エンジンにも読みやすい記事を心がけます!

関連記事

  1. WordPress はてブ数サムネイル画像付きシェアリンクを表示する方法
  2. WordPress SNS連携 プラグイン SNAP
  3. 虫眼鏡
  4. WordPress データベースが選択できません
  5. 記事タイトルで指定した文字を超えた場合「・・・」と表示する
  6. ワードプレス Browser Shots rel nofollow

コメントをお待ちしております

PR

カテゴリー