画像の変更/無料ブログ作成マニュアル

◆画像の変更

テンプレートの多くは、様々な画像を使っています。
これを自分の好みの画像にするだけで、オリジナリティも出ますしブログの雰囲気はガラリと変わります。
画像を使用する際は、画像を貼ってみよう①の画像の使用についてを守ってください。

◆画像の差し替えの仕方

まず使用されている画像を探します。
使われている箇所は背景のみではなく、タイトルの背景や記事タイトルのワンポイントなど様々です。
【Ctrl】＋【F】で画像の拡張子である　jpg（jpeg）　もしくは　gif　または　png　（いずれも半角英数）を検索すると、画像のURLが見付かります。
何の画像かを確認するには、別ウィンドウを開いてその画像のURLを、IEのアドレスバーにコピー＆ペースト。
これで画像の表示されるページに行けます。
後は変更したい画像を見つけて、そのURLを差し替えたい画像のURLに変更すれば完了です。
差し替えたい画像は、「ファイルのアップロード」で自分のブログにアップした画像を使ってください。
URLは記事編集で画像を使用した時に出てくる、
img src="http://……/△△.jpg"
などの赤の部分です。

問題となるのは画像の大きさ。
記事部分と違って画像は背景に組み込まれるのでサイズが違うと画像が途中で切れてしまったり、複数個並んで表示されたりしてしまいます。
ペイントソフトを扱えて画像の大きさ自体を変えれる場合は問題ありませんが、フリー素材を扱う場合などは注意。
背景に同じ画像が敷き詰められている場合や、アイコンでワンポイントで使われているといった場合以外で、丁度同じ様な大きさのフリー素材は見つけられない場合の方が多いです。

のおすすめのフリーペイントソフト　PictBear
フリーソフトとは思えない高機能なペイントソフト。
使い方などはリンク先のページ下方の関連リンクのところにお役立ちサイトがそろっているのでそちらを参考にしてください。
なおフリー素材の加工は、規約によって禁止されている事も多いです。
加工したい時は規約をよく読んでから加工自由になっているかどうかを確認する様にしてください。

■背景に画像を使う
テンプレートによっては背景に画像が指定されていないものもあります。
その場合に背景画像を使いたい、という時の方法です。

背景は色であれ画像であれ、backgroundというタグで指定されています。
色で指定してある場合は
background-color: 色;
画像の場合は
background-image: url(画像のURL);
こんな具合です。

画像を使っていない箇所に画像を使いたい場合は、
background-color: 色;　を
background-image: url(画像のURL);　に変更すれば出来ます。
：　や（　）；も忘れずに。英数字は全て半角です。
逆に画像を色に変更する事も出来ます。

これは両方とも指定されている場合もあります。
ここらあたりでブログのHTML、スタイルシートについてをちょこっとお勉強。

ブログは全体の基本的な設定があり、その土台の上にタイトル部分、メニュー部分、記事部分などが乗っかっている構造になっています。
編集のソースを見ていくと、ここからここまでがメイン、ここまでがコメント、といった表示があると思います。（例外もあり）
HTMLが骨組みを作り、スタイルシートでその大きさや色、画像を変更するといった感じです。
中にはHTMLで直接変更している場合もあります。

両方とも指定されている場合とは、土台の部分、記事の部分など、同じ部分での指定でという事です。

この場合は画像の方が優先されるので、色の上に画像がのっかている表示になります。
こういった例では、その箇所の背景の色と画像は組み合わせでデザインされている場合が多いので変更しない方が無難です。