アメブロ旧CSS編集デザイン(2016年以前)でヘッダー画像設置方法


アメブロ旧CSS編集デザイン(2016年以前)でヘッダー画像設置方法

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

新しいCSS編集デザインはプロフィール画像が丸く表示されているデザインで、旧CSS編集デザインはプロフィール画像が四角く表示されているデザインです。

 

最近は新CSS編集デザインも徐々に増えてきましたが、一方でまだまだ旧CSS編集デザインを利用している人も多いでしょう。

僕自身も旧デザインです。

今回は2016年以前の旧CSS編集デザインでヘッダー画像を設置する方法を紹介します。

スポンサーリンク

 

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

1:まずはヘッダー画像をアップします

「ブログ管理」⇒「デザインの変更」⇒「CSSの編集」

ヘッダー画像をアップ

 

「参照」⇒「アップするヘッダー画像を選択」⇒「アップロード」

ヘッダー画像をアップ

 

ヘッダー画像をアップ

 

2:アップが完了したらCSS編集を行います

以下のCSSをCSS編集の一番下に貼り付けてください。

 

/* skinHeaderArea ブログヘッダー980pxエリア */
.skinHeaderArea{
height:300px;
width:980px;
background-color:#FFFFFF;
background: url(ここに画像のURLを入れます) no-repeat;
}

/* ブログタイトルとブログ説明文を消す */
#header h1,.skinTitleArea{ /* ブログタイトルを消す */
display:none;
}
#header h2,.skinDescriptionArea{ /* ブログ説明文を消す */
display:none;
}

/* ヘッダー画像をブログトップへのリンクにする */
.skinHeaderArea2,.skinBlogHeadingGroupArea{
padding:0;
}
.skinTitleArea{
display:block;
padding:0;
text-indent:-99999px;
}
.skinTitle{
display:block;
height:300px;
}

 

ヘッダー画像を設置_4

 

3:「ここに画像のURLを入れます」の部分に先程アップしたヘッダー画像のURLをコピーして貼り付けてください

ヘッダー画像URLコピー貼り付け

 

ヘッダー画像URLコピー貼り付け

4:一番下の「保存」ボタンを押して完了です

ヘッダー画像を設置_7

 

これで旧CSS編集デザインでヘッダー画像を設置する事ができます。

 


スポンサーリンク