1. TOP
  2. アメブロカスタマイズ
  3. ブログヘッダーのカスタマイズ⑥・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

ブログヘッダーのカスタマイズ⑥・(3-2) ブログヘッダー・初級アメブロカスタマイズガイド

お知らせ(2016年3月8日追記) 2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。 新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次

>>こちらもどうぞ

このコラムは連載コラムです。過去の記事は上記のアメブロカスタマイズガイドまたは、以下の記事をご覧ください。前回の記事はこちらです。まだ見ていない方はこちらから見ていただくとより理解が深まるかと思います。

ヘッダー画像を挿入するアメブロカスタマイズ方法:

では早速はじめましょう。今回も前回に引き続きCSS編集用画面の(3) エリアのスタイルブロックの中の、「(3-2) ブログヘッダー」の解説をします。第6段となります。今回はいよいよヘッダー画像を挿入する方法の解説です。既にヘッダー画像をお持ちのかたはそれを使っていただき、そしてない方は、よろしければこちらの葉っぱの背景をヘッダーに使って試してみてくださいね☆

画像ダウンロードするかた
葉っぱの画像ダウンロードはこちら
画像はzip形式の圧縮ファイルになっていますので解凍してお使いください。

参考サイト こちらのコラムを参考に画像を作ってみたいかた
あなたのアメブロカスタマイズのデザインを助けるお助けサイト

目を惹くブログに一歩近づけるようにがんばりましょうね☆

ヘッダーに画像を挿入する方法

では早速ヘッダー画像を挿入しましょう!

今回のゴールはとりあえずヘッダーを挿入する方法です。葉っぱの画像を使った場合は、ゴールは以下のようになります。

image-11051962929-11555671404

では設定手順です。ここからは葉っぱの画像を使った場合の解説をします。既に画像をお持ちのかたは取り合えず読み進めてください。最後の解説でフォローしています。

手順1 画像をアップロードする

まずはあなたのパソコンにある画像を、アメブロにアップロードするところから始めましょう。まずはクイックリンクより「CSSの編集」をクリックします。下にイメージ画像をアップしました。このイメージ画像の手順でダウンロードした画像の中にある「葉っぱの画像」をアップロードします。

image-11051962929-11536461534

手順2 CSSにコードを記述します。

以下のようにCSSの画面の「(3-2) ブログヘッダー」の部分にコードを追加してください。赤い部分が追加箇所。

/* (3-2) ブログヘッダー
--------------------------------------------*/

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{background-image:url(あなたがアップロードした画像のURLをコピーして貼り付け);
height:411px;
background-repeat:no-repeat
}/* ←ブログヘッダーに背景画像を敷きたいとき */

/* skinBlogHeadingGroupArea タイトルと説明を囲うエリア */
.skinBlogHeadingGroupArea{
padding:20px 0 30px;
}

/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
padding-bottom:4px;
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{}

手順3 画像のURLを貼り付け

上のコードの中にある、「あなたがアップロードした画像のURLをコピーして貼り付け」 とある部分に以下のイメージの手順で画像のコード(URL)をコピーして貼り付けます。

image-11051962929-11536561996

これでプレビューすると、葉っぱの画像がヘッダーに設定できたことがわかります。

 

アメブロCSSコード解説

先ほどのCSS編集用画面に赤字で追記した部分の解説でをします。

background-image:ulr()

このコードは、指定した場所(今回はヘッダーの場所)の背景に画像を置いてくださいという指示をしています。urlの後の()括弧の中にあなたがアップロードした画像のURLを指定します。

ちなみに背景色を設定する場合は、background-colorで背景色の設定ができるんでしたね☆

 height

これは当ブログを見ていただいている方にはお馴染みのプロパティですね♪高さを表すプロパティです。なぜ赤字の追記が411px(ピクセル)にしてあるかというと・・・答えは単純で、葉っぱの画像の高さが411pxだからです。

あなたの用意した背景画像の高さが300pxならばここは300pxに。そして1000pxならば1000pxにすることで画像の高さを確保できます。ですが、あまり高すぎるのはお勧めできません…大きくても500pxには押さえましょう。あまりに大きすぎると、最初に訪問した読者がいきなりマウスをスクロールしないとヘッダーすらまともに見えない可能性があるからです。

ちなみに画像の高さを調べるには前回のコラムで解説していますのでそちらをご覧ください

 background-repeat:no-repeat

このプロパティは背景の画像の表示をリピートするか?しないか?の設定で使います。no-repeatとあるように、今回の設定では画像の繰り返しをしないように設定しています。この設定をしない場合は、縦横に繰り返しますし、no-repeatをrepeat-xにすれば横方向だけ繰り返し。そしてrepeat-yならば縦方向だけに繰り返す設定になります。整理してみましょう

background-repeatの設定方法について
①background-repeat:no-repeat 繰り返さない
②background-repeat:repeat-x  横方向に繰り返す
③background-repeat:repeat-y 縦方向に繰り返す
④指定なし           縦横に繰り返す

試しにheight:411pxを1000pxに変更して no-repeatをrepeat-yにしてみると、縦方向に画像が繰り返し表示されることが確認できます。

小さい画像の設置方法

ヘッダーの横幅は前回のコラムでも解説しましたが、基本的に980pxです。縦方向は今回のようにheightプロパティを使用することで解消できますが、横方向が980pxよりも小さい場合にはどのように画像を配置するのがよいのでしょう。

横幅が小さい画像の場合はバランスも考えて以下の3種類の配置方法が考えられます

①画像を左に揃える 右が空白
②画像を右に揃える 左が空白
③画像を中央揃え  左右が空白

これら3つの中からバランスを考慮して背景の設置を考える必要があります。

次回はこれら3つの設定を解説します

>>ページのトップへ

おすすめ

無料メルマガ
optin
自分で作るアメブロカスタマイズ