ブログメインビジュアルを完全画像化する

HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

背景画像を設定したのに引き続き、当ブログ新デザインへの移行作業第2弾！

右の画像のグローバルナビ（黒い帯）より上の部分を設定したいと思います。まず検索窓はなしの状態で、ブログタイトル部分の背景画像を差し替えます。

修正前の状況はこちら。このデザインにするときのことは、「ヘッダー画像を入れてみました」で説明しています。タイトル文字・ブログ説明文字を活用しつつ背景に画像を置いていましたが、この部分を完全画像化します。

今回の作業ステップは、大きく分けると4つ。

最上部バナー背景を白く塗りつぶし、下にボーダーを引く
タイトル部分を画像に差し替え、文字タイトルとブログ説明を見えないようにする【非推奨】
文字タイトルからのトップに戻るリンクがなくなってしまうので、画像全体からトップにリンクするような設定を行う【非推奨】
タイトル画像のグラデーションを、ページ幅全体に適用させる

最上部バナー背景部分の設定

バナー掲載部分に設定を行いたい場合は、div.headerBnrAreaに対して設定を行います。この部分、元々は下記の設定がされています。

.headerBnrArea{
	padding-bottom:15px;
}

この設定を、編集可能CSSで上書きします。/* (3-2) ブログヘッダーの部分に下記のような記述を加えればよいでしょう。

/* headerBnrArea ヘッダーバナーエリア */
.headerBnrArea{ /* ←padding-bottom:15px;の設定あり */
	background: #ffffff;
	border-bottom: 1px solid #d8e6d3;
}

背景を白（#ffffff）に設定し、エリアの下に幅1ピクセルの薄いボーダーライン（#d8e6d3）を引きました。

ブログメインビジュアルの設定

【非推奨】と書いている2つの設定を行います。

ブログタイトル文字と説明文を見えなくして、タイトルを完全画像化します。ただ、このやり方はSEO上好ましくないとされています（参考：google WEBマスター向け公式ブログの記事）。アメブロのシステム上、同じことをしようとしますとSEOでのマイナスの可能性を完全回避できる方法はないと考えますので、見た目を重視してこの方法を取ることにしました。

メインビジュアルの画像幅は980ピクセルありますので、画像フォルダは使用せず、スキンCSSの編集ページ上部にある「ブログデザインヘッダ・背景用画像の追加」で画像をアップしておきます。

編集可能CSSに、下記の記述があります。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{}/* ←ブログヘッダーに背景画像を敷きたいとき */

ここを下記のように編集します。

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
	height: 147px; /* ←画像の高さ＋margin-bottomの値 */
	margin-bottom: 20px; /* ←ヘッダー画像とその下に開けたいスペース */
	background: url('画像のパス') center top no-repeat;
}/* ←ブログヘッダーに背景画像を敷きたいとき */

次に、画像全体にホームに戻るリンクを設定します。設定の方法は、

タイトル文字の高さを画像と同じ高さにして、文字自体は見えない場所に移動する
ブログ説明の高さをゼロにして、文字を見えない場所に移動する

の2つ。高さが関係してきますので、高さに関する設定全体を操作しなければならず、ちょとややこしいです。設定対象は下記の部分。

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


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


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

この部分を下記のようにします。

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


/* skinTitleArea ブログタイトルのエリア */
.skinTitleArea{
	padding: 0;
}
.skinTitle{ /* ←新たに加えた設定 */
	display:block;
	text-indent:-9999em;
	height:127px; /* ←画像の高さ */
}

/* skinDescriptionArea ブログの説明エリア */
.skinDescriptionArea{
	height: 0px;
	text-indent: -9999em;
}

ブログタイトルからのリンクに画像と同じ高さを与え（.skinTitleの設定）、その他の高さ関係の設定をすべてゼロにしています。文字はtext-indentで、9999文字（em）分左側に配置することで見えなくしています。

なお、画像全体からホームにリンクさせるやり方は、見た目にそうだとわかりませんので、ユーザーにとっては迷惑な話だと思います。

現在暫定的にこうしていますが、これについては後に、グローバルナビを設置して「HOME」リンクをつける際に改善したいと思います。

タイトル画像のグラデーションを、ページ幅全体に適用する

ヘッダ画像のグラデーションを、横方向にも適用させます。先ほど画像を設定したdiv.skinHeaderAreaは、div.skinHeaderFrameというボックスに入っていますので、このボックスに対して背景画像を設定します。あらかじめ画像フォルダに画像を登録し、画像パスを取得しておきます。

そして、先ほど設定した/* skinHeaderArea ブログヘッダー980pxエリア */の上に、次の記述を加えます。

/* skinHeaderFrame　ブログヘッダーのいちばん外のエリア */
.skinHeaderFrame{
	background: url('画像パス') left top repeat-x;
}

画像の幅は1ピクセルで、高さはメインビジュアルと同じ。それを横方向（x軸方向）に繰り返し表示させています。

これでヘッダー部分の設定は完了です。

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

ブログメインビジュアルを完全画像化する

最上部バナー背景部分の設定

ブログメインビジュアルの設定

タイトル画像のグラデーションを、ページ幅全体に適用する