はまぞうブログのトップ画像の場所(スタンダード編)

テンプレート『アレモソレモコレモ』トップ画像 豊富にテンプレートが用意されているはまぞうブログでも、 オリジナルへの変更の希望は少なくないようです。 先ず手始めに大きく雰囲気を変えるとなれば手につけたいのがトップ画像ですね。 変更するには元々の画像が何処にあるのか分からなければいけない、 と言うことでものした記事は本ブログの2010年10月9日、 はまぞうブログのトップ画像の場所 でしたが引用すれば

縦に長い画像が見られたのではないでしょうか。 設定ファイルではこれをブログ全体の背景とし、 横方向に繰り返し表示することで、 トップ(ヘッダ)画像の様に見せているのですね。
と少々イレギュラーな仕様でしたので、 今回はスタンダードな設定を紹介したいと思います。

今回ははまぞうに用意されている内、 冒頭に表示した画像を使用しているテンプレート アレモソレモコレモ の場合を見てみます。

例によって元の画像のある場所を知るには、 テンプレートをカスタマイズする時に編集可能となる CSS(レイアウトの設定ファイル)を見ます。 アレモソレモコレモ のCSSファイルを見て、 /* ブログタイトル・概要 */ と書かれている部分にあたりをつけると以下の様になっていました。

#banner{
    background-color: ;
    height: 310px;
    width: 800px;
    margin: 0px;
    overflow: hidden;
    background: #99d422
        url(/_img/ats/head.gif) top center;
}

設定ファイルにあるミント色のURLの通りリンクを張ってみます。 この画像の表示 リンク先の画像に見覚えのある方もいらっしゃるのではないでしょうか? 前回と異なり今回は縦310ピクセル、横800ピクセルの画像を其のまま、 ヘッダに相当する部分に表示しているだけですね。 これを交換したい場合は画像を用意して、 その保存場所のURLと上のミント色のURLを交換すれば良い訳です。