ヌルヌルたかおーのブログ一覧

えっと、夜勤明けですが、今回は壁紙を変更（設定）してみましょう。
背景に使用する画像は各自用意して下さい。

では早速。
以下はシンプル・ピンクを読み込んだ状態の【body】セクションです。
5行目あたりにありますです。


background: #ffffff;という行で背景画像を指定することができます。
さっそくやってみましょう。

background: #ffffff url('http//なんやらかんやら.jpg');
この設定はデフォルトで画像が敷き詰められます。
#ffffffというのは背景色なので画像を敷き詰めると見えなくなります。
画像を敷き詰めない設定をすると、この色が隙間から見えます。

敷き詰める方向も指定できます。
先日のヘッダーフッターで書いたっけ。
ま、ええか。
background-repeat: no-repeat;



このままだと画面をスクロールすると、背景も一緒にスクロールします。
スクロールしたくない場合は、以下を追加します。
background-attachment: fixed;

で、まとめると・・・
【背景に使う画像を敷き詰めて、スクロールはしない】
body
{
background: #ffffff url('http//なんやらかんやら.jpg');
background-attachment: fixed;
text-align: center;
margin: 0 0 0 0;
color: #303030;
padding: 8px 2px 2px 2px;
}
と、黄緑色のところを追加するだけです。


さて、color: #303030;という個所がありますが、これは文字の色になります。
スタイルシートで個別に色指定がされてない所に採用されます。

文字色と背景色（背景画像の色）のバランスは変更してみないとわかりません。
ここでバランスをみることができますので参考にしてみてはいかがでしょうか。

---

解説がヘタクソですんまそん。
我慢してねー（ぉ

方言が少なくなります（ぁ

スタイルシートについて、既にその手のスキルをお持ちの方なら特に説明もいらないでしょが、私のようなトーシローだと理解するまでにそれなりの勉強時間が必要になります。
誤った情報を記載する可能性もあります。
そのあたりを踏まえて下さい。

あと、「スタイルシートてなんじゃいな？」という方は、ネットで検索して下さいね。（常套句（ぁ
ここではそういうのは省きます。
必死です。
知識はあとからついてくるものとします（違

---

で、スタイルシートを使いたい人って、スタイルシートで何をしたいんでしょう？
「みんカラ」は車好きの集まりなので、おそらく愛車の写真や書いているblogのテーマに合わせた画像をページ上方へ掲げたいのではないでしょうか。
あとは、パーソナルカラーや車の色に合わせた背景色や文字色への変更とか。

多少強引ですが、その方向でいきます。

---

みんカラを手っ取り早くオリジナルっぽいｂｌｏｇにしてしまう方法にページの上方（ヘッダー）と下方（フッター）に画像を載せる方法があります。

まずは、載せたい画像を用意して下さい。
僕がヘッダーに載せている画像のサイズは"７５０ｐｘ×２１６ｐｘ"です。
フッターも同サイズですが、表示サイズを制限しています。（後述）

用意できたら、スタイルシート用画像をうｐします。
操作方法は省きます。（ぉ

で、最初にスタイルシートは、開くと肝心のヘッダーフッター設定の個所がありません。
なので、スタイル編集用のテキストボックスの上にあるプルダウンから自分にあったスタイルを選択して「読み込み」ボタンを押下します。
プレビューボタンを押せば、どんなイメージなのか見ることができます。

更に、先程うｐした画像を指定すれば晴れてオリジナルっぽいページを作る事ができます。

文字ばっかりで、読むのがダルくなってくる頃だと思いますので、そろそろ変更箇所を書いておきます。
スタイル編集用のテキストボックス内に『全ページ共通ヘッダ・フッタ』というセクションがありますので、気合で見つけて下さい。

ありましたか？

こんなのです。
/*全ページ共通ヘッダ・フッタ*/
#Header
{
padding:20px 0px 20px 20px;
margin-top: 5px;
background-image: url('http://いろはにほへとちりぬ.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
width: 750px;
height: 216px
}

#Footer
{
background: url('/styles/images/header.jpg') no-repeat;
background-image: url('http://あかさたなはまや.jpg');
width: 750px;
height: 10px
}


で、察しの良い方ならどこを変更するかおわかりでしょう。
background-image　という個所に指定されているurlを変更するのです。
下線の部分にスタイルシート用画像をうｐしたページから該当ファイルのurlをコピペします。
これで画像の指定は終わりです。


あぁ、そうそう。
画像のサイズによっては、並べて表示したい場合がありますよね？
その場合は、background-repeat: no-repeat;　の　no-repeat　を変更します。
変更する値は以下になります。

repeat-x ---（横方向に並べる）
repeat-y ---（縦方向に並べる）
no-repeat ---（1つだけ表示する）
repeat ---（敷き詰める）デフォルト


画像が表示される領域サイズですが、widthとheightを指定します。
指定したサイズ以上は表示されません。


僕がフッターに使用している画像は、ヘッダーのサイズと同じのですが、画像のデキが悪いので１０ｐｘに指定して隠しているのです。

色の組み合わせって難しいわ。
統一感を出すためにスタイルシート使うのに。
弄うたら弄うただけ、変になる（汁
研究が足らんようじゃなぁ。


ワシはカラーネーム派。
１４７色もありゃ充分じゃし。
名前見ただけで、どがな色か想像できるし。






次からは、どこを変えたらどうなるかを（ホンマにするんか！？）