036@osamuのブログ一覧

本日、携帯をプルルとならし、
Ｄへ注文してしまいました。

みんなに追いつけ追い越せドラゴンズっす！！

矢継ぎ早のＵＰで恐縮です。
段々とみんカラのスタイルシートの仕組みが分かってきました。

ページ本体のソースを解析して、スタイルシートに飛ばされているところの
定義を追加変更すればいいんですね～。

よっぽどのことが無い限り、皆さまへの質問は無くても、
自力でできそうです。

さて、今回の第四弾は待ってました～♪♪
定番中の定番、TOP画像の変更です。

トップだけあって、そのページの顔・・・。
どっかに落ちている写真を使うのも名が（？！）すたるので、
過去に撮影した写真を総検索し、最適な写真を探しました。

Beforeの様子



Afterの様子




Blackベースのページなので、本当は夜の画像とか欲しかったんだけど、
昼間の写真しかかなったよ・・・。

いづれカッコイイ写真が撮影できたら変更します！


なお、「TOP画像」などと表現していますが、
Header部分の変更であるため、本来は「Header部分にイメージ適用」的な
言い方が正しいのでしょうか？

まずヘッダーですが、750pxとなっているため、
写真も750pxで作成すると収まりが良いです。
私もそうしましたが、高さについて、オリジナルは70pxですが、
今回は400pxを頂きました。

また、画像に重なってくる文字についても、
白ベースの写真になるため、それぞれ、
色指定を若干グレーよりにしてみました。

～～～～～～～～～～～～～～～～～～～～～～～～～～

#Header
{
width: 750px;
/* height: 70px;*/
height: 400px;
/* background-image: url('/styles/black/point.gif');*/
background-image: url(※ここに画像のURL入れてね);

}

#Header a
{
/* color: #EEEEEE;*/
color: #666666;
}
#Header a:link
{
/* color: #EEEEEE;*/
color: #666666;
}
#Header a:hover
{
/* color: #EEEEEE;*/
color: #666666;
}
～～～～～～～～～～～～～～～～～～～～～～～～～～

背景画像・テーブルの透過に続き、第三弾は・・・、

タイトルの行修飾付近に手を入れたいと思います。

場所は以下の３箇所

●プロフィール画面～♪

ビホー



アフター



スタイルシート変更箇所

「.ProfileTltle」部分をコメントされている上側の記載から、
下側へ変更しました。
イメージだけではなくて、文字の色や上下マージン、左インデントなど
見栄えも若干の変更が加えられております。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
.ProfileTitle
{
/* margin: 10px 0px 9px 0px;*/
margin: 20px 0px 15px 0px;
/* padding-left: 16px;*/
padding-left: 20px;
/* background-image: url('/styles/black/point.gif');*/
　　 background-image: url();
/* color: #EEEEEE;*/
color: #888888;
}
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

●ブログタイトル画面～♪

ビホー



アフター



スタイルシート変更箇所

この部分のurlを変更しました。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

.Title
{
/* background-image: url('/styles/black/point.gif');*/
}

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

●カープロフィール画面～♪

ビホー



アフター



スタイルシート変更箇所

この部分のurlを変更しました。

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

.CarTitle
{
/* background: url('/styles/black/point.gif') no-repeat 0px 0px;*/
}

～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～

細かいところですが、みなさんのこだわりが見れるところですね。
良い素材が見つかったら、ちょこちょこメンテしてみようかな～