自由自在に枠を作ろう(その1)

自由自在に枠を作ろう(その2)

 

はい、第三回目は、ちょっと高度に色や画像をつけてみよう、にチャレンジです。

 

前回で線の形を決めました。

ちょっと復習です。りぴーと・あふたみー

 

ほにゃらら、ほにゃらら、ほにゃららららー
ほにゃほにゃ、ほにゃらら、ほにゃらのらー

 

<div style="border:4px dotted hotpink;">

ほにゃらら、ほにゃらら、ほにゃららららー<br />

ほにゃほにゃ、ほにゃらら、ほにゃらのらー
</div>

 

ですが、このままだと白さがまぶしすぎ、どこぞの洗剤のようなので、薄い黄色などを背景の色にしてみようと思います。

 

色に迷ったらWEB色辞典などのサイトで、いろいろ試してみてくださいね。

色彩感覚が問われること請け合いです!

 

 

枠内に色をつける場合は

background-color:色名

 

このプロパティが必要となります。

名前の通り、背景に色をつけるプロパティです。

 

注意点は、最後に  (半角セミコロン)をお忘れなく、かな。

プロパティの最後には必ずセミコロンを入れてください。

 

反映されていない場合は

 

セミコロンがない

全角になっている

プロパティの文字の綴りが間違っている

 

…が、三大ミスあるあるです。

 

今回は 「 lightyellow 」 という淡い黄色にしてみます。

 

<div style="border:4px dotted hotpink;background-color:lightyellow;">

ほにゃらら、ほにゃらら、ほにゃららららー<br />

ほにゃほにゃ、ほにゃらら、ほにゃらのらー
</div>

 

ほにゃらら、ほにゃらら、ほにゃららららー
ほにゃほにゃ、ほにゃらら、ほにゃらのらー

 

すると、上記のように色がつきます。

 

ファンキーを求める方は、いっそredやblueにyellowなどにしてもいいやも知れません…目立つけど、読者の方の目は激しく痛むかと思います(笑)

 

ちょっと好奇心で見たいので、枠内をそんな色にしてみたよ!という勇者はぜひご一報ください!

 

 

続いて、ふっ…色をつけるだけなど素人同然!物足りぬわ!という強者もいるでしょう、きっと。

そんな親方様ァァ、な貴方に捧げるこのタグ

 

background-image:url(背景画像のURL)

 

実は背景って色だけじゃなくて、画像も使えます。…まぁ、正直使いどころは選ぶのですけど、自分で作った画像にしたいというクリエイティブな人もいるかと思います。

(基本はHP全体の壁紙に使うことが多いタグです)

 

 

とりあえず手持ちの画像をブログにアップロードします。

この辺りはアメブロガーの方々は簡単かと思います。

 

私が用意した壁紙はこちら

自分で作ってなんですが、ちょっといい感じと自画自賛してます(笑)

Illustratorがあると、こういうのちょちょいちょいなんですよねー。

 

でも、この背景画像がどんなurlかわからないと思いますので、一度アメブロにぺたっと貼って、「HTML表示」にすると、画像のありそうな場所に、↓のようなタグがあります。

 

<p><a href="http://stat.ameba.jp/user_images/20160515/20/fuyofuyo-tombo/c2/74/g/o0300030013646826781.gif"><img src="http://stat.ameba.jp/user_images/20160515/20/fuyofuyo-tombo/c2/74/g/o0300030013646826781.gif" width="300" height="300" alt="" /></a>
</p>

 

http:// で始まり、.gif(もしくは.jpg)となっているところが、urlとなります。それをコピペして…

 

ほにゃらら、ほにゃらら、ほにゃららららー
ほにゃほにゃ、ほにゃらら、ほにゃらのらー

 

 

<div style="border:4px dotted hotpink;background-image:url(http://stat.ameba.jp/user_images/20160515/20/fuyofuyo-tombo/c2/74/g/o0300030013646826781.gif);">

ほにゃらら、ほにゃらら、ほにゃららららー<br />

ほにゃほにゃ、ほにゃらら、ほにゃらのらー
</div>

 

うん、素敵に背景があってない!(爆笑)

もっと行数があれば、いろいろできるんですけどねー。たった二行では、壁紙もあまり意味ない(笑)

 

お気に入りの写真などがあったら、著作権に触れない限りは使ってもいいかと思います。

 

 

今回はここまで!

 

 

 

まだまだモニター様募集中です♪♪

よろしくお願いいたします。

ストーン・メッセージ~貴方と石との物語を紡ぎます こんな方にお勧めです  
  • つけているのに効果を感じたことがない、効果が薄いように感じる →ひょっとすると、石本来の効能が違うのかも知れません
  • なんだか違和感を感じる→何か石からのメッセージがあるのかも?
  • 石の本音が聞きたい→お任せください、ばっちり聞き出して見せます
  • 石がどういう想いや願いを持って、自分の手元に来たのか知りたい    
    →ご縁がある以上、面白い物語をお持ちかも知れません
  • 浄化してるけど、なんかピンと来ないような?→石にもどうやら好みの浄化方法というものがあるようです
  • 石と仲良くなる方法を教えて! →私の上位さんたちとご縁を結ぶお手伝いをさせていただきます。
  •  
 

詳しくはこちら