記事背景のCSS編集

４月からやっとアメブロもCSSが使えるようになりました。

今まで不可能だった、背景画像もCSSを設定すれば、大丈夫のようです。

「CSS編集」メニューに、難しそうなタグがだだだ～～っと書かれていて

はじめは引きますが、コツがわかれば大丈夫！

私のブログは蝶のテンプレで、テンプレートごとに違いはありますが

CSSの記述の中の

/* ----------------------- background-color-control ----------------------- */

/* ----------------------- menu_element_basis ----------------------- */

で、はさまれた部分を変更します。

メニューや、タイトル部分など、いくつかのブロックにわかれていますが

その中で記事部分は

#main {

}
というところになります。

「#main {」が記事デザインのはじまりのタグで「}」は、終了を表します。

{}ではさまれた部分になにも書かれていなければ、そこにタグを記述します。

何か書かれていれば、一度{}の間を削除してください。

そこに、

background-image: url("画像のURL");

background-repeat: repeat;

と、入れてください。↓のようになります。

#main {

background-image: url("画像のURL");

background-repeat: repeat;

}

background-image: url("画像のURL");　は、使う画像を指定します。

素材屋さんなどで、背景に使いたい画像をダウンロードして

一度自分の画像フォルダにアップロードします。

background-repeat: repeat は、画像の張り方を指定しています。

repeatと指定しているので、タイル張りに画像が表示されます。

設定が終わったら、必ずプレビューで確認してみましょう。

変になってしまったら、一度元の設定に戻してください。

キラキラ文字のTHANK YOU

　





　

★使いたい画像の上で右クリックして「名前を付けて保存」を選びダウンロードします。
★ご自分の画像フォルダにアップロードします。
★挨拶、プロフィール用にどうぞ。名前や文字を入れて加工してもいいかも♪
★著作権表示もよろしくお願いします。「素材集　TWINKLE」http://itwinkle.ameblo.jp/

きらきら文字THANK YOU ２

　





　
★使いたい画像の上で右クリックして「名前を付けて保存」を選びダウンロードします。
★ご自分の画像フォルダにアップロードします。
★挨拶、プロフィール用にどうぞ。名前や文字を入れて加工してもいいかも♪
★著作権表示もよろしくお願いします。「素材集　TWINKLE」http://itwinkle.ameblo.jp/

キラキラ文字 HELLO

　



★使いたい画像の上で右クリックして「名前を付けて保存」を選びダウンロードします。
★ご自分の画像フォルダにアップロードします。
★挨拶、プロフィール用にどうぞ。名前や文字を入れて加工してもいいかも♪
★著作権表示もよろしくお願いします。「素材集　TWINKLE」http://itwinkle.ameblo.jp/

蝶のプレート

　



　

★使いたい画像の上で右クリックして「名前を付けて保存」を選びダウンロードします。
★ご自分の画像フォルダにアップロードします。
★挨拶、プロフィール用にどうぞ。名前や文字を入れて加工してもいいかも♪
★著作権表示もよろしくお願いします。「素材集　TWINKLE」http://itwinkle.ameblo.jp/