ヘッダー画像のカスタマイズ方法｜アメブロカスタマイズ

「知りたいことだけピンポイントでレッスンしています」

湘南・茅ヶ崎のパソコンスクールFLEX Web（フレックスウェブ）のミナベです。

前回までは、アメブロの基本的な設定について説明させていただきました。

今回からは、アメブロの見た目を変えてく「アメブロカスタマイズ」の説明をさせていただきます。

フェーズ2の幕開けですね。

塵も積もれば山となる。スモールステップを重ねて、このアメブロをどんどん進化させていきたいと思います。

さて、フェーズ2に入って記念すべき一つ目のお題は「ヘッダー画像のカスタマイズ方法」です。

手順は次の3ステップとなります。

ヘッダー画像は、メモ用紙等に全体の構成を書き出して、それを清書するようにグラフィックソフトで作成していきます。

画像の作成方法は、いろいろなやり方があると思いますが、私の場合は紙とペンを使ってある程度イメージを膨らませてから、グラフィックソフトに落とし込んでいます。

そうして出来上がったヘッダーのメイン画像はこちらです。ドン！

メイン画像の背景に横方向でリピート表示させる画像です。ドン！

上記2つの画像をアメブロにアップロードします。

FLEX Webの「ブログデザインのCSSの編集」画面です。画像がアップされている状態のキャプチャとなります。ドン！

左の画像：ヘッダーのメイン画像の背景にくる画像

右の画像：ヘッダーのメイン画像

ヘッダー画像を表示させるためのCSSを記述します。

記述場所は「ブログデザインのCSSの編集」画面の入力欄です。

先程画像をアップしたところに黄色い枠内があって、そこに表示されているソースコードがヘッダー画像のパス（URL）です。このソースコードをコピーして、CSS内にペーストします。

最後に保存をクリックすればOK。無事にヘッダーが変更されました。

一通りヘッダーを画像にする作業をやってみて気付いたのですが、ヘッダーのカスタマイズは、CSSをいじることよりも、ヘッダーのメイン画像を作成することのほうが時間を要しますね！

ユーザー目線になって考えていると、時間はあっという間に過ぎていくのでした...。

お読みいただき、ありがとうございました。