| 総合メニュー | ||||||
| ブログ概要 | 稼ぐ準備 | 稼ぎ方 | 実践記録 | オススメ | HELP | ｻｲﾄﾏｯﾌﾟ |
パソコンで見ると正常でもスマホで見ると改行や段落がおかしくなっていることがあるようです。
そこで、原因を調べた結果をまとめておきました。
日々の実践記録
|
--- このページの目次 ---
実践記録◆Wordpressの改行(br)と段落(p)について・具体例
パソコンでWordpressの記事を作成してスマホで確認してみると、文章の段落（行間を空ける）がされてなく見ずらくなっていることに気が付きました。
パソコンで見ると正常でもスマホで見ると改行や段落がおかしくなっていることがあるようです。
そこで、原因を調べ修正しましたが、基本的なパソコンの操作とテキスト文章の確認かできていなかったことがわかり大切なことなのでまとめておきました。
１．改行（<br>)と段落(<p>)の違いについて
「改行」<br>とは、長い文章などで行を変えたりして文章を区切って読みやすくするためのもので、htmlのbrタグ(＜br＞)を使用します。
また「段落」<p>とは、段を落とす（最初の一文字を空ける）ということで内容などで文章を区切り、htmlのpタグ(＜p＞＜/p＞)を使用します。
1-1) 「改行」と「段落」の使用方法（具体例）
具体的には、
（ひとつの文章の「。」などで「段落」する場合）
例１
実際の表示
今日は、非常にいい天気だった。
しかし、非常に暑かった。
（次ぎの文章・・・）
———————————-
ソースコード
<p>今日は、非常にいい天気だった。</p>
<p>しかし、非常に暑かった。</p>
———————————
（ひとつの文章の途中の「、」などで「段落」する場合）
例２
実際の表示
今日は、
非常にいい天気だった。
しかし、非常に暑かった。
（次ぎの文章・・・）
———————————-
ソースコード
<p>今日は、<br>
非常にいい天気だった。</p>
<p>しかし、非常に暑かった。</p>
———————————
このように、<br>タグは一つの文を分割する場合に使用するものであり、使用上の注意も少しあります。
1-2) 「改行」と「段落」のキーボードの操作について
実際のキーボードの操作では、
「SHIFTキー＋エンターキー」を押します。
・「段落」<p>(。などの文章のかたまりで区切る、行間を空ける場合）
「エンターキー」のみを押します。
注意・・・「ビジュアルモード」で文章を作成中に「エンターキー」を押しても行間が空かず「改行」してしまう場合には、前の文章などで使用した<div></div>タグが影響 している場合があります。
この場合には、 一旦「テキストモード」に切り替えて入力した文章を確認して削除し再度書き直す必要があります。
２．改行（<br>)の使い方の注意点について
pタグはブロックレベル要素と呼ばれていて、1つのブロックとして扱われます。
つまり＜p＞＜/p＞タグで囲った文章は１つの文章のかたまりであることに対して、<br>タグは、ブロックの中に入っている一部という扱いになります。
Google検索エンジンでも、ユーザーにわかりやすい文章を書くように推奨（ユーザビリティを高める）していますので、タグの使い方には注意が必要です。
例２
実際の表示
今日は、
非常にいい天気だった。
しかし、非常に暑かった。
（次ぎの文章・・・）
———————————-
ソースコード（悪い例）
<p>今日は、<br>
非常にいい天気だった。<br>
<br>
<br>
<br>しかし、非常に暑かった。</p>
ソースコード（正しい例）
<p>今日は、<br>
非常にいい天気だった。</p>
<p>
しかし、非常に暑かった。</p>
———————————
段落を作って行間を空ける場合は<br>タグの連続使用はやめて<p>タグを使うことをおすすめします。
上記の場合は、
「非常にいい天気だった。<br>」
となっており、一つの文章の単なる区切りとなっています。
正しくは、
非常にいい天気だった。</p>」
として、一つの文章の終わりとして</p>を使用します。
参考・・・
| HTML4 | <br> 単独で使用 |
| XHTML | <br /> セットで使用 |
| HTML5 | どちらでも可 |
Htmlでは、<br>タグは<br />とセットで使わなくても単独で使用できます。
しかし、Xhtmlでは<br>と<br />とのセットで使う必要があります。
（「ビジュアルモード」で作成中では、自動的に上記を考慮してタグが挿入されます。）
３．まとめ
今回は、記事作成中に「エンターキー」を押しても行間が空かず「改行」してしまうことで原因を調べた結果を書きました。
このように、Wordpressを使用してますと、いろんな不具合や疑問点が発生します。
そして、このような不具合や疑問点などはWordpressを使用している初心者にとっても「よく経験するだろう」と思いこの記事を作成しました。
参考になればありがたいです。
➤ next 実践記録 060◆超便利！WordPressで簡単に「定型タグ」を使う方法・AddQuicktag
|
====================
初心者はネットで稼ぐために何をすべきか。
| 総合メニュー |
| Top (ブログの概要） |
| ネットで稼ぐための準備 |
| ネットで稼ぐ稼ぎ方 |
| ➤ 日々の実践記録 |
| オススメ情報 |
| HELP・お助け情報 |
| サイトマップ |
====================
