036@osamuのブログ一覧

カーボン調背景を適用した舌の根も乾かぬうちに大幅な仕様変更です。

カーボン調のインパクトが弱かったのと30*30サイズのリピート具合が、
とても目立っていたため、不満があるなら変えてしまえ！！

ということで、変えてみました。


Ｂｅｆｏｒｅの様子



Ａｆｔｅｒの様子




スタイルシートの追加・変更箇所は以下の通り。

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

body
{
/* background-image:url(ここに画像のＵＲＬ);*/
background-attachment:fixed;
background-position:center center;
background-repeat: no-repeat;
}

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

化粧プレートを購入したときの絵が使えそうだったので、
いろいろフィルタなど適用していったら、やばいぐらいかっこよくなりました。

Coooooolだと思いませんか？この画像・・・（自画自賛とはこのこと？！）

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

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

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

さて、今回の第四弾は待ってました～♪♪
定番中の定番、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;*/
}

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

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

さてさて、スタイルシートイジリの第二弾は、
折角第一弾でカーボン調の背景にしたのに、
愛車紹介部分が黒いまま・・・。


これを解決しましょう！！

まずは、「愛車紹介」のページです。

Beforeの様子



この部分には２つのスタイルが重なるように定義されているようで、
次の２箇所を同時に変更する必要があります。

～～～～～～～～～～～～～～～～～～
.CarTable
{

/* background: #0E0E0E;*/

}

.CarPlate
{

/* background: #0E0E0E;*/

}
～～～～～～～～～～～～～～～～～～

どうやら、.CarPlateの上に.CarTableがカスケードされているようです。

Afterの様子





次は、「愛車紹介詳細ページ」です。


Beforeの様子



一部上段のところが既に透過になっていますが、
これは先ほどの「.CarPlate」にて先に修正しているからですね。
相変わらずコンテンツの部分は黒いまま・・・。

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

.CarTableDetail
{

/* background: #0E0E0E;*/

}

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

これでどうなるかというと・・・。

Afterの様子




愛車紹介のページ以外にも上記のスタイルシートが適用されている部分は、
軒並み透明になって、かっこいくなりました！！！

さて、みなさんの期待を一身に背負って？！始まりましたこの企画。

スタイルシートってなに？的な私ですが、
みなさんのカッコイイページに追いつけ追い越せドラゴンズ・・・。

ということで、スタイルシートへの手入れをブログで赤裸々にＵＰして行こうと思います。

まず第一回のネタとしては、一番オーソドックスであろう、

「背景画像を指定する」

にチャレンジしてみます。

まずこちらが初期画面・・・



これに対してやりたいことは、

①画像を指定する
②スクロールせず固定させる

の２つにします。

まず追記するスタイルシートの場所は以下の記述があるところ・・・。

body
{
color: #cccccc;
padding-right: 2px;
padding-left: 2px;
background: #000000;
padding-bottom: 2px;
margin: 0px;
padding-top: 8px;
text-align: center;
}

①については、上記｛｝の中に

background-image:url();

を追記します。
なお（）内には画像が格納されているurlを入れるようです。


また、②については同じく｛｝の中に

background-attachment:fixed;

を追記すればＯＫです。

今回使用する背景はやっぱり「カーボン」でしょ？
ということでこのちっこいjpgを利用します。





・・・背景と同じだから、添付しているけどほぼ識別不能か・・・（核爆


で、変更後のページはこんな感じになります。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓



まずは第一歩を歩みだしました～。