SSブログ
<登場人物>
kyara1.png
横浜べいすた。
最近ブログを始めた。
オリジナリティあふれるブログに憧れる。
kyara2.png
空条Q太郎。
スタンド使い?
星つながりで、ベイスタの面倒をみる。
background基礎 ブログトップ

記事の背景に画像を入れてみよう [background基礎]

kyara2.png:「久しぶりだなベイスタ・・・」

kyara1.png:「Q太郎さん、どこへ行っていたんですか?」

kyara2.png:「ああ、ちょっとエジプトへ」

kyara1.png:「みてくださいレイアウト変わりましたよ。
.article-body{
line-height:1.6;
margin:0 0 20px 0;
font-size:10pt;
font-weight:bold;
color:midnightblue;
}
へへへ、文字の色も変えちゃった」

kyara2.png:「成長したな、康一君」

kyara1.png:「えーっ、康一君て誰ですか!!
僕はベイスタですってば」

kyara2.png:「うっとおしいぞ、このアマ!!」

kyara1.png:「男だし・・・・
まぁそんなことはどうでもいいや。
Q太郎さんがいない間に季節も変わっちゃったよ。
そこで僕思ったんだ。
記事の背景部分を季節感のあるものにしたいんだ。
so-netのブログって記事部分が無地なの多いでしょ。
なんか、そういうとこカスタマイズできるかなって思っちゃった」

kyara2.png:「ふっ、お前がこうしたいって案をだすとはな。
やれやれだぜ。
よし、良いだろう教えてやる。
ここに1枚の画像がある。momiji.png
この画像を使って説明しよう。

その前に、一つ確認だ。
ベイスタ、お前は背景をどうしたいんだ?
ワンポイントで使うのか?
それとも完全な記事の背景として使うのか?
どちらだ」

kyara1.png:「ええーっ、ワンポイントで使うことなんても
出来るんですか~?
僕、完全に記事の背景でしか考えてませんでした・・・」

kyara2.png:「それでは実際の画面を見てみろ。
まず記事の背景として
(ここでは画像を繰り返し使用しています。
繰り返しについては下部で触れております)
そして時は動き出す
そしてこっちがワンポイント
そして時は動き出す
kyara2.png:「一つ忠告しておく。 どちらに使うにしても画像の大きさと透明度には気をつけろ。 背景に使う画像があまりにも小さすぎるとみっともないし 文字と重なると文字が見にくくなる。 ここは.article{ }内のwidthの値に気を配るんだな。 ワンポイントにしても同じだ あまりにも大きいと邪魔だし 文字と重なると文字が見にくくなる」 kyara1.png:「CSSの記述はどうすればいいんですか?」 kyara2.png:「.article-body{ }内でアップロードしてある 背景画像に使いたいファイルを選べば完了だ」 kyara1.png:「ところでQ太郎さん、上の画像を見ると背景画像って 自分の好きな場所に置けるんですか?」 kyara2.png:「ああ、配置できるのは次の9か所。 それぞれブログの画面と同じ配置だ。
left topcenter topright top
left centercenter centerright center
left bottomcenter bottomright bottom
選んだファイルの後ろに、置きたい場所を記述しろ。 上図のように右下ならright bottomだ。 .article-body{ ine-height:1.6; margin:0 0 20px 0; font-size:10pt; font-weight:bold; color:midnightblue; background:url("----------.jpg") right bottom no-repeat; } 画像を繰り返し使いたいときは 1.縦方向に繰り返すならrepeat-y 2.横方向に繰り返すならrepeat-x 3.縦横に繰り返すならrepeat 4.繰り返さないならno-repeatを使う画像の後ろに記述するんだな。 ただし、1は上、中央、下のどこで繰り返すかの指定が必要 2は右、中央、左のどこで繰り返すかの指定が必要だな」 kyara1.png:「わかりましたQ太郎さん。 せっかく教えてもらったので 次からモミジを背景に使ってみます」

background基礎 ブログトップ

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。