第6回：背景に画像を表示してみよう
前回は背景（body）に色を付けましたが、今回はここにお好みの画像を表示してみましょう。
事前準備：画像を準備する
背景用の画像を準備します。
ご自分で作った画像でもいいですし、素材サイトからお借りする方法もあります。
※素材サイトから素材を借りる場合はそのサイトの利用規約をよく読んでその範囲内で利用するようにしましょう。
準備した画像はPC内の判りやすい場所に保存しておきます。
画像をココログにアップロードする
- 管理画面にログインし、「コントロールパネル」タブ→「ファイル」タブを開く
- 「新規ファイルのアップロード」の「参照」ボタンを押す
- 「ファイルの選択」ウィンドウが表示されるので、上記で保存したファイル（画像）を選択し「開く」ボタンを押す
- 「アップロード」ボタンを押す
※ファイル名が半角英数でない場合、ここで「不正なファイル名です。 半角英数字のみのファイル名に修正したうえでアップロードしなおしてください。」と表示が出てアップロード出来ません。 ファイル名を半角英数に修正してやり直して下さい。 - 左側の「現在のフォルダ」の「ファイル名」に、 4.でアップロードしたファイル名がリンクとして表示されていることを確認する。
※ここまでで画像のアップロードは完了です。
CSSを編集する
- 上記の5.で表示されている画像のリンクを開く。
- ブラウザのアドレスバーにそのファイルの保存先のurl（http://～）が表示されるので、これをコピーして「メモ帳」 などに貼り付けておく。
※別窓が開いているので、閉じずにそのままにしておけばコピーはしなくてOKです。 - 「管理トップページ」→「ブログ」タブ→（便利メニューから）「デザインの編集」→「カスタムCSSを編集」
※「カスタムCSSを編集」は、 リッチテンプレート適用時には利用できません。
※CSSを編集するためには、まず「カスタム・テンプレート」を作成してください。
※カスタムテンプレートの作り方は下記の記事を参照して下さい。
■第3回： カスタムテンプレートを作ってみよう - 「編集」画面のCSS記述欄に
body{background-image : url(●●●) }
を全て半角英数で記述する。
※●●●には上記で保存した画像のURLを入力する。 - 「変更を保存」ボタンを押す。
※事前に出来上がりを確認したい場合は「確認」ボタンを押してください。 - 一つ前の画面に戻るので、ここに表示されている「バックナンバーを反映」ボタンを押す。
- 別画面が開くので反映する範囲を選択して「反映」ボタンを押す。
- 「すべてのファイルを反映しました」の画面に切り替わったら終了。
- イメージ通りに出来ているかどうか確認する。
以上です。
うまく出来ましたか？
私は素材サイト 「Simple Life」さんでお借りしたグリーンのタイル柄にしてみました。
- background-imageは背景画像を指定するプロパティです。
ここに画像の保存先urlを値として指定することで背景画像を表示します。
urlは半角のカッコ( )で挟んで下さい。
【今回お世話になったサイト様です。ありがとうございました】
■「SimpleLife」 様 背景用の画像を頂きました。
■「PRISM」 様 記事中のボタン素材を頂きました。
＜関連記事＞
■第5回： 背景の色を変えてみよう
| 固定リンク
コメント
はじめまして、こんばんは。
カスタマイズをしたいな、
とは思っても面倒になってしまって
なかなか手をつけなかったのですが、
コチラのBloｇを見つけまして、
わかりやすい説明に助けられました。
これからも頼りにさせていただきたく
思っております。
投稿： 英美 | 2006/09/06 21:58
■英美さん
こんにちは。コメントありがとうございます。
私のブログがお役に立っているとのこと、何よりです(^^)
これからも楽しんでブログを続けて下さいね。
またのご訪問お待ちしています。
投稿： tako→英美さん | 2006/09/09 21:30
ブログ初心者のひろねぇです。
色々なサイトを覗いてみましたが、
初心者の私としては とてもわかりやすい説明で参考になりました。
今後もココログのカスタマイズに挑戦したいです！！
投稿： ひろねぇ | 2006/10/08 10:28
■ひろねぇさん
こんにちは。
ブログを開始したばかりなんですね。
ちょっとだけ先輩として長続きさせるアドバイスをさせていただくと「無理せずに、マイペースで、自分が楽しむこと」かな、と思います。
あまり「こうしなきゃいけない」というルールを作らずに楽に取り組んだ方が、ご自分も読者さんもリラックス出来ると思いますよ。
楽しいブログにしていって下さいね。
コメントありがとうございました♪
投稿： tako→ひろねぇさん | 2006/10/09 00:18
はじめまして。いつも参考にさせて頂いてます。
初歩的な相談ですみません。
実は「素材の庭園」様で気に入った画像があったのですが何処でクリック（保存）するのかがイマイチ分かりません。
いつもは画像の真上で右クリック保存していますが何か違うような違和感を持ちつつ。
その後はtakoさんの説明を参考に進みますがなにも変わらずでやはりクリック（保存）場所が違うのでしょうか。
投稿： hinata | 2006/11/15 03:19
■hinataさん
こんにちは。コメントありがとうございます。
ご質問の件ですが、素材のページを開けると画面の右端に色見本がありますよね。
その小さい画像の上で右クリックして保存するか、
または気に入った見本を左クリックするとその左側の大きなスペースがその見本を敷き詰めた状態になりますのでその状態で広いスペース上で右クリック→保存でも大丈夫なようです。
試してみて下さい。
投稿： tako→hinataさん | 2006/11/15 07:25
こんにちわ。
悩み解決でなんとか出来ました～＾＾
本当に助かります。
それから、私もう1つ大きな間違いをしていたようで、
＞先のurl（http://～）が表示されるので・・
とここで、urlだけなのに全てコピーしてCSS記述欄に載せていたのです。
今後はもう少し冷静に説明文を見ていこうと思います。
これからもどうぞ宜しくお願いします。
投稿： hinata | 2006/11/16 17:34
■hinataさん
こんにちは。
カスタマイズ成功おめでとうございます。お役に立てて何よりです。
「素材の庭園」さん、シンプルでベーシックなデザインが微妙な色違いでたくさん用意されていてすごく使い易いですよね♪
お互いに大事に使わせて頂きましょうね。
コメントありがとうございました。
投稿： tako→hinataさん | 2006/11/17 22:52
はじめまして
人様のブログをみながら、こんな綺麗なブログにカスタマイズしたいなぁと思いながら使い方が分らず、もんもんとしておりました
今日takoさんのページを見つけてうまくいきまして、もう狂喜乱舞です
ほんとうにありがとうございました＾＾
投稿： ネッスル | 2008/09/05 14:16
■ネッスルさん
こんにちは。
私のブログ記事がお役に立ったようで何よりです(^^)
いろいろな素材を生かして自分らしいブログを楽しんで下さいね。
コメントありがとうございました。
※返信が遅くなり申し訳ありませんでした。
投稿： tako→ネッスルさん | 2008/09/17 22:52