記事内の文字のサイズ、色、太さを変更する

   このサイトではトップページ以外の各ページのメインコンテンツ(ヘッダ、フッタ、サイドナビを除いた部分)は記事投稿で作成しています。

 このページ・『記事内の文字のサイズ、色、太さを変更する』も記事投稿で作成しています。

 その記事内で使用する文字の大きさ、色、太さはあらかじめテンプレートのスタイルシートで設定されています。以下でその設定の変更方法を紹介します。

準備
SeeSaaブログの 「マイ・ブログ」タグからサインイン(ログイン)して → 「デザイン」 → 「スタイルシート」 → 「使用しているテンプレートのタイトル」 でスタイルシートを変更、書き足しができるページを開きます。

下の画像のようなページが表れます。このページでスタイルシートを変更していきます。


CSSnyuuryoku.gif

文字の大きさ、色、太さを変更する

スタイルシート セレクタ 『.text』 の部分を変更することで記事内の文字の大きさ、色、太さを変更します。
変更前
.text{  ←セレクタ名「.(クラス) text」(記事内の文字の部分)
font-size: 12px;  ←文字サイズ:12ピクセル
margin-top:0px;
padding:0px 10px 0px 10px;
}
変更後
.text{
font-size: 13px;  ←文字サイズ:13ピクセルに変更
color:#333333;  ←文字色:「#333333」(黒に近いグレー)
font-weight:bold;  ←文字の太さ:太い
line-height:1.5em;  ←行の高さ:1.5文字分
margin-top:0px;
padding:0px 10px 0px 10px;
}
*文字の太さに関しては、実際にこのサイトでは太くする設定はしていません。太さを変更する方法を紹介するためにあえて上では記載しました。

 『line-height』は行の高さを設定するプロパティです。
1.5em(1.5文字分)の設定をすることにより、行間に0.5文字分のスペースができます。

『font-weight』に関して
 設定ではboldのほかにbolderや、600、700、800、900といった数字で変更できるようになっているのですが、フォントの種類やブラウザによっては「太い」という1種類のパターンしか表現されないようです。

このページで確かめたところ、bolder、600、700、800、900のどれを設定してもboldとまったく同じ太さでした。(ブラウザは IE6.0とFirefoxで確認)


「プレビュー」ボタンで確認後、問題がなければ「スタイルシートを変更する」ボタンを押して変更を確定します。

×

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