コピペするだけでブログ記事をグッと見やすくする方法です

2012年02月15日

ども、
ピアノ教室管理人です。

今回は、超～カンタンな方法で
ブログ記事の見栄えを整える方法をご紹介してみます。

ブログのカスタマイズやスタイルシート、
ＣＳＳ、ＨＴＭＬなどがわからなくても、

タグをコピー＆ペーストして調整するだけで、
ブログ記事を見やすく読みやすくできますよ。

では、さっそく。

コピペするタグ

まず、次のタグを
ブログを書く欄の一番上と一番下にコピペします。

■一番上にコピペするタグ

■一番下にコピペするタグ

</div>

この一番上にコピペしたタグと
一番下にコピペしたタグの間に、
ブログの記事本文を書いていってください。

こんな感じで書いてください。

<div style="border: 0; padding: 0; margin: 0; font-size: 11pt; color: #000000; text-align: left; line-height: 1.5;">

こんにちは。
ヘナチョコ三等兵です。

ここが記事の本文になります。

画像を貼りつけても大丈夫です。

リンクや動画もＯＫなんです。

</div>

※アメブロの例

クリックで拡大します。

解説

お好みで調整したい人のために
コピペするタグの各値を解説します。

■border: 0; padding: 0; margin: 0;

この部分は触らなくていいです。

■font-size: 11pt;

この部分は文字のサイズを指定してます。

当然、数字が大きければ文字サイズも大きく、
数字が小さければ文字も小さくなります。

※サンプルfont-size: 8pt;　⇒　文字サイズ font-size: 9pt;　⇒　文字サイズ font-size: 11pt;　⇒　文字サイズ font-size: 14pt;　⇒　文字サイズ font-size: 18pt;　⇒　文字サイズ font-size: 24pt;　⇒　文字サイズ

■color: #000000;

これは文字の色になります。

数値はＲＧＢのそれぞれの色を表しています。

color: #000000;　⇒　Ｒ（＝赤色）
color: #000000;　⇒　Ｇ（＝緑色）
color: #000000;　⇒　Ｂ（＝青色）

数値は１６進数で、
00～FFを使います。

※サンプル黒　color: #000000;　⇒　文字の色白　color: #ffffff;　⇒　文字の色赤　color: #ff0000;　⇒　文字の色緑　color: #00ff00;　⇒　文字の色青　color: #0000ff;　⇒　文字の色黄　color: #ffff00;　⇒　文字の色紫　color: #ff00ff;　⇒　文字の色灰　color: #888888;　⇒　文字の色

※もう少しくわしい解説を準備予定です。^^;

■text-align: left;

これは文字の行揃えの指定です。

text-align: left;　⇒　左寄せ
text-align: center;　⇒　中央揃え
text-align: right;　⇒　右寄せ

ふつうは左寄せですね。

※サンプル

▽text-align: left;

左寄せの文字

▽text-align: center;

中央揃え文字

▽text-align: right;

右寄せ文字

■line-height: 1.5;

これは行の高さを指定しています。

数が大きければ行間は広がり、
小さければ行間は狭くなります。

※サンプル

▽line-height: 1.0;

行間のサイズ
行間のサイズ

▽line-height: 1.5;

行間のサイズ
行間のサイズ

▽line-height: 2.0;