記事に背景画像を付けましょう [blog向上委員会]
さて、今回は久々の『blog向上委員会』カテゴリの話です。
2007-10-20 優しくない方が気にかかる
2007-10-08 【歌詞】うつろい
この２つの記事で、背景画像を付けたり、２つの画像の切り替えをやっていたら、いつも来てくれるnicoちゃん、ゆうこちゃんが興味をちょっぴり持ってくれたので、それならばと書き始めた訳です。
このblog向上委員会カテゴリの記事って、実は書くのがめっちゃめんどくさいんで(笑)、なかなか書く気になれませんでした。なので、ちょうどいいきっかけをくれたお二人に感謝です。（おじぎ）
今回は、背景画像の話。次回は、画像の切り替えの話をします。
■背景色の付け方
まずは、画像うんぬんの前に、背景色の付け方を。
この茶色い背景の部分、これをblogの記事本文やと思ってください。で、今こうやって書いてる部分を、<div>～</div>タグで囲みます。
<div style="background-color:#663300; color:#ffffff;">
この茶色い背景の部分、これをblogの記事本文やと思ってください。で、今こうやって書いてる部分を、<div>～</div>タグで囲みます。
</div>
緑色の文字の部分をコピペして、その間に文字を書けばあら不思議。背景色がぁっ♪
style="～"で指定しているものは、Cascading Style Sheets (CSS)というもので、まぁ、見映えを定義するようなものやと思っててください。
<div style="background-color:#663300; color:#ffffff;">
この茶色い背景の部分、これをblogの記事本文やと思ってください。で、今こうやって書いてる部分を、<div>～</div>タグで囲みます。
</div>
緑色の文字の部分をコピペして、その間に文字を書けばあら不思議。背景色がぁっ♪
style="～"で指定しているものは、Cascading Style Sheets (CSS)というもので、まぁ、見映えを定義するようなものやと思っててください。
| 特性名 | 指定内容 |
|---|---|
| background-color | 背景色の指定 |
| color | 文字色の指定 |
色の話って、結構ポイントなんです。背景色が茶色で文字も茶色だったらどうなると思います？ 聞くまでもありませんよね。背景画像を付けたら、文字が読めませ～ん・・・ってWebページ、たまに見かけるでしょ？
なので、背景画像を語る前に、この背景色と文字色の話が必要不可欠なんです。
CSSの特性の後に指定している #663300 とか #ffffff は意味不明やと思いますが、色のサンプルを置いた記事の方を参照してみてね！
2007-03-11 文字サイズと色の変更
※注意
同記事に、改行についての注意点を記載してます。So-net blogでは、普通にやると
改行が無視されます(なんでやねん!?)ので、<br />を埋め込んでね。
全然関係ない話ですが、例のところの「<div>～</div>」って、意味不明ですよね。これを打ち込んでブラウザで見ると、
「<div>～</div>」
となるんです。要は、「実際に打ち込んだのはこうだよ」というのを示したかったので、入力ミスではありません。あしからず。
■背景画像の付け方
さて、ここからが本番です。みなさん、画像をアップロードしたりして、張り付けてますよね。
<img src="/blog/_images/blog/_af2/nyx/9682989.gif" />
画像のURLとしては、この緑色の文字の部分だけを使います。
※注意
このURLは、So-net blogの場合のものです。他プロバイダをご利用のかたは、
そのプロバイダ固有のURLをご指定くださいね。
背景画像が敷き詰められた様子は、どうでしょうか。
記事本文に背景が付いてると、ちょっと嬉しくなりません？・・・俺だけかな(苦笑)。
<div style="background-image: url(/blog/_images/blog/_af2/nyx/9682989.gif);">
背景画像が敷き詰められた様子は、どうでしょうか。<br />
記事本文に背景が付いてると、ちょっと嬉しくなりません？・・・俺だけかな(苦笑)。<br />
</div>
背景色と同じく、この緑色の部分をコピペして、その間に記事を書きます。もちろん、画像のURLの部分は、ご自分のアップした画像のものを使ってくださいね。
この記事では、ご覧の通り一部だけを<div>～</div>タグで囲ってアクセントを付けてます。ま、実際はアクセントではなく説明のためですが。
記事『【歌詞】うつろい』の場合は、最初から最後まで囲って全体に背景を付けています。
尚、前項の背景色のところでも書きましたが、<div>～</div>タグで囲むと改行が無視されますので、2007-03-11 文字サイズと色の変更に書いてある注意点を読んでみてくださいね。具体的には、改行したいところに<br />というタグを埋め込むだけです。
また、背景画像の色に文字色が埋もれてしまう場合は、文字の色も変えましょうね!!
次回は、画像の切り替えについての話です。ご期待あれ♪
Background image by PurpleMoon
やっぱり優しいわぁ。
書くの大変なのに書いてくれる氷の翡翠さん♪好きだわぁ。
でも難しい・・・頑張って挑戦してみますね！！
Thanks ☆☆** v(￣ー￣)v**☆☆ Thanks
by ゆうこ (2007-10-28 07:43)
ゆうこちゃん、いらっしゃいませ♪
なんか、聞きなれない言葉が並んでるなー。
２行めの最後のところ、できれば繰り返しでお願い(笑)。
HTMLってのは、やはり難しく感じるんやろね。私は昔から、ホームページビルダーとかの作成ツールは使ったことなくて、テキストエディタでごりごりHTMLを打ち込んでたので、慣れてしまってるからねぇ。
HTMLを知らない人でも出来るように、色分けとかを使って、なるべくとっつき易いようにしていくので、これからもよろしくね！
by 氷の翡翠 (2007-10-28 11:07)
これいいっ！！
と思ってもいざやろうとなると面倒臭くなっちゃうんだよなぁ。
一応、ブックマークしとこっと。
by nico (2007-10-28 13:56)
nicoちゃん、いらっしゃいませ♪
うんうん、同感です。面倒なんですよね。そのせいかどうかわかりませんが、Webページの方がほったらかしになってしまって(汗)。
ブックマーク、ありがと♪ めっちゃ嬉しいなっ♪♪♪
by 氷の翡翠 (2007-10-28 14:44)
こんな絶好球を見逃していたなんて(^^ゞ
がんばってやってみます(*^^)v
この記事もさることながら．．．ここまで優しくて、マメなメンズが
夜な夜な一人で飲み歩いているとは考えにくいなぁ （疑惑） (#^.^#)
by mi-mi (2007-10-30 22:36)
いぇいぇ、mi-miさん、あ、いらっしゃいませ♪
マメでもない、優しくもない、そんな男なんで、いつもひとりで飲んでるんですよ。それだけならまだいいけど、俺は優しくもないのに優しいと勘違いされるから、えらいこっちゃ♪
そう、私は言葉攻めタイプ♪・・・って、いやいや、そういう話ではなくて(汗)。
あんまりほめてると、惚れちゃうよ？(笑)
そんなこんなで、記事の話に戻して・・・と。mi-miさんも、WebページではなくてblogでNetデビュー？ だとしたら、背景を付けるだけでも、ちょっとした驚きがあるかもね。
難しそうに思えるかもしれんけど、意外と簡単に出来ることって、いっぱいあるんですよ。
どこかで見たWebページの様なことをやりたいと思ったら、遠慮なく質問してくださいね！
by 氷の翡翠 (2007-10-31 00:16)
こんばんわん！
これこれ！pokkotunもかなり気になって居ったとですよ(´∀｀)ﾉ'`ｨ
因みにね 背景色はｻｲﾄﾞﾊﾞｰでも可能なのかな？！
なぁ～んて 教えてもらうの大好きなので（照
氷の翡翠ｾﾝｾｲ♪ お・し・え・てヾ(´∀｀○人●´∀｀)ﾉ
by pokkotun (2007-11-04 20:45)
pokkotun、いらっしゃい♪
pokkotunはそうやって食いついてくれるかな？と、期待してたよ(笑)。
サイドバーはね、スキンを何でやってるかによって、方法が違うねん。
標準で提供されてるスキンやとJavaScriptでリアルタイムに書き換える方法、カスタムスキンなら、スタイルシートを書き換える。後者の方が、簡単やで。
pokkotunのblogは、多分カスタムスキンっぽいけど、どうなん？そのへんを教えてくれたら、何かしらアドバイス出来ると思うよ。
by 氷の翡翠 (2007-11-04 21:03)
いつのまにか、ブログ活用講座に？？
参考にさせていただきます♪
by ユキ (2007-11-07 10:36)
ユキちゃん、いらっしゃいませ♪
このカテゴリの始まりは、プロフィール画像をGIFアニメーションにしたいってとこからなんです。プロフィール用の画像って、JPEGだろうがGIFだろうが、なんでもPNGに変換されてしまって、せっかくのGIFアニメが単一画像になってしまってね。
So-netさんに逃げ手は無いのかと問い合わせたんですが、仕様なので無理ですとの回答。わざわざ変換する意味あるんかいな？
で、悔しいのであれこれ試した結果を、2006-06-06と2007-02-05にアップしたのが始まりです。
という訳で、このカテゴリ『blog向上委員会』は、記事数は少ないのですが、細々と続けてるんですよ。
もし、こんなの出来ないかな・・・とかってのがあったら、言ってみてね！
もちろん出来ないこともあるので、そこはお許しを。
by 氷の翡翠 (2007-11-08 10:30)
ぁいぁい！カスタムすきんでぇ～す！( *´艸｀)
ﾜｸﾜｸｰ♪
by pokkotun (2007-11-11 15:36)
pokkotun、いらっしゃい♪
blog向上委員会はHTML & CSSの初心者向けと考えています。なので、CSSをあれこれ変更するのはちょっと難しいやろなーと思うので、説明文を作ってWebページの方のスペースにアップしておきました。失敗すると、全体が崩れてしまう恐れもあるから、すぐに元に戻すにはどうしたらいいかについても説明しておいたからね。
http://www.nightstreet.net/~selene/pokkotun.html
ではでは、がんばって♪
by 氷の翡翠 (2007-11-11 19:21)
ﾍﾟｺ('-'*)ﾘﾝ(,_,*)ﾍﾟｺ('-'*)ﾘﾝ(,_,*)！
ありがとうさんですぅー！
声援を受け（ぇ ちこっとずつ頑張ります！
うっれじー(´∀｀)ﾉ
お忙しい中 ホントにありがとうございます！
by pokkotun (2007-11-21 13:12)
ははん♪(笑) pokkotun、いらっしゃい♪
俺も万能やないから偉そうなこと言うつもりはないけど、わからんこと有ったら、遠慮なく聞いてね。わらかんことは「わからん」ってちゃんと言うし♪ だって、わからんことを知ったかぶりして、なんの意味もないからね。
ただ、わかることなら、なんぼでも答えるからね!!!
by 氷の翡翠 (2007-11-22 02:20)
りにゅーある したぞな！( *´艸｀)
実は、すたんばっていたのです（ぁ
by (2007-11-25 18:22)
*pokko*？ ・・・え？ ん？
なるほど、そういうことでしたか。ふふん♪(笑)
さっそく見に行きましたよっ♪ これからも、よろしくね♪
by 氷の翡翠 (2007-11-25 21:41)