投稿記事を 読みやすくする。

ヘッダーを変えるとか、サイトのカスタマイズには熱心な方が多いんですが、自分の記事を どう装飾していくかには 無関心な方が多いようです。そこで、記事投稿の装飾を考えてみましょう。

ヘッダーを変えるとか、サイトのカスタマイズには熱心な方が
多いんですが、自分の記事を どう装飾していくかには 
無関心な方が多いようです。

そこで、記事投稿の装飾を考えてみましょう。

早速ですが、 上の二つの文節は どちらが読みやすいですか?

圧倒的に 下の方が読みやすいですね。

目を動かさないで、読める幅 + 

2~3行毎に 空白行を入れる。

この書き方が 主流になっています。

文の長短は、記事を書く時に心がければ出来そうですが、
文字サイズ、行間の間隔の設定は 簡単にはいきません。

これは、テーマ、テンプレートの守備範囲だからです。

 

「ビジュアル」で投稿される方、「Word」から投稿される方は
ここまで背巣。 「html」で投稿される方は以下もお読みください。

では 空白行は どのように入れればいいのでしょうか?

「なに云ってんの! <br> を 入れれば 一行空くだろう・・・・」

本当にそうでしょうか?
では実験してみましょう。 下の形で インプットしてみます

一行目です
<br />
<br />
上に BRx2 を入れました
 *ここは空白にしたいです
上に ブランク行を入れました

と入れてみると 結果は ↓↓↓

一行目です

上に BRx2 を入れました

上に ブランク行を入れました

と <br /> と、ブランク行が どっか行ってしまいました。

何が起こったのかと、HTMLのソースコードを表示してみます。
(表示画面で、右クリック、ページのソースを表示で見える)

<div class=”storycontent”>
 <p>一行目です</p>
 <p>上に BRx2 を入れました</p>
 <p>上に ブランク行を入れました</p>
</div><!– end storycontent –>

文章は、必ず <p>——-</p>で囲む約束ですので
WordPressが 不足している<p></p>を、
自動的に挿入、訂正してくれています。

同時に、「<br />、空白行」を削除してしまいました。

困りました。 
どうすれば 行間のスペースを確保出来るでしょうか・・・・・

いろいろ試した結果、 
<p> </p> を加えることで 
やっと 一行のスペースを確保することが出来ましたが
これは お勧めでき層にありません。

それじゃあ どうすりゃいいの?
そこで考えついたのが CSSを使った下の方法です

HTML

<p class=”sp40”>上に 40ピクセルのスペースを入れます </p>

CSS
.sp40 {margin-top: 40px;}

「きっと、 理屈はわかるけど・・・・
毎回 <p class=”sp40”> を 記入するのかい?」と 言われそうです。

ご安心ください。
以前 紹介した「プラグイン addquicktagsの使い方」の方法を使えば 簡単に出来るんですが
続きは 後日と云うことで・・・

コメントを残す

*