北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1スタイルシート変更方法

2005年06月14日

カープユニフォーム1 スタイルシート変更方法

前回に引き続きCSS(スタイルシート変更)についてです。
今回は背景設定についてです。
オリジナルスタイルシートで一番重要な部分ではないでしょうか?
この設定しだいでいくらでもカッコいいサイトが出来上がります手(チョキ)
興味のある方は見てやってみて下さい。

前回の『シンプルホワイト(両ツールバータイプ)』を例にして説明します。
ひらめきツールバーが片方しかない場合または、無くても設定は同じです。
また、テンプレートを使用されている方も変更可能です。
その前にサイトの色具合はカラーコードを知ってないといけませんので
参考までにこちらひらめきを見てください。
イメージがなかなか沸かない方はチョコチョコ変えてみてください。
設定した色によっては文字の色とかぶる可能性がありますが
その際は文字の色を変更してしまえば解決できます。
今回は背景のみで次回以降に各セレクタ(パーツ)の文字変更について説明します。
css2-1
上記は大体のサイトの各セレクタの名称を表しています。

では、『デザイン』『スタイルシート』→『シンプルホワイト』を選んでください。
上記のそれぞれの名称がある所をそれぞれ探してください。
例えば全体の背景色を白から黄色に変えたい場合ですと一番先頭にあります。

body {
font-family: Arial, Helvetica, sans-serif;

background:#FFF;
margin:0px;
padding:0px;
}


赤字の部分を

background:#FFFF00;

と変更してあげれば下記の?⇒?に変わります。
?
css2-2

?
css2-3

ひらめきもし『background:自分好きな色;』の記述が無い場合は
都度追加してください。

また、ただ背景色の変更ではなく画像を背景として取り込みたい方は
画像を記事に取り込む要領でまず好きな画像をファイルマネージャに
保存してください。
ここは例としてマリナーズサイトの背景を取込みたい場合

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding: 0px;

background-image:url(取込みたい画像のURLを記入)
}

上記の赤字部を追加してください。
注意としてファイルマネージャのHTMLソースをそのまま入れては駄目です。
http://※※※から始まる部分を抽出してペーストしてください。
私の場合はこうしてます。
まったく同じ記述を入れても変更できますが
なるべく自分のファイルマネージャーから画像を取り組んでください手(チョキ)

body {
font-family: Arial, Helvetica, sans-serif;
background:#FFFF00;
margin:0px;
padding:0px;

background-image:url(http://beijingbaseballkids.seesaa.net/mariners/bg_sea_tile.gif);
}

するとこうなりますexclamation×2
css2-4

同じ要領で各セレクタ(パーツ)を自由に変更してみてください。
画像を取り入れる場合は色指定よりも優先されますので注意してください。

次回は文字系の設定変更について説明します。
↑↑↑
ここまで来たらかなりオリジナルサイトとして完成度が上がってきたと思います。

ところで、昨日から横のスクロールバーの色を変更してみましたひらめき
これも徐々に説明していきますのでお楽しみに!
posted by むさC16 at 18:29 | Comment(2) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
先週帰国していましたが、北京へ戻ってきてビックリ。むさし氏のブログがどんどん進化しているではないか!

ご丁寧にワンポイントアドバイスまで。遅ればせながら早速RSSやってみました。

私もいろいろチャレンジしてみます。
コメント用アイコン1Posted by ふく面R at 2005年06月14日 18:27
うちもRSSに追加して頂きありがとうございます。
文系ではないので説明がかなり下手です。
かなり御見苦しい表現は勘弁ください。
もし分かりにくい様でしたら御申しください。
電話で手振りでお伝えしま〜す(笑)
コメント用アイコン1Posted by むさし16 at 2005年06月14日 18:40
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社