アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編２：ヘッダー画像追加
まずはじめに、ヘッダーに画像を追加したいと思います。
ヘッダーとは以下の部分の所になります。
この部分に背景用の画像を追加していきます。
画像のサイズですが、横幅が800px（ピクセル）で、
縦幅（高さ）が190px（ピクセル）以上の画像を使っていきます。
あ、縦幅が190px以上だからって、1000pxとか使っちゃ、
画面からはみ出して、スクロールしないと最初の文書が見えないとか
なっちゃいますので、300pxくらいで抑えておくのが良いと思います。
では、早速始めたいと思います。
ということで、まずは素材を作る所からですね。
自分の取った写真や書いたイラストでもなんでもOKですが、
私の場合は手っ取り早く、無料の素材屋さんから拝借したいと思います。
今回はこちらから素材を拝借いたしました。
http://www.ashinari.com/
本当に、こういったサイトを運営されている方々には頭が下がります。
広告収入で頑張ってらっしゃるようですので、自分たちが出来ることで
協力出来たら、喜んでもらえるのではないでしょうか。
さて、好きな画像をダウンロードをするわけですが、
最初に表示されている画像は解像度が低いので、
画像の下にある、｢高解像度｣をクリックして、
｢高解像度の写真をダウンロード｣をクリックして、
画像をお好きな場所に保存してください。
ダウンロードした画像はサイズが大きいので、適宜にリサイズをして下さい。
リサイズにはいろいろなフリーソフトがありますが、
私の場合は、PictBear というペイントソフトを使いました。
メニューから イメージ → イメージのリサイズ を選択すると
以下のウィンドウが表示されるので、まずは、幅を800にして、OKをクリックします。
このとき、｢縦横比を固定する｣にチェックが入っていることを確認してください。
次にメニューから イメージ → キャンバスのリサイズ を選択し、
｢縦横比を固定する｣のチェックを外して、アンカーを中央にしたら、
高さを300して、OKをクリックします。
すると、トリミングされてこんな画像になりますので、名前を付けて保存します。
それでは、本格的にCSSの編集に入っていきたいと思います。
まず、作成した画像をブログにアップロードします。
CSSの編集画面から、先ほど保存した画像を参照し、
画像ファイルをアップロードします。
すると、アップロードした画像とその画像のパス（URL）が表示されます。
では、この画像のパスをすべて選択し、コピーをしておいてください。
そして、下に画面をスクロールさせ、｢現在使用中のブログデザインCSS｣の
テキストボックス内の編集をしていきたいと思います。
編集箇所は#headerの部分になりますので、ブラウザの文字検索で
#headerを探します。#header h1{ とか #header h2{ とかありますが
探す部分は#header{ なので、間違えないように気を付けてください。
では、Ctrl ＋ F （もしくはメニューから編集 → 検索）を押します。
すると、検索用のウィンドウが表示されますので、そこに｢header｣を入力して、
次の場所を探します。
この部分の{ }の間につぎのプロパティを追加します。
background-image: url();
ちなみに、CSSでの表記方法は
セレクタ { プロパティ:値 ; プロパティ:値 ; … }
というように記載するルールとなってます。
今回はこの辺の詳しい説明は省略して、先に進みたいと思います。
では、次に先ほどコピーした背景画像のパスをurlの後の( )内に貼り付けします。
そうしましたら、画面を下にスクロールさせ、
｢表示を確認する｣をクリックします。
これをクリックすることで、CSSを保存する前に、デザインの確認を
行うことができ、CSSの記述ミスを防ぐことができます。
すると、新たにウィンドウやタブが表示されますので、
デザインがどうなったか、確認してみてください。
多分、ヘッダーの部分の背景が、見事に画像に変わっていると思います。
これで、完了！…と言いたいところですが、実は表示されている画像サイズが
アップロードしたものより、高さが少なくなっています。
つまり、表示されていない部分があるということです。
この場合は、下の画像が途切れている事になってます。
保存した画像はこれなので、上の画像と見比べてください。
下のトマトが欠けていることがわかりますよね。
では、この欠けた画像を全部表示させたいと思います。
それでは、CSSの編集画面に戻って、画像きちんと表示するように
高さを領域を確保していきたいと思います。
先ほど挿入した所に、
height:300px
を挿入してください。
このプロパティの300pxという値は、画像の高さを指定してますので、
各自の環境に合わせて、適宜に変更してくださいね。
そうしましたら、また、画面を下にスクロールさせ、
｢表示を確認する｣をクリックして、変更されたデザインを確認します。
きちんと画像の全部が表示されましたね。
では完了ですね。それでは、次に…ん？
あれ？画像の下に、なんか変な表示がくっついてますね。
実は、画像の高さより余白の方が大きいと、画像が繰り返し表示されて
しまうので、このような感じになってしまうのです。
この辺をきちんとセッティングするためには、margin と padding の
プロパティを理解する必要があるのですが、ここでは、省略します。
ここでは、手っ取り早く、画像が繰り返し表示されないように、
次の内容を先ほどのCSS編集位置に挿入して下さい。
background-repeat:repeat-x;
このプロパティと値は、画像の繰り返しをX方向（縦方向）には
しないで下さいね。という内容になってます。
それでは、気を取り直して、再度、｢表示を確認する｣をクリックして、
変更されたデザインを確認してみてください。
どうでしょう？今度はきちんと表示されましたね。
皆さんも実際に確認してくださいね。
もし、きちんと表示されていない場合は、
画像の高さとCSSのheightの値を再度確認してみてください。
では、これで、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編２：ヘッダー画像追加
を終わりたいと思います。
次回は、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編３：ヘッダー文字色変更
に進みたいと思います。
お楽しみに！
ヘッダーとは以下の部分の所になります。
この部分に背景用の画像を追加していきます。
画像のサイズですが、横幅が800px（ピクセル）で、
縦幅（高さ）が190px（ピクセル）以上の画像を使っていきます。
あ、縦幅が190px以上だからって、1000pxとか使っちゃ、
画面からはみ出して、スクロールしないと最初の文書が見えないとか
なっちゃいますので、300pxくらいで抑えておくのが良いと思います。
では、早速始めたいと思います。
ということで、まずは素材を作る所からですね。
自分の取った写真や書いたイラストでもなんでもOKですが、
私の場合は手っ取り早く、無料の素材屋さんから拝借したいと思います。
今回はこちらから素材を拝借いたしました。
http://www.ashinari.com/
本当に、こういったサイトを運営されている方々には頭が下がります。
広告収入で頑張ってらっしゃるようですので、自分たちが出来ることで
協力出来たら、喜んでもらえるのではないでしょうか。
さて、好きな画像をダウンロードをするわけですが、
最初に表示されている画像は解像度が低いので、
画像の下にある、｢高解像度｣をクリックして、
｢高解像度の写真をダウンロード｣をクリックして、
画像をお好きな場所に保存してください。
ダウンロードした画像はサイズが大きいので、適宜にリサイズをして下さい。
リサイズにはいろいろなフリーソフトがありますが、
私の場合は、PictBear というペイントソフトを使いました。
メニューから イメージ → イメージのリサイズ を選択すると
以下のウィンドウが表示されるので、まずは、幅を800にして、OKをクリックします。
このとき、｢縦横比を固定する｣にチェックが入っていることを確認してください。
次にメニューから イメージ → キャンバスのリサイズ を選択し、
｢縦横比を固定する｣のチェックを外して、アンカーを中央にしたら、
高さを300して、OKをクリックします。
すると、トリミングされてこんな画像になりますので、名前を付けて保存します。
それでは、本格的にCSSの編集に入っていきたいと思います。
まず、作成した画像をブログにアップロードします。
CSSの編集画面から、先ほど保存した画像を参照し、
画像ファイルをアップロードします。
すると、アップロードした画像とその画像のパス（URL）が表示されます。
では、この画像のパスをすべて選択し、コピーをしておいてください。
そして、下に画面をスクロールさせ、｢現在使用中のブログデザインCSS｣の
テキストボックス内の編集をしていきたいと思います。
編集箇所は#headerの部分になりますので、ブラウザの文字検索で
#headerを探します。#header h1{ とか #header h2{ とかありますが
探す部分は#header{ なので、間違えないように気を付けてください。
では、Ctrl ＋ F （もしくはメニューから編集 → 検索）を押します。
すると、検索用のウィンドウが表示されますので、そこに｢header｣を入力して、
次の場所を探します。
この部分の{ }の間につぎのプロパティを追加します。
background-image: url();
ちなみに、CSSでの表記方法は
セレクタ { プロパティ:値 ; プロパティ:値 ; … }
というように記載するルールとなってます。
今回はこの辺の詳しい説明は省略して、先に進みたいと思います。
では、次に先ほどコピーした背景画像のパスをurlの後の( )内に貼り付けします。
そうしましたら、画面を下にスクロールさせ、
｢表示を確認する｣をクリックします。
これをクリックすることで、CSSを保存する前に、デザインの確認を
行うことができ、CSSの記述ミスを防ぐことができます。
すると、新たにウィンドウやタブが表示されますので、
デザインがどうなったか、確認してみてください。
多分、ヘッダーの部分の背景が、見事に画像に変わっていると思います。
これで、完了！…と言いたいところですが、実は表示されている画像サイズが
アップロードしたものより、高さが少なくなっています。
つまり、表示されていない部分があるということです。
この場合は、下の画像が途切れている事になってます。
保存した画像はこれなので、上の画像と見比べてください。
下のトマトが欠けていることがわかりますよね。
では、この欠けた画像を全部表示させたいと思います。
それでは、CSSの編集画面に戻って、画像きちんと表示するように
高さを領域を確保していきたいと思います。
先ほど挿入した所に、
height:300px
を挿入してください。
このプロパティの300pxという値は、画像の高さを指定してますので、
各自の環境に合わせて、適宜に変更してくださいね。
そうしましたら、また、画面を下にスクロールさせ、
｢表示を確認する｣をクリックして、変更されたデザインを確認します。
きちんと画像の全部が表示されましたね。
では完了ですね。それでは、次に…ん？
あれ？画像の下に、なんか変な表示がくっついてますね。
実は、画像の高さより余白の方が大きいと、画像が繰り返し表示されて
しまうので、このような感じになってしまうのです。
この辺をきちんとセッティングするためには、margin と padding の
プロパティを理解する必要があるのですが、ここでは、省略します。
ここでは、手っ取り早く、画像が繰り返し表示されないように、
次の内容を先ほどのCSS編集位置に挿入して下さい。
background-repeat:repeat-x;
このプロパティと値は、画像の繰り返しをX方向（縦方向）には
しないで下さいね。という内容になってます。
それでは、気を取り直して、再度、｢表示を確認する｣をクリックして、
変更されたデザインを確認してみてください。
どうでしょう？今度はきちんと表示されましたね。
皆さんも実際に確認してくださいね。
もし、きちんと表示されていない場合は、
画像の高さとCSSのheightの値を再度確認してみてください。
では、これで、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編２：ヘッダー画像追加
を終わりたいと思います。
次回は、
アメブロのテンプレートをオリジナルにカスタマイズしよう～CSS編集編３：ヘッダー文字色変更
に進みたいと思います。
お楽しみに！