トップへのリンクを残したまま横幅1120pxのヘッダー画像を配置する方法です。

ヘッダー画像

①画像を用意してCSS編集画面からアップロードしてください。
画像の横幅は1120pxで高さは自由です

②CSSの一番下に以下をそのままコピペしてください。
変更するのは★〜★の3カ所です。

/* ヘッダーの背景色とヘッダー画像設定 */
.skin-bgHeader {
background: no-repeat scroll center;
background-color:#ffffff;
background-image: url(★アップロードした画像のURL★);
}


/* ヘッダー画像の幅と高さ */
.skin-bgHeader  [amb-layout="headerInner"] {
width: 1120px;
height:★用意した画像の高さ★px;
}


/* ブログタイトルと説明文 */
.skin-headerTitle {
visibility : hidden;
width: 1120px;
height:★用意した画像の高さ★px;
padding:0px;
}

 

③保存して完了

 

 

 

解説

以下は解説用です。コピペして使うとおかしくなりますから気をつけて下さい

 

/* ヘッダーの背景色とヘッダー画像設定 */

.skin-bgHeader {

background: no-repeat scroll center; ←背景画像のリピートを止めて中央に

background-color:#ffffff; ←ヘッダースペース全体の背景色

background-image: url(○○○); ←ヘッダーに配置する画像URL

}

 

/* ヘッダー画像の幅と高さ */

.skin-bgHeader [amb-layout=”headerInner”]{

width: 1120px; ←画像の幅を指定して表示場所確保

height:○○○px; ←画像の高さを指定して表示場所確保

}

 

/* ブログタイトルと説明文 */

.skin-headerTitle {

visibility : hidden; ←ブログタイトルと説明文を見えなくする

width: 1120px; ←カーソル移動でリンクになる場所確保

height:○○○px; ←カーソル移動でリンクになる場所確保

padding:0px; ←元から設定されてる余白を打ち消し

}

 

 

 

一番下のブログタイトルと説明文を見えなくする箇所は、「非表示だけど存在する」という状態です。

visibility : hidden;

で「存在しているけど見えない」という事になっています。

タイトルと説明文のエリアに元々トップへのリンクが設定されているので、リンクさせる機能だけ残して見えなくするといった意味です。

リンクごと消してしまいたい時は

visibility : hidden; の箇所を

display:none;

にすればできます。

 

以上お疲れさまでした^^