リンクルデザイン変えてみよう

というコメントを頂き、赤プタさんのところへ

赤プタさんですよ。　赤ブタさんではありませんよ＾＾；

(￣_Ｊ￣)ん？　ヘッダー画像変わってますよ＾＾；

もう少し具体的にお聞かせいただければ・・・・


とりあえず　背景画像をスタイルシートで変更するやり方を紹介しておきます。＾＾


今回はこの画像をトップの背景にしてみましょう！＾＾




まずこの背景に使う画像が大きいと繰り返しの指定をする背景には
むきません。

そして、今回のように、動く画像を使うと、いつまでも動いております。＾＾；


まず、リンクルさんのこの部分の初期　ＣＳＳは



(・－・)・・・ん?　ちょっと崩れてみにくいので、文字で
かきますね。

.header {

    height: 230px;

    width: 760px;

    text-align: left;

    background:    url(/template/basic01/header_image.jpg) no-repeat center top;
   
margin: 0;

}

このurlのあとの括弧の中に、あらかじめ画像ライブラリに　ＵＰ　しておいた
画像を指定します。

画像のURLの調べ方は・・・・・

投稿画面の左側　画像ライブラリをクリックして背景にしたい画像の　見るを
クリックする。




次に画像だけが表示された画面がでてくるので、




アドレスの　アルファベットの上で　右クリック　→　コピー

これをさこほどの

    background:    url(/template/basic01/header_image.jpg) no-repeat center top;

の　urlのあとの（　　）の中に貼り付けてください。

そして次に　no-repeat　だと具合がわるいのと、なれてない方は、なにを
しているのかわからないと思うので・・・


この一括で記述してある　背景の指定をそれぞれ、分けて記述します。
ちなみに、一括指定の記述を日本語で表すと　

背景：画像を使用（画像の場所はここ） 繰り返しはしない 配置は、左右は真ん中で上下は、上に配置

となります。　私はこれを、省略で書かずに




こうやって記述しました。

そうすれば、

背景－画像：場所はここ
背景－繰り返し指定：Ｘ軸方向にだけ繰り返す
背景－配置：左右は、右、上下は下

とぱっと見たときにわかりやすいです。＾＾；


で、今回の指定ですが・・・

ｐｏｓｉｔｉｏｎの　rightは、べつになくても大丈夫です。
Ｘ軸方向の下だけ繰り返し背景を指定するってしたいだけなので　右を表す
ｒｉｇｈｔは特に関係ありません。


そうすると、現在のこのブログのヘッダーのように、お辞儀ネコがお辞儀いたします。


使用するアイコンにつきましては、素材サイトにて、たくさん配布されているので
探してみてください。


別に、背景画像だけをつかわなくても、普通の　アイコン系の素材でも、
使い方によっては、背景画像として利用できますよ。＾＾


でも、赤プタだんのヘッダー画像はとっても素敵にまとまっていて
いいですよね。＾＾