ヘッダー画像のカスタマイズ方法｜アメブロカスタマイズ
「知りたいことだけピンポイントでレッスンしています」湘南・茅ヶ崎のパソコンスクールFLEX Web（フレックスウェブ）のミナベです。前回までは、アメブロの基本的な設定について説明させていただきました。今回からは、アメブロの見た目を変えてく「アメブロ カスタマイズ」の説明をさせていただきます。フェーズ2の幕開けですね。塵も積もれば山となる。スモールステップを重ねて、このアメブロをどんどん進化させていきたいと思います。さて、フェーズ2に入って記念すべき一つ目のお題は「ヘッダー画像のカスタマイズ方法」です。手順は次の3ステップとなります。ヘッダー画像を作るヘッダー画像をアメブロにアップするCSSにヘッダー画像を表示させる記述をする。STEP.1ヘッダー画像を作るヘッダー画像は、メモ用紙等に全体の構成を書き出して、それを清書するようにグラフィックソフトで作成していきます。画像の作成方法は、いろいろなやり方があると思いますが、私の場合は紙とペンを使ってある程度イメージを膨らませてから、グラフィックソフトに落とし込んでいます。そうして出来上がったヘッダーのメイン画像はこちらです。ドン！メイン画像の背景に横方向でリピート表示させる画像です。ドン！STEP.2ヘッダー画像をアメブロにアップする上記2つの画像をアメブロにアップロードします。FLEX Webの「ブログデザインのCSSの編集」画面です。画像がアップされている状態のキャプチャとなります。ドン！左の画像：ヘッダーのメイン画像の背景にくる画像右の画像：ヘッダーのメイン画像STEP.3CSSにヘッダー画像を表示させる記述をするヘッダー画像を表示させるためのCSSを記述します。記述場所は「ブログデザインのCSSの編集」画面の入力欄です。先程画像をアップしたところに黄色い枠内があって、そこに表示されているソースコードがヘッダー画像のパス（URL）です。このソースコードをコピーして、CSS内にペーストします。最後に保存をクリックすればOK。無事にヘッダーが変更されました。一通りヘッダーを画像にする作業をやってみて気付いたのですが、ヘッダーのカスタマイズは、CSSをいじることよりも、ヘッダーのメイン画像を作成することのほうが時間を要しますね！ユーザー目線になって考えていると、時間はあっという間に過ぎていくのでした...。お読みいただき、ありがとうございました。
