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

2012年02月15日


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


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


ブログのカスタマイズやスタイルシート、
CSS、HTMLなどがわからなくても、

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


では、さっそく。



コピペするタグ


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


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

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




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

</div>





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


こんな感じで書いてください。
<div style="border: 0; padding: 0; margin: 0; font-size: 11pt; color: #000000; text-align: left; line-height: 1.5;">

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

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

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

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

</div>



※アメブロの例
20120215-01.jpg
クリックで拡大します。




解説


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


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

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



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

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

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


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




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

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


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

color: #000000; ⇒ R(=赤色)
color: #000000; ⇒ G(=緑色)
color: #000000; ⇒ B(=青色)


数値は16進数で、
00〜FFを使います。


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


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



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

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

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


ふつうは左寄せですね。



※サンプル

▽text-align: left;
左寄せの文字


▽text-align: center;
中央揃え文字


▽text-align: right;
右寄せ文字




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

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

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


※サンプル

▽line-height: 1.0;
行間のサイズ
行間のサイズ


▽line-height: 1.5;
行間のサイズ
行間のサイズ


▽line-height: 2.0;
行間のサイズ
行間のサイズ




■</div>
一番最後にコピペする</div>。

これは絶対に忘れないでくださいね。




おまけ


以下は当ブログに近い設定になります。


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






では ^^)/~
タグ:Webデザイン

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。