ブログカスタマイズ　その2

ブログカスタマイズ　その2　～ブログを自分なりにデザインしたい～

■背景の色や壁紙の模様は、スタイルシートで設定できる。

初回の解説で、ブログのデザインアレンジは、スタイルシートと、個別ページの設定でできる事を説明しました。特にスタイルシートを適切に設定すれば、さまざまなアレンジができます。

ブログの背景色などの設定もそのうちのひとつ。・・・というか、背景や壁紙の設定はスタイルシート利用の代表格といってもいいかもしれませんね。そこで、今回の解説では、ブログの背景色や壁紙の設定の仕方を解説します。

■背景の色や模様はどうやって設定されているのか？

背景の色

前回の解説を読んで、鋭い方は、もう推測できているかもしれませんね。

そう、ブログやホームページの背景の「色」は、スタイルシート上に「カラーコード」として書かれているのです。だから、スタイルシートの、あの訳の分からない呪文みたいなテキストデータのうち、「ここが背景の設定をしている部分だ」と分かれば、そこに書いてある「カラーコード」を変更すれば、ブログの背景色もその色に変えられる、というわけです。

ただし、このやり方で変えられるのは「カラーコードで指定された色」だけ。単純な「色」ではなく、模様や画像の場合はちょっと異なります。

模様や画像の背景

背景のデザインは、カラーコードで色を指定する以外に、「画像を利用する」という方法もあります。単色で塗りつぶすんではなく、模様のような背景になっていたり、背景に写真やイラストが表示されているようなやつが、それです。

この場合は、カラーコードのようにちょちょいと修正、というわけには行きません。画像そのものを変更する必要があるからです。

ちなみに画像を背景に利用すると、どうなるか？というサンプルを以下に示します。

基本は例１です。これは、←こういうデザインの画像を用意し、ページ全体にタイルのように敷き詰める、というやりかた。用意する画像のサイズが大きくなれば大柄な模様になるし、小さい画像なら細かな模様になりますよね。

例２は、例１のちょっとした応用。例１は、用意した画像を、タテ・ヨコに敷き詰めているのですが、例２は、横に細長い画像を用意し、縦方向だけに並べる、というもの。こういう風に、用意した画像を、「タテヨコに敷き詰める」「タテ方向に並べる」「横並びに並べる」というような設定を利用することで、こんな模様も作ることができます。

例３も、例１の応用。小さな画像ではなく、大きな画像を用意して、「敷き詰めない」・・・つまり、タテ・ヨコに並べない設定をしたもの。

・・・とまあ、こんな風に背景に画像を指定することで、いろいろなバリエーションの背景が作れる、というわけです。

■スタイルシート上での変更のしかた

（１）カラーコードの変更の仕方

たとえば、こんな背景の黄色い背景のスタイルを薄緑色に変更したい場合を例にとって説明します。

上記のように、スタイルシートの中に「body{・・・・}」という部分があるはずです。ここの{　}の中に「background-color:#FFFF33」という記述があるはずですので、この部分のカラーコードにあたる「#FFFF33」を、「#99FF66」に変更すればよい、というわけです。

スタイルシートの設定の記述は、非常に長いものなので、この「body{・・・}」という部分を見つけ出すのは大変かもしれませんが、見つけてしまえばこちらのもの。

ちなみに「body{・・・｝」という記述は、「body（＝ページ全体のこと）の設定は・・・という設定にしてね」という意味です。だから、上記の場合、他の○○○は置いといて、色の部分についていえば「このホームページのbody（全体）の、背景の色を#FFFF33にしてね」という意味になります。

なお、「body」に関するスタイルシートの設定は、ページ全体にかかわる設定なので、スタイルシート上の記述も、比較的上のほうに記述があるはずですから、上のほうを探すと見つけやすいです、ヨ。

（２）画像を指定するやりかた

この場合も、スタイルシートの「body{・・・}」の中に書かれている部分を変更すればOKです。が、その前に！

背景に使う画像を、インターネット上へアップして、URLを調べておきましょう。・・・ン？何のこと？と思った方、このことについては、次回詳しく説明します。とりあえず簡単に言うと・・・

背景に使う画像は、必ずインターネット上になければなりません。そして、固有のURL（ホームページのアドレスと同じもの）を持っている必要があります。実際には、ご自分のブログの管理画面からいったん使う画像をアップロードしておいて、その画像のURLを調べればよいだけです。やったことのない方、難しく感じられた方、次の回の解説まで待ってください。

で、画像のURLを調べられたところで・・・

このように、「background-image:url("○○○");」の部分を、「background-image: url("△△△");」に変えるわけです。（○○○と△△△の部分に、それぞれもとの画像、変更後の画像のURLが入ります）

ただし上記の例の場合は、この設定以外に、「画像を横並びにもたて並びにも並べない」ようにする設定を記述しておかなければなりませんが・・・それはまた別の機会にご説明いたします。

第2回目の解説はここでおしまい。いきなり、かなり難しい話になりましたね。「ボクは背景の色や画像は変えるつもり、ないから」という方は、このページは忘れてください。

さて、次回は、今回の解説出てきた、「画像のURL」のお話をします。スタイルシートの設定からはちょっとそれますが、大切な内容なので・・・

■カスタマイズに関するご質問・ご相談は・・・

このコーナーで説明しているカスタマイズを実際にやるときには、かならず自己責任で行ってください。

「やってみたけどわからない。」「難しくてできない」「質問したい」というような場合は、当相談所へのご質問・ご相談として承ります。その場合にはページ右上の「ご相談」ページから内容を入力して送信していただくか、あるいは直接メールでお問い合わせください。