タイトル・ヘッダー部分のカスタマイズ

このページが扱うカスタマイズ

ブログタイトルやブログの紹介文の 色・文字の大きさ・位置をカスタマイズできます。

ブログ名の文字の大きさ・色のカスタマイズ

cssファイルを見てください。 少し下にスクロールしたら「サイトタイトル」という区切りがあるはずです。 わからない方はキーボードのctrlキーとFキーを同時に押して 「サイトタイトル」で検索してください。 ついでに、「サイトタイトル」のすぐ下にある 「タイトルのリンク色」という区切りも確認しておいて下さい。 両方をいじります。

ではまずブログタイトル文字の大きさからです。 cssの「サイトタイトル」をみてください。 これは「font-size:16px」の「16」という数字を 大きくすればタイトル文字も大きくなり、 小さくすればタイトル文字も小さくなります。 以下に該当部分のソースを載せておきます。 赤い数字の部分を変えればOKです。

/*↓サイトタイトル↓
-------------------------------------*/

.site_title
{
text-align:right;
font-size:16px;
font-family:Verdana,Osaka ;
font-weight:bolder;
color:#000000;
padding-top:140px;
padding-right:20px;
margin:0px;
}

/*↑サイトタイトル↑
-------------------------------------*/

次にブログタイトルの文字色を変える方法を説明します。 今度は「タイトルのリンク色」の方を見てください。 ここに2つ「color:#000000」というのがあるはずです。 この2つのカラーコードをお好きなRBG値にすればOKです。 ちなみに、上の方にある「color:#000000」は 通常表されているブログタイトルの色で、 下の方にある「color:#000000」はマウスが乗っかった時の色です。 その下の「underline」を「none」にすればマウスが乗っかった時に出る アンダーラインを消すことも出来ます。 カラーコードはこちら(別窓で開きます)を参照してください。

以下に該当部分のソースを載せておきます。 ソースの変えるところは赤い文字で、 実際のソースにはかかれていませんが 説明のためにいれた文章は青い文字で表しておきます。

/*↓タイトルのリンク色↓
-------------------------------------*/

.site_title a
{
color:#000000;
↑マウスがブログタイトルに乗っていない時の色の設定↑
text-decoration:none;
}

.site_title a:hover
{
color:#000000;
↑マウスがブログタイトルに乗った時の色の設定↑
text-decoration:underline;
↑マウスがブログタイトルに乗った時の、下線の設定↑
}

*「underline」を「none」に変えると下線が消えます。

/*↑タイトルのリンク色↑
-------------------------------------*/

タイトルの位置を変える

ブログタイトルの位置を高くしたり、左右に動かすことが出来ます。 cssの「サイトタイトル」部分を見てください。 ここに「padding-top:140px」「padding-right:20px」というのがあります。 この数字を変えれば位置が変わります。

ブログタイトルの位置を高くしたり低くしたりしたい時は 「padding-top:140px」の数字を変えます。 これは「上から140ピクセル離れた場所に置け」という命令文です。 数字を大きくすれば下に動き、数字を小さくすれば上に動きます。 あまり下に動かすとtop画像からはみ出してカッコ悪くなるので気をつけてください。 サイトの説明文も同時に上下します。

また、ブログタイトルの位置を左右に動かしたい時は 「padding-right:20px」の数字を変えます。 これは「右から20ピクセル離れた場所に置け」という命令文です。 ですから大きくすればするほど左側に、 小さくすればするほど右側に動きます。 上下の位置の場合はブログの説明文(紹介文)も一緒に上下しましたが、 左右の時はタイトルだけ動いて説明文はそのままです。 ですから別に設定する必要があります。

以下に該当部分のソースを載せておきます。 赤い文字のところが変えるところです。

/*↓サイトタイトル↓
-------------------------------------*/

.site_title
{
text-align:right;
font-size:16px;
font-family:Verdana,Osaka ;
font-weight:bolder;
color:#000000;
padding-top:140px;
padding-right:20px;
margin:0px;
}

/*↑サイトタイトル↑
-------------------------------------*/

ブログの紹介文の色・大きさ・位置を変える

今度はブログタイトルの下に表されるブログの紹介文です。 文字の大きさ・色・位置を設定できます。 cssから「ブログの紹介文」という区切りを探してください。 わからない方はキーボードのctrlキーとFキーで 「ブログの紹介文」を検索してください。

まず、文字の大きさを変えたいときは「font-size:10px」の数字を変えます。 数字を大きくすれば文字も大きくなり、小さくすれば文字も小さくなります。

次は文字色です。これは「color:#000000」の「#000000」を お好きなカラーコードに置き換えればOKです。 カラーコードはこちら(別窓で開きます)を参照してください。

次に位置です。 「padding-top:10px;」が上下の位置を表し、 「padding-right:20px;」が左右の位置を表します。 ここで注意が必要なのは「padding-top:10px;」は 「サイトタイトルから10ピクセルはなれた場所に置け」 という命令文だということです。 ページの一番上から10ピクセルはなれた場所に置けという命令文ではありませんので 注意して下さい。 「padding-right:20px;」は「右から20ピクセルはなれた場所に置け」 という命令文です。 「サイトタイトル」の「padding-right」と同じ値にする方が見栄えが良いと思います。

以下に該当部分のソースを載せておきます。 変える部分は赤い文字で、 実際にはソースにかかれていませんが、 説明するために入れた文章は青い文字で表しています。

/*↓ブログの紹介文↓
-------------------------------------*/

.site_intro 
{
text-align:right;
margin-top:15px;
font-size:10px;
↑ブログ紹介文の文字の大きさ↑
font-weight:normal;
color:#000000;
↑ブログ紹介文の色の設定↑
padding-top:10px;
↑ブログタイトルからどのくらい下に置くかの設定↑
padding-right:20px;
↑ブログ紹介文の左右の位置の設定↑
margin:0px;
line-height:150%;
}

/*↑ブログの紹介文↑
-------------------------------------*/