アメブロの最新版CSS編集デザインでヘッダー画像を設置する方法



アメブロでは2016年に最新版のCSS編集用デザインが公開されました。

このテンプレのCSSでは今まで使えていたコード(過去のCSSコード)をそのまま使ってもほとんど反映されません。

 

最新版デザインではコード自体が大きく変わっている為、過去のコードをコピペしてもヘッダー画像は表示されないのです。

ここでは2016年以降に導入された最新版CSS編集用デザインでヘッダー画像を設置するコードを紹介します。

スポンサーリンク

 

ヘッダー画像を設置する方法

最新版のテンプレートにヘッダー画像を設置するには以下のコードをコピーしてCSSの一番下に貼り付けます。

 

/* ヘッダーの背景色とヘッダー画像を設定する */
.skin-bgHeader {
background: no-repeat scroll center;
background-color: #FFFFFF;
background-image: url(■■■ここにヘッダー画像のURLを記入■■■);
}

/* ヘッダーの横幅を設定する */
.skin-bgHeader [amb-layout=”headerInner”] {
width: 1120px;
}

/* ヘッダーの高さを設定する */
.skin-bgHeader [amb-layout=”headerInner”]>a {
height: 300px;
}

 

新しいデザインでは、ヘッダー画像の横幅は以前のテンプレートよりも広くなっています。

しかし、以前のデザインで使用していた980pxの画像を使う事も可能です。

また、ヘッダー画像の縦の高さは300pxで設定していますが、大きめの画像を使用している方はここの数字を変更して下さい。

 

ヘッダー画像を設置した時にブログタイトルと説明文を非表示にする方法

以下のコードをコピーしてCSSの一番下に貼り付けるとブログタイトルと説明文を非表示にする事ができます。

/* ブログタイトルと説明文を非表示にする */
.skin-headerTitle {
display: none;
}

 


スポンサーリンク