« Windows Live OneCare PC セーフティ 日本語版公開 | トップページ | Windows Defender を試してみました。 »

2006年8月19日

夏休み企画番外編:ココログのカスタマイズその3

仕事が一区切り付いていますので、夏休み企画番外編です。

ココログで、少しだけ文字のサイズを大きくしたいと思います。

http://maru.cocolog-nifty.com/manabi/styles.css

上記のスタイルシート(CSS)を開いてみてみると、"font-size:" の項目が文字のサイズを指定しており、何カ所か表記が有ります。
個々に文字のサイズを指定しており、例えば ”#banner h1” と有る所は、HTML のソース確認してみると <div id="banner"> </div> に挟まれており、その中で <h1> から </h1> に挟まれた文字に対して指定した"文字のサイズ"が適用されます。

指定された文字のサイズは、”xx-large” となっています。
文字のサイズは、大きい順に

xx-large ・・・・ 超特大
x-large ・・・・・ 特大
large ・・・・・・・ 大
medium ・・・・ 普通
small ・・・・・・・ 小
x-small ・・・・・ 極小
xx-small ・・・・ 超極小

と指定します。
文字のサイズは、上記以外に % や、em,px 等で指定できますが、ココログでは上記の方法で指定されています。
個人的には、”xx-small” は文字が小さすぎると思います。

ココログ本文で利用している文字の大きさの指示は、HTML のソースを確認してみると、

<div id="center">
<div class="content-top"></div>
<div class="content">

から、記事の本文が始まっています。
スタイルシート(CSS)のソースを確認すると、

.content p {
color: #000000;
font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
font-size: small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

とあります。
”.content p” とは、<div class="content"> </div> に挟まれており、その中で <p> </p> に挟まれた文字の属性を指定しており、文字の大きさは ”small” と指定されています。
ここの記述を修正すれば文字の大きさを変える事が出来ます。

ちなみに上記の記述では

color: #000000;
文字の色を16進数で指定しています。文字の色は「黒」を指定しています。

font-family: 'MS PGothic', 'Hiragino Kaku Gothic Pro W3', Osaka, sans-serif;
フォントの種類を指定しています。Windows と、Macintosh の環境で、ゴシック系のフォントを指定しています。

font-size: small;
文字のサイズを指定しています。文字のサイズは「小」を指定しています。

font-weight: normal;
文字の太さを指定しています。文字の太さは「標準」を指定しています。

line-height: 150%;
行間を指定しています。行間を「150%」で指定しています。

text-align: left;
文字の位置を指定しています。文字の位置は「左寄せ」を指定しています。

margin-bottom: 10px;
余白を指定しています。余白は下方向に「10px」のスペースを指定しています。

と指定していることが確認出来ます。

記事の文字サイズを変更するには、変更点を

.content p {
color: #333333;
font-size: medium;
}

と、【カスタムCSSを編集】の「テキストボックス」内に記載します。
文字の色を「灰色」に、大きさ「標準」に変更しています。

ご確認ください。

|

« Windows Live OneCare PC セーフティ 日本語版公開 | トップページ | Windows Defender を試してみました。 »

「ウェブログ・ココログ関連」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/6981/11511174

この記事へのトラックバック一覧です: 夏休み企画番外編:ココログのカスタマイズその3:

« Windows Live OneCare PC セーフティ 日本語版公開 | トップページ | Windows Defender を試してみました。 »