こんばんみ！
初めましての方は初めまして。
初めてましてじゃない方は、こんばんは。
毎回記事を見てくださってる方は、ありがとうございます。
これからもどうぞご贔屓にお願い申し上げます。
ライオンです。
ということで、いつもの画像です。
意味？そんなもんないです。
━─━─━─━─━─
さてさて。
SWK（猿でも分かるカスタマイズ）
第3回目です。
今回もゆったりまったりと、カスタマイズについて解説を進めていこうと思います。
前回はCSS編集デザインを適用するところまでやりましたね。
真っ白いデザインになったのではないでしょうか。
では、今回はその真っ白なデザインに
背景画像を付けてみようと思います。
注意事項 今回、背景をCSSを使って設定しますが
その際、使用するコードについて
『CSS勉強中スタッフのブログ』様のものを紹介させて頂きます。
著作権の問題がありますので
CSS勉強中スタッフ様のコードをそのまま載せることは出来ません。
一度CSS勉強中スタッフ様のブログに飛んで
コードを入手する行程が発生します。
ご理解の程をお願いします。
━─━─━─━─━─
さてさて、まず背景となる画像を準備します。
ここで大事になってくるのが、画像のサイズと、画像形式ですね。
画像の形式は
JPG
PNG
JIF
この３つ、どれかの形式でないといけません。
これ以外の形式の画像だと後々アップロード出来ないことになります。
と言っても、大体の画像ってこの3つの形式ですよね(´・ω・｀)
おススメはPNG形式をおススメします。
さて、そして画像のサイズ。
そもそも画像のサイズというのはピクセル（px）で表します。
背景にするためには、大体どのくらいのサイズがいいのか。
今、ご覧になってる僕のブログの背景画像は縦1594px×横1181pxですね。
僕のピグ友さんで、この前一緒にブログカスタマイズに挑戦した
ミヤビ君のMIYABINOBUROGUに使った背景画像は縦1678px×横1134pxでした。
他の方だと横1280px × 縦856pxくらいの方もいらっしゃるみたいです。
もちろん、例に挙げたサイズでないといけないわけではありません。
あくまで参考程度に、このくらいのサイズの画像をご用意頂いたらいいと思います。
背景画像の見え方については、お使いになってるパソコンによっても違います。
ディスプレイのサイズが違いますからね。
なるべく大きいにこしたことはないと思います。
まあ、あまりに小さすぎない程度だったら、案外綺麗に表示してくれるので
心配することでもないと思います(｀･ω･´)
背景画像をご自分で作成なさって貰っても大丈夫ですし
ネットなんかから拾ってきてもいいと思います。
画像検索で『背景画像』なんて検索したら、結構いろいろ出てくると思いますよ？
ちなみに僕はフリーの背景画像をそのまま、使用してます。
ネットから拾ってくる画像において
著作権のことについては
勘のいい読者様のことなので、いろいろ察してくれると思います。
━─━─━─━─━─
さてさて、背景画像は準備出来ましたでしょうか？
背景画像が準備できた、というスタンスで話を進めていきます。
ではまず。
背景画像をアップロードする作業に入ります。
まずマイページ。
デザインの変更ですね。
押していただきます。
どうでもいいけどコレ、前回の画像を再利用してます。
『デザインの変更を押して
デザインを変更します！(｀･ω･´)』
って書いてますけど、デザインの変更は前回したので、もうしません。
とりあえず、デザインの変更を押してください。
するとこの画面になりますね。
なんでしょうね、ハローキティブログって。
よく分からないので、広告についてはスルーしましょうか(´・ω・｀)
話をもとに戻します。
この画面で、今現在『CSS編集用デザイン』が適用されてますよね。
その下。
『CSSの編集』とあるのが確認できますでしょうか？
そこをクリックです。
するとこんな画面が出てくると思います。
ブログデザインのCSSの編集。って書いてますね。
要するにCSS編集画面です。
今から、用意した背景画像をアップロードします。
『ブログデザインヘッダ・背景用画像の追加』
と書かれた部分が確認できますかね。
そこから、いつもブログ記事を書くときに画像を挿入する方法を同じ手順で
背景画像をアップロードできます。
簡単に説明すれば
『参照』を押してもらって、保存してある画像を選択して『アップロード』を押すだけです。
難なく進めているでしょうか？大丈夫ですかね。
アップロードが出来ますとこういった形になります。
このように『アップロードされた画像』という形で小さく表示されれば、
アップロード出来たということです。おめでとうございます。
ちなみに僕は京都の竹林の画像を用意しました。
いいですね竹林、タケノコ食いたい。
話が逸れましたね。戻します。
さて、その小さく表示されてる画像の下に
『この画像のパス』と書かれているのが確認できますでしょうか？
httpから始まるやつです、ありますよね？
この画像のパス、あとで使います。
さらに画面を下にスクロールすると、
実際CSS編集画面が見えてくると思います。
『現在使用中のブログデザインCSS』ってやつですね。
画像と同じような画面が確認出来たでしょうか。
さて、そのCSSの中から今回イジるのは
（3－１）ボディ（全体）
という場所です。
スクロールして、３－１ボディを探してみてください。
どうでしょうか、見つかりましたでしょうか？
間違っても記載されてるコードを消したりしないようにしてくださいね。
さてさて。
今回、記述するコードはCSS勉強中スタッフ様のコードをお借りすることになります。
冒頭でも言いましたね。
まずはこちらのCSS勉強スタッフ様のブログに飛んでください。
（リンクをクリックすると、別タブで開きます）
CSS勉強中スタッフのブログ（ブログ全体に背景画像を敷きたい）
そして記事の
。スクロールして、中間くらいにありますコードをコピーしてきてください。
.skinBody……から始まるコードです。
全てコピーしてきましたでしょうか？
では、CSS編集画面に戻ります。
先ほどのCSS編集画面の（3－1）ボディ（全体）にあります。
一つ目の.skinBody{}を消してしまってください。
そしてコピーしてきた、コードをペースト（貼り付け）してください。
すると、上の画像のようになると思います。
上の画像と同じような記述になっていれば、いい感じです。
さて、コピーしてきたコードの中に
（ここに画像のパスをいれてね）と書かれていますね。
ここで、先ほどの画像のパスの登場です。
ここに画像のパスをいれてね、を消してしまって（）の中に画像のパスをコピペしてください。
するとこういった形になります。
画像のパスは、同じではないと思いますが記述としてはこういう風になってるでしょうか？
こうなっていれば、完成です。
後は、下にスクロールしてもらって。
『表示を確認する』というボタンで、キチンと背景が表示されているか確認した後
『保存』を押してください。
すると完成です。
ちなみに竹林の背景はこんな感じになりました。
なんだか竹林メインで、文字が見づらいですね(´・ω・｀)
皆様はもっとセンスのある背景画像を選んでくださいね。
僕のこれまでの経験かして背景画像があまり奇抜なものだと
記事本文が見づらくなってしまう傾向があるように思います。
背景はなるべくシンプルで、色合いもパステルカラーなんかを選んでみるといいかもしれません。あくまで僕の独断と偏見ですが。
━─━─━─━─━─
さて、今回は背景画像を設定してみました。
どうでしょうか、上手くいきましたかね？
上手くいかなかった場合は、リンク先のCSS勉強中スタッフ様の記事もご覧になってください。
きっと参考になると思います。
僕の記事は、あくまでCSS勉強中のスタッフ様の記事を
サルでも分かる程度に説明し直してるに過ぎないもの様なものです。
なんだかよく分からなかったよ、という方は
お気軽にコメントやメッセージでお尋ねください(｀･ω･´)
なるべく分かりやすく返答するか、記事を編集したりなどの対応を致します。
では、今回は以上です。
次回はヘッダー画像の設定・ヘッダー画像のボタン化。
まで出来ればいいなぁ、と思っております。
ライオンでした。
thank you bye
※コードをお借りしましたCSS勉強中のスタッフ様のブログ。
CSS勉強中スタッフのブログ
