今回は特殊効果的なことをしてみたいと思います。
ただ、使用になられるPC環境やブラウザによっては反映されない場合がありますから注意が必要です。
自分のPCで反映されてるとしても、見てくださる方のPCでは反映されてないかもしれないということも考えながら色選択に注意しましょうってことです。
ちなみに動作するブラウザはWindows Internet Explorer5.5以降だと思われます。
それではスタート

まずはいつもの「body」のところです。
今回は画像は使わないので、「background」は色の設定のみです。

そこにグラデーションのための次のような属性&値を書き加えます。

って、やたらと長いこの英文・・・細かく分けて解説していきます。

まず「filter : progid:DXImageTransform.Microsoft.」ですが、これが特殊効果をしますよっていう意味です。
そのあとの「Gradient」がグラデーション効果にするっていう意味です。
※使用できる効果はこのほかにもありますけど、今回はグラデーションだけの説明にします。

そして「( ～)」の中が詳細設定となります。
「startcolorstr」、これがグラデーションの始まりの色です。
ということは当然終わりの色があるわけですから、終わりの色が「endcolorstr」となるわけです。
「gradienttype」、これはグラデーションの向きのことです。
値は「0」が縦方向、「1」が横方向となります。
それぞれの区切りは「,  (カンマ）」を使います。

一見英語ばかりでややこしいですが、日本語に訳すと、スタートカラー・エンドカラー・グラデーションタイプってことですから分かりやすいですよね。

設定

それぞれの意味が分かったところで設定をしてみたいと思います。
今回はグラデーションを縦方向にして、色は黒から白にしてみようと思うので、

となります。
グラデーションの方で色設定をしてるからバックグラウンドでの色設定はいらないんじゃないのって思いますけど、グラデーション効果が反映されるまでのために似た色を設定しておく方が違和感がなくていいと思います。

まとめ

今回のは難しいようでじつは単純なことでしたね
なかなかデザイン的には難しいかもしれませんが、こういう効果というのは見てて楽しいですよね。

今回でページの背景は終わりたいと思います。
次回は遊び心でスクロールバーの色設定を紹介したいと思います。
それではお疲れ様でした。

今回も前回同様ページの背景に画像を使う方法ですが、今回は1枚の画像だけを表示させて、スクロールしても動かない見え方になるように設定してみたいと思います。

もう3度めですから慣れてきましたよね。
↓前回の設定です。

でも説明するにはこの画像だとつまらないので、今回は これ を使って説明します。

まずは上の設定だと「position」、「repeat」、「attachment」といった設定をしていませんので、初期値で画像は縦横に繰り返されるようになっています。
「position」とは「background-position」のことで、画像の位置指定を意味します。
「repeat」とは「background-repeat」のことで、画像の繰り返しを意味します。
「attachment」とは「background-attachment」のことで、画像の固定を意味します。

background-position

それでは「background-position」から説明していきます。
これはポジショニングのことですから、「left (左）」、「center (中央）」、「right （右）」、「top （上）」、「bottom （下）」という値で設定します。
基本的には縦の設定と横の設定の2つを組み合わせて設定します。
ですから書き方は、

となります。
また、細かなポジショニングをしたい場合は「px」や「%」でも設定できます。
この場合は、左から〇px 上から〇pxという設定になるので

のようになります。

background-repeat

これは繰り返しのことですから、「repeat （全方向）」、「repeat-x （横方向）」、「repeat-y (縦方向）」、「no-repeat （繰り返さない）」という値になります。
全方向は初期値ですから、設定はしなくても同じです。
現に前回の青い星の画像は何も設定していなかったので全方向に繰り返され、星が敷き詰められたようになってましたよね。
でも今回は1つだけ表示させたいので、値を「no-repeat」にします。

になります。

background-attachment

これは画像の固定ですから「fixed」という値にします。
初期値は「scroll」ですから使うことはないと思います。

になります。

設定

一通り説明が終わったので、設定方法に移ります。
今回の設定は、画像位置は左上に1つの画像だけ止まらせるようにしますから、

になります。

今回は背景に画像を用いる方法を紹介します。
っといっても、これには何パターンかの方法がありますので、今回は画像を敷きつめる方法を紹介します。

今回も前回同様スタイルシートの中の「body」をイジリます。
前回は「background-color」という属性でしたが、今回は「background-image」という属性になります。
でも、色も画像も背景に敷くという点では一緒ですよね。
なので属性は「background」という一括の属性で設定してみます。
色の選択は画像の色に似た色にしておきましょう。

こんなかんじになります。
ですが、今回は画像を使用するので、まず画像の登録をしなければいけません。

画像の登録方法はいろいろありますが、無難に「管理画面TOP」→「画像一覧」ページへと移動して、「参照」から使用する画像を選んで「アップロード」をクリックします。
この時、「オリジナルサイズ」にチェックが入っているのに注意してください。

これで画像の登録は完了です。

次に今度はアップロードした画像のurlをコピーします。
アップロードした画像のサムネイルをクリックすると、画像のページが新たに表示されます。
そのアドレスバーに記されているurlをコピーします。
もうコピーや貼り付けの仕方はご存知ですよね。
分からなければ、過去記事や↓画像を参照してくださいね。

次にコピーしたURLを貼り付けます。
コピーしたURLがhttp://shiga-saku.net/usr/customshichao/calender-icon1.jpgだったとすると、

こんなかんじになります。
これで青い星が敷きつめられたようになりました。

まとめ

今回のはいかがでしたか
前回よりも少しだけ難易度が高くなった分、設定できた時の喜びも増したことと思います。
さらに画像ということもあり、デザイン的にも自分好みとなったことでしょう。

次回はページの背景に1枚の画像を敷くように設定する方法を紹介したいと思います。
それではお楽しみに。

さぁ、今回からスタイルシート設定の本番がやってまいりました

第1回目は「ページの背景色を変えてみよう」です。キャーゞ(^o^ゝ)≡(/^ー^)/"""パチパチ
まずは土台となる背景です。
色の他にも画像を使ってといったようなこともできますが、難易度の低いことからやっていきましょう。

それでは早速、スタイルシート欄を御覧下さい。
その中に「body」というセレクタ名があるはずです。

そこをイジってみたいと思います。
↑の画像は、このブログの設定ですので、みなさんのとはちょっと違うと思いますけど、これはまぁ参考までに・・・。

背景の色が設定されている属性には「background」もしくは「background-color」と書かれています。
そのあとに「#ffffff」や「#fff」と書かれています。
ここの「#」のあとに続く 数字やアルファベットを変えることによって色の変更ができるのです。
といってもこんなのをマスターしている人なんてほとんどいないでしょう。
でもご心配なく。
みなさん記事を書かれる時に、文字の色を変更されたことありますよね。
そのカラーパレットをよ～く御覧下さい。

ちゃんと6文字の数字やアルファベットが表示されているはずです。
滋賀咲くBlogは親切ですね～。
そこでお好みの色を選んで、6文字の数字やアルファベットを「#」のあとにコピー＆貼り付けをしてやればいいんです。
コピーは前回お話した「Ctrl」＋「C」で、貼り付けは「Ctrl」＋「V」ですよ、覚えてますか大丈夫ですか

それでは設定してみましょう。
以下のように書いてみてくださいね。

「#000000」は黒色です。
これでページの背景が黒色になったと思います。

いかがでしたか
自分好みの設定にするのって楽しいですよね。
次回は画像を使ってのページ背景の設定をしましょう。
それでは今回はここまで、お疲れ様でした。