ブログの一番上の部分(ヘッダー)の背景を画像にする[Blogger / Vaster2]

Blogger用テンプレートVaster2のカスタマイズ記事です。

この記事は、ブログの一番上の部分(ヘッダー、ブログの名前の部分)の背景を画像にする方法を解説しています。

スポンサーリンク

修正前後の見本

修正前


ブログ名「あかりlog」の背景が真っ白です。
(真っ白すぎてどこが記事の背景との境かわかりにくいですね…)

修正後


ブログのヘッダー画像が設定できました。
それ以外にも、全体のバランスを見て、ヘッダー部分を少し縦に長く、ブログ名を少し下に調整しています。

修正方法

1. Vaster2のテンプレートから以下の部分を探します。

#header-inner{……}

注意:2か所ありますが上のほうです

2. {}の中に以下を付け加えます。

background-image: url("画像のURL");

”画像のURL”には、背景にしたい画像をアップロードしたURLを書いてください。
bloggerにアップした写真(Googleのアルバムに保管された写真)ももちろん使えます。

3. 画像が変形していて気になる方は以下を付け加えます。

background-size:cover;

画像の縦横比を変えずに、縦か横どちらかが100%になるようにトリミングします。

このほかに以下のものが使えます(それぞれcoverの部分に置き換えてください)。
contain: 画像全体が入るように変形する(画像の縦横比は変化しない)


関連記事:初心者でもわかるVaster2のカスタマイズ方法の記事リスト
スポンサーリンク

関連記事

7 件のコメント :

  1. こんにちは。別の記事(サイドバーのカテゴリ並び替えについて)でも質問をさせて頂いた者です。
    再度すみませんが、こちらの記事でも伺いたいことがあります。
    背景を画像にするにあたって、私は、「ページヘッダー」のガジェットで、背景を画像にしてみました。そうしたら、画像があまりに大きく表示されてしまいます。
    あかりさんの記事にあるように、#header-innerの部分を探してみましたが、私の場合、innerではなく、outerと記述されています。このouterをinnerに変更し、以下、background...を記述するのでしょうか。
    お手数おかけしますが、ご回答いただければ幸いです。

    返信削除
    返信

    1. こちらのご質問に関してはかなり自信がないので、私が実際に記述している方法をお伝えしますね。
      Vaster2を使われているなら、基本的なレイアウトは同じはずなので、これをそのままコピペして使っていただいたら大丈夫なはずです。

      この辺りの変更は私もかなり記憶が怪しく、もしかしたら#header-outerをいじったのかもしれませんが、もう思い出す方法がありません…。


      【記述している部分】

      /* ヘッダー
      --------------------------------------- */

      の下部分に書いています。

      【記述している内容】

      #header-inner{
      width:1040px;
      height:150px;
      margin:0 auto;
      padding-top:45px;
      background-image: url("表示したい画像のアドレス");
      background-repeat: no-repeat;
      background-size:cover;

      }

      もし#header-inner自体がない場合、まるごと書き加えてみてください。

      削除
  2. 迅速なお返事、ありがとうございます!はい、Vaster2を使い始めて、そのカスタマイズの仕方を探っていて、こちらのサイトに出会いました。
    やってみます。で、またご報告しますね。
    とりあえず、御礼まで。

    返信削除
  3. このコメントは投稿者によって削除されました。

    返信削除
  4. やってみました。
    #header-outerに置き換えると、エラーになります。で、あかりさんの記述#header-innerを足すと、変化がありません。CSSとHTMLの配置の問題? 今は、どのように質問してよいやら、わかりません。ほんとに、超初心者なので。せっかく教えていただいたのに、対応できない自分が悲しいです(泣)もうちょっと、頑張ってみます。結果、できなくても、こうして教えて頂いたことに対しては、とても嬉しく思っています。ありがとうございます。

    返信削除
  5. お役に立てずに申し訳ないです…!

    私の方でも調べてみますので、もし解決策が見つかりましたら追記しておきますね。
    ただ、先の回答が私の精一杯なので、あまりご期待はしないでください…。

    返信削除
  6. Akariさん、
    申し訳ないなんて、とんでもないですよ!こうして、個人的な質問に、素早くお返事いただけて、嬉しく思っています。というか、カスタマイズの仕方を公開してくれているAkariさんのブログがあること自体、助かっていますから。重ね重ね、ありがとうございます。頑張りまーす!

    返信削除