アメブロのヘッダー部分は、画像を設置したり文字だけ表示させたりと、様々なパターンがあります。そこで本記事では、思いつく限り全てのパターンを網羅したカスタマイズCSSを画像イメージ付きで公開します。コピペすれば簡単に設定可能。
「CSS編集可能デザイン」から何もカスタマイズしていない状態であれば、元々書かれているCSSの一番最後に追加していく形になります。その際、まず最初に【ヘッダー基本CSS】を貼り付け、続けて各カスタマイズ用のCSSを貼り付けるようにしてください。
各行のCSSってどういう意味？という方、以下の記事も参考にしてください。読めばさらに細かいカスタマイズ（文字サイズを変えたり、文字色や背景色を変えたり）が可能に・・！
目次
【１】カスタマイズ前に知っておきたいポイント
早速カスタマイズを始めましょう・・！と言いたいところですが、その前にいくつか知っておくと良いアメブロカスタマイズ特有のポイントを４つ、まとめました。
これを知っておくと、各カスタマイズ方法の違いが分かり、あなたの今の環境で用意すべきものも見つけやすくなると思います。
１）ヘッダー幅を980pxにするか、ブラウザ幅いっぱい（100%）にするか
ヘッダー幅の設定方法は、大きく分けて２種類あります。１つは980px。アメブロは標準で、記事とサイドバーを合わせたエリアの横幅が980pxに設定されています。なので、ヘッダー部分もこの横幅に合わせると、左右がピッタリ揃う方になります。もう１つは、ブラウザ幅いっぱい（100%）に設定する方法です。
２）アメブロ管理画面でで設定した、タイトルと解説文を使うかどうか
タイトルとその下にある解説文は、アメブロの設定画面で設定されたものが表示されています。この文字を装飾することも出来ますし、背景画像を設定する事も可能です。ただ、ヘッダー全体を画像して画像内に文字を直接埋め込むのであれば、元々表示されているタイトルと解説文は消すことになります。
画像内に直接タイトルなどを埋め込めば、フォントも自由なので綺麗な見た目にしやすいですが、タイトルを変えたい場合は再度画像を作り直さなくてはいけなくなるので、一長一短あります。
３）ヘッダー上下の余白設定を、どうするか
ヘッダー部分は初期設定だと、上部に多少の余白が設定されています。逆に下部は余白設定がないので、ヘッダー部分と記事やサイドバーがくっつく形になります。
カスタマイズ内容によって、余白が必要な場合とそうでない場合があります。
４）画像を使うなら、事前にアメブロへのアップロードが必要
本記事では背景画像を設定する際、「ダミー画像」を使っております。background: url(●●●);の●●●部分にhttp://lorempixel.com/〜となっているものです。
通常アメブロのCSSカスタマイズで画像を使用する際は、カスタマイズ画面の上部に画像アップロード画面がありますので、そこでアップロードした際に得られる画像URLを●●●に貼り付けて利用ください。
【２】ヘッダー基本CSS (すべてのカスタマイズで必須)
僕の方で独自に用意した、ヘッダー部初期化用CSSです。本記事に書かれている全てのカスタマイズに必要です。まずこちらのCSSを貼り付けてから、各カスタマイズCSSを貼り付けてください。
.skinContentsFrame {
margin-top: 0;
}
.skinFrame {
padding-top: 0;
}
.skinHeaderFrame {
padding: 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 0;
}
.skinTitleArea {
font-size: 24px;
line-height: 1.2;
}
.skinDescriptionArea {
font-size: 18px;
line-height: 1.5;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
text-decoration: none;
}
（上記のみだと、こんな状態になります）
【３】カスタマイズ用コピペCSS一覧
さて、ここからいよいよ具体的なカスタマイズ方法一覧です。
目的別にかなり細かく分けてみたので、あなたのブログに合いそうなものを使ってみてください。
１）単色背景編
まずはもっとも単純な、背景を単色で塗りつぶしたデザインです。
1-a. 単色ヘッダー（980px/上下余白無し）
上下余白の設定が不要な場合のカスタマイズです。.skinBlogHeadingGroupArea内の設定で、ヘッダー部分（＝背景色が付いている部分）の内側にも余白を設定。こうしないとタイトルや解説文がヘッダー部分の左上端にピッタリくっついてしまい、見辛いので・・
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: #3498db;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
1-b. 単色ヘッダー（980px/上下余白あり）
これも背景を単色で塗りつぶしたデザイン。上下余白を設定しているので、記事やサイドバーとの間に余白を設けたい時に。
.skinHeaderFrame {
padding: 20px 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: #3498db;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
1-c. 単色ヘッダー（100%）
これも単色の背景ですが、ブラウザ幅いっぱいに塗られます。
また、今回は.skinBlogHeadingGroupAreaのCSSを消すことで、タイトルや解説文の左端が記事エリアの左端と合うようにレイアウト調整してあります。
.skinHeaderFrame {
background: #3498db;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
２）グラデーション編
レイアウトは「１）単色背景編」と同じで、背景がグラデーションになっているデザインです。
こんな風にCSSだけでもグラデーションが掛けられるのが、良いですね。画像で作ることもできますが、配色を変えたかったらイチイチ画像を作り直さなくてはいけないので。
以下CSSの.skinHeaderAreaを見ると何だか色々書いてあって面倒臭そうですが・・実はこの部分、コピペです（笑）ネットで探せば「グラデーション用のCSSを自動生成してくれるジェネレーター」がたくさんあって、開始と終了の色を指定してボタンを押せば勝手に下記のようなCSSを作ってくれるんですね。具体的には以下のページを使いました。
http://www.colorzilla.com/gradient-editor/
ページの左側で配色を設定すれば、ページの右側にCSSが生成されるので、それを.skinHeaderAreaに、貼り付けただけです。
2-a. グラデーションヘッダー（980px/上下余白無し）
1-a.と同じレイアウトで、背景が単色ではなくグラデーションになっています。
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: #999999; /* Old browsers */
background: -moz-linear-gradient(top, #999999 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #999999 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
2-b. グラデーションヘッダー（980px/上下余白あり）
こちらは1-b. と同じく上下余白を設定したものの、グラデーションVersionです。
.skinHeaderFrame {
padding: 20px 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: #999999; /* Old browsers */
background: -moz-linear-gradient(top, #999999 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #999999 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
2-c. グラデーションヘッダー（100%）
こちらは2-c. と同じくブラウザ幅いっぱいに設定したものの、グラデーションVersionです。
.skinHeaderFrame {
background: #999999; /* Old browsers */
background: -moz-linear-gradient(top, #999999 0%, #cccccc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999999), color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #999999 0%,#cccccc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999999 0%,#cccccc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999999 0%,#cccccc 100%); /* IE10+ */
background: linear-gradient(to bottom, #999999 0%,#cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999999', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
３）文字なし画像背景編
ここからは、画像を利用したカスタマイズ方法です。使いたい画像は事前にアメブロへアップロードしておいてください。（CSS編集画面の上の方にあります）アップロードすれば画像URLが手に入りますので、各CSSの「●●●」をそのURLに差し替えてください。
また、本記事のCSSでは画像の大きさを「幅980 x 高さ240」としていますが、高さは自由に変更できます。高さを変えたい場合は、.skinHeaderArea内のheight:240px;を、用意した画像の高さに合わせればうまく表示されます。
次の「４）文字入り画像背景編」と異なる点は、アメブロの設定画面で設定しているタイトルや解説文を表示するかどうか？の違いです。使いたい画像が風景や写真など文字無しの場合はこの３）を、タイトルなども入った画像にしたい場合は次の４）を使ってください。
3-a.１枚画像ヘッダー（980px/外余白無し）
上下余白不要で、アメブロのタイトルや解説文をそのまま表示する方法です。
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://lorempixel.com/980/240/nature/2/) center center no-repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
3-b. １枚画像ヘッダー（980px/外余白あり）
上下余白を設定する際のカスタマイズです。画像自体に上下余白がある場合などは、3-a. の方が設定しやすいかも。
.skinHeaderFrame {
padding: 20px 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://lorempixel.com/980/240/nature/2/) center center no-repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
3-c. １枚画像ヘッダー（100%）
幅いっぱいに設定する場合。単色塗りやグラデーション塗りと違って気を付けたいのは、幅100%に表示すると幅が元の画像サイズより大きくなるので、自動で引き延ばされる点です。今回のCSSでは自動で拡大されるようにしてあるので、あまり元の画像サイズが小さすぎると見た目が荒くなってしまう事もあるので注意。
.skinHeaderFrame {
background: url(http://lorempixel.com/980/240/nature/2/) center center no-repeat;
background-size: cover;
width: 100%;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
４）文字入り画像背景編
フォントやデザインにこだわりたい方は、タイトルや解説文も入れた画像を使いたいと思います。この際「３）文字なし画像背景編」のやり方だと、アメブロで設定した元のタイトル＆解説文が表示されて邪魔になるので、これらを消すCSSを追記してあります。
4-a. １枚画像ヘッダー（980px/外余白無し）
余白無しバージョン。
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://lorempixel.com/980/240/cats/1/Ameblo%20Customize%20Bible/) center center no-repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
display: none;
}
4-b. １枚画像ヘッダー（980px/外余白あり）
余白ありバージョン。
.skinHeaderFrame {
padding: 20px 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://lorempixel.com/980/240/cats/1/Ameblo%20Customize%20Bible/) center center no-repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
display: none;
}
4-c. １枚画像ヘッダー（100%）
幅いっぱいバージョン。但しこれも幅が可変になり画像が拡大縮小するため、文字入り画像で使うことはあまり無いかも。
.skinHeaderFrame {
background: url(http://lorempixel.com/980/240/cats/1/Ameblo%20Customize%20Bible/) center center no-repeat;
background-size: cover;
width: 100%;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
display: none;
}
５）タイル画像背景編
タイル画像というのは、模様やテクスチャといった「並べていく」事が可能な画像です。
CSSの背景設定にはrepeatという命令があるので、これを使うことで指定画像を上下左右に並べることができます。
以下サンプルでは「真ん中に★マークが表示された画像」を並べていますが、例えば以下のようなWebサイトにある画像を並べれば良い感じの背景に。
5-a. タイル画像ヘッダー（980px/上下余白無し）
上下余白設定無しのバージョン。
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://placehold.jp/333333/ffffff/16x16.png?text=★) left top repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
5-b. タイル画像ヘッダー（980px/上下余白あり）
上下余白のあるバージョン。
.skinHeaderFrame {
padding: 20px 0;
}
.skinBlogHeadingGroupArea {
padding: 48px 20px;
}
.skinHeaderArea {
background: url(http://placehold.jp/333333/ffffff/16x16.png?text=★) left top repeat;
width: 980px;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
5-c. タイル画像ヘッダー（100%）
幅いっぱいバージョン。３）４）の例と異なり、幅の可変に応じて並べるタイル画像数が増えたり減ったりするので、引き伸ばされて見づらくなったりすることが無いのが利点です。
.skinHeaderFrame {
background: url(http://placehold.jp/333333/ffffff/16x16.png?text=★) left top repeat;
width: 100%;
height: 240px;
}
.skinTitle,.skinTitle:visited,.skinTitle:hover,.skinTitle:focus,
.skinDescription {
color: #fff;
text-align: left;
}
【４】まとめ
以上、アメブロのタイトルや解説文をカスタマイズする方法を、まとめてご紹介しました。
アメブロはこんな風に、自力でCSSをいじらなければヘッダー画像を設定＆調整できないのが難点ですね・・。本記事で、もっと多くの人が自由にカスタマイズできるようになればと思います！
ではでは。