ども、
ピアノ教室管理人です。
今回は、超〜カンタンな方法で
ブログ記事の見栄えを整える方法をご紹介してみます。
ブログのカスタマイズやスタイルシート、
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>
こんにちは。
ヘナチョコ三等兵です。
ここが記事の本文になります。
画像を貼りつけても大丈夫です。
リンクや動画もOKなんです。
</div>
※アメブロの例

クリックで拡大します。
解説
お好みで調整したい人のために
コピペするタグの各値を解説します。
■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デザイン