tshのブログ一覧

●「関連情報ホームページ」部分のカスタマイズ
パーツレビューや整備手帳の「関連情報ホームページ」部分がデフォルトでは太字になっているので，少しでも文字を小さく見せるために太字を解除します。
（併せて色味もちょっと修正）

変更前：

.CarLink
{
color: #444444;
font-size: 12px;
font-weight: bold;
margin: 10px 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
background: #DDDDDD;
border: solid #444444;
border-width: 1px 1px 1px 1px;
}

変更後：

.CarLink
{
color: #CCCCCC;
font-size: 12px;
margin: 10px 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
background: #333333;
border: solid #444444;
border-width: 1px 1px 1px 1px;
}

修正箇所は，color と background のカラー値の変更と，font-weight の削除です。

●フォントサイズを小さくする
ブログや愛車紹介ページのフォントサイズを小さくします。
修正箇所は多岐に渡りますが，やっていることは font-size のピクセル数を小さくしているだけです。

変更前：

.BlogText
{
font-size: 14px;
padding-bottom: 20px;
color: #CCCCCC;
}

（中略）

.CommentBody
{
padding-right: 2px;
padding-left: 2px;
font-size: 14px;
color: #eee;
padding-bottom: 2px;
padding-top: 2px;
word-break: break-all;
}

（中略）

.ProfileTableLeft
{
color: #EEEEEE;
border: 0px double #2c2c2c;
text-valign:top;
width:80px;
background-color: #333333;
font-size:14px;
line-height:130%;
}

.ProfileTableRight
{
color: #eee;
border: 0px double #3c3c3c;
text-valign:top;
background-color: #444;
font-size:14px;
line-height:130%;
}

（中略）

.PhotoMemo
{
margin:5px 0 0 0;
text-align:left;
font-size:14px;
}

変更後：

.BlogText
{
font-size: 13px;
padding-bottom: 20px;
color: #CCCCCC;
}

（中略）

.CommentBody
{
padding-right: 2px;
padding-left: 2px;
font-size: 13px;
color: #eee;
padding-bottom: 2px;
padding-top: 2px;
word-break: break-all;
}

（中略）

.ProfileTableLeft
{
color: #EEEEEE;
border: 0px double #2c2c2c;
text-valign:top;
width:80px;
background-color: #333333;
font-size:13px;
line-height:130%;
}

.ProfileTableRight
{
color: #eee;
border: 0px double #3c3c3c;
text-valign:top;
background-color: #444;
font-size:13px;
line-height:130%;
}

（中略）

.PhotoMemo
{
margin:5px 0 0 0;
text-align:left;
font-size:13px;
}

たまにオリジナルのスタイルシートも機能追加に伴って修正されることがあるので，ユーザスタイルシートで自分がいじった部分を記録しておくことにしました。
（以降，順次掲載予定）

●ヘッダ部分のカスタマイズ
ヘッダ部分の背景画像を入れ替えて，ついでにタイトル文字列のスタイルも変更します。

変更前：

#Header
{
padding:15px;
margin-top: 5px;
background: #353535;
margin-bottom: 0px;
width: 750px;
height: 70px;
background-image: url('/styles/black/point.gif');
}

（中略）

.BlogTitle
{
color: #EEEEEE;
font-weight: bold;
font-size: 20px;

}

変更後：

#Header
{
padding:5px;
margin-top: 5px;
background: #000000;
margin-bottom: 0px;
width: 720px;
height: 240px;
background-position: center center;
background-repeat: no-repeat;
background-image: url('ヘッダ用画像の URL');
}

（中略）

.BlogTitle
{
vertical-align: -30px;
padding-left: 30px;
color: #EEEEEE;
font-style: italic;
font-size: 24px;
}

当方はブラウザに Firefox を使用していますが，Firefox 3 にアップデートすると愛車紹介以降のページの文字が見えなくなる，という現象に遭遇していました。
（正確に書くと，背景が黒なのに文字まで黒になってしまう）

Firefox 2 の時は平気だったので Firefox のバグかと思っていたのですが，改めてスタイルシートを調べてみたら，スタイルシートのバグだということが本日判明しました…。

当方は「ブラック」のスタイルシートをベースにカスタマイズしていますが，元々の「ブラック」のスタイルシートにバグがあったようです。

＃オリジナルのスタイルシートはバグ修正済でした。

具体的には，下記の赤字の箇所を修正する必要があります。

修正前：

.CarPlate
{
border-left:0px solid #777777; border-right:0px solid #777777; border-top:0px solid #777777; border-bottom:0px solid #777777; font-size: 14px;
text-align: left;
line-height: 125%;
padding: 0px;
background: #0E0E0E;
color: #000000;
word-break: break-all; margin-left:0; margin-right:0; margin-top:0; margin-bottom:15px
}

修正後：

.CarPlate
{
border-left:0px solid #777777; border-right:0px solid #777777; border-top:0px solid #777777; border-bottom:0px solid #777777; font-size: 14px;
text-align: left;
line-height: 125%;
padding: 0px;
background: #0E0E0E;
color: #CCCCCC;
word-break: break-all; margin-left:0; margin-right:0; margin-top:0; margin-bottom:15px
}

ご参考までに。

昨日の夜中に突然思い立って，スタイルシートをいじってみました。

やった内容は，

• タイトルに背景画像を追加，および文字列を Italic にした。
• 各ページの文字の大きさをちょっと小さくしてみた。
• パーツレビューなどの「関連情報ホームページ」の中のスタイルを変更。（色を変える，文字が太字になっていたのをやめる）

といったところです。

＃来週は本家 Blog の方もちょっといじってみるか…。

ちなみに，この画像は最初タイトル用にアップしていた画像です。
ちょっと左側の余白が寂しかったので，とりあえずクロスポマークのアップを突っ込んでみました。