☆GEN☆のブログ一覧

今回のスタイルシート、不評の声をよく聞きますよね^^;


取り敢えず、おいらは自分なりのカスタマイズで、なんとか落ち着きました♪



各ページ毎にカスタマイズをしないと、基本だけカスタマイズすると色合いや、文字が見え難くなったりするので、気をつけて下さい。

カスタマイズは途中保存が可能です。
プレビューで確認しながら、作業を進めて行く事をお勧めします。
一度確定すると修正も大変なので、ご注意ください。


まず、基本編として順次整備手帳へアップして行きますので、参考にしてください。

カスタマイズのやり方は時間の関係で、少しずつアップしますので、予め、ご了承願います。

但し、お友達登録されている方のみ限定して、質問等をメッセージで対応します。
でも、全ての問いに答える自信もなく、お答えできない時はごめんなさい。
出来るだけ調査してお答えしたいと思いますが、時間がかかる場合もあるので、その辺もご理解願います。


皆さん、お気に入りのスタイルになれば良いですね♪

コンテツメニュー（ブログ、愛車紹介、おすすめスポット、掲示板）をクリックした後の処理方法を紹介します。

画像は、ブログがアクティブになった場合の例を表しています。








スタイルシートを読み込んだ直後のソースです。
(ブラックを選択しております）

.TabActive
{
background-color: #666666;　←枠内の色を指定しています。
text-align: center;
font-size: 12px;
font-weight: bold;
border: #999999 0px solid;
}


↓↓↓↓↓↓↓↓↓↓↓↓【変更後】↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓



TabActive
{


background-color: #ff0000;　←私は枠内を赤色に変更

ここから追加のソースです。

border-width: 1px 1px 1px 1px /* 枠の幅 */
border: solid #ff0000; /* 枠の色 */

ここまでが追加のソースです。

text-align: center;
font-size: 12px;
font-weight: bold;
border: #ff0000 1px solid;
}

枠線の詳細は
border-width:画像左の線幅を 画像右の線幅 画像上の線幅 画像下の線幅;
となります。

ちなみに、枠の幅は数字が大きくなるほど線幅が太くなります。

ソースの中に/* ○○○○ */とあるのは、そのソースが何を表しているのかを後で見てもわかる様にコメントを入れるためのものです。
プログラムソースへのコメントなので、コンパイルした時にはもちろん表示されませんが、始まり（/*）と終わり（*/）をちゃんとしないと大変なことになる恐れがありますのでご注意下さい。

コンテツメニュー（ブログ、愛車紹介、おすすめスポット、掲示板）の表示を変更する方法を紹介します。












スタイルシートを読み込んだ直後のソースです。
(ブラックを選択しております）

.TabInactive
{
background-color: #333333;
text-align: center;
font-size: 12px;
border: #999999 0px solid;
}


↓↓↓↓↓↓↓↓↓↓↓↓【変更後】↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓


.TabInactive
{
background-color: #000000;　←枠内を黒色に変更
text-align: center;
font-size: 12px;
border: #ff0000 1px solid;　←枠を赤色に変更　枠線幅は1pxに変更
}



ちなみに、枠の幅（1px）は数字が大きくなるほど線幅が太くなります。

スタイルシートを読み込んだ直後のソースです。

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

↓↓↓↓↓↓↓↓↓↓↓↓【変更後】↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

#Header
{
padding:15px;
margin-top: 5px;
background: #353535;

ここから追加のソースです。

border-style: solid; /* 枠の種類 */
border-color: #ff0000 #ff0000 #ff0000 #ff0000; /* 枠の色 */
border-width: 1px; /* 枠の幅 */

ここまでが追加のソースです。


margin-bottom: 0px;
width: 750px;
height: 200px;
background-image: url('ヘッダー画像のリンク先アドレス');
}

色指示の詳細は
border-color:画像上の線色 画像右の線色 画像下の線色 画像左の線色;
となります。
色については、とほほのWWW入門さんのSiteを参考にして見てください。

ちなみに、枠の幅は数字が大きくなるほど線幅が太くなります。

ソースの中に/* ○○○○ */とあるのは、そのソースが何を表しているのかを後で見てもわかる様にコメントを入れるためのものです。
プログラムソースへのコメントなので、コンパイルした時にはもちろん表示されませんが、始まり（/*）と終わり（*/）をちゃんとしないと大変なことになる恐れがありますのでご注意下さい。

また、フッターも同じ要領でソースを追加すれば画像に枠線が追加できます。

今度は、背景を変更するための手順を掲載しました。

背景変更編

ここは、車の整備手帳を載せるとこだけね^_^;

まぁ～、気にしないで下さい（爆