[修正]新・新デザインにヘッダー画像を設置するには？新・新「CSS編集用デザイン」

こんにちは。
AmebaOwndマイスター加藤です。


アメブロの新しいデザインでのCSS編集デザイン。。

今までカスタマイズしてきたCSSではまるごとコピー・ペースト
では使えなくなると思います。

そして、旧デザインと呼ばれたアメブロのデザインをお使いの方が、
新デザインに変更になり、デザインを変更した時に「旧デザインに戻せない」
という事態になりました。

今回のデザイン変更で、新・新「CSS編集デザイン」でも同じ状況になります。

今お使いのCSS編集デザインから新・新CSS編集デザインへ変更すると、
元へは戻せませんので、十分注意して下さいませ！！

新・新「CSS編集デザイン」にヘッダー画像を入れてみたいと思います。

大きく変更になったのは、
コンテンツの幅が９８０ｐｘから１１２０ｐｘに変更になりました。

ヘッダー画像のサイズも１１２０ｐｘへと変更又は新規作成が必要ですね。


ヘッダー画像設置

設置してみるとこんな感じになります。

今回の画像のサイズは　幅(width)1120px 　高さ(height)300px　です。

皆様の画像サイズに特に高さに合わせてCSSは設定変更が必要になります。
（太文字赤）





ヘッダー画像を登録してみよう

新しいサイズのヘッダー画像をまずは登録してみましょう。
（ブログデザインを新・新「CSS編集用デザイン」に変更したと仮定して進めます。）


アメブロ＞マイページ＞デザイン変更＞CSS編集を選択（クリック）

画像を選択＞アップロードしましょう。


アップロードしたヘッダー画像のURL（アドレス）は、CSS設置にひつようになりますので、メモ帳などにコピー・ペーストしておくと良いと思います。






設置に必要なCSS

今まで使っていたCSSがそのままでは使えない理由ですが、
CSSは命令を発信しているので、発信する住所が今までとは異なっているために、
CSSの内容はさほど変わらないかもしれませんが、
今までのCSSをまるごとコピーペーストでは使えなくなります。

今回の私の作ったものは以下のようになります。
今回ヘッダー画像を設置したデザインは、
「２カラム左ワイド」デザインとなります。

赤文字のところに前述でメモ帳にコピー・ペーストした
URL（アドレス）をペーストして、ペースとした下に記述されているCSSをコピーして、CSS編集画面の１番下にペーストしてください。


/*
=======================
新・新CSS編集用デザイン
20160311smilefactoryten
Atsushi Kato
=======================
*/

/* ヘッダー背景 */
.skin-bgHeader {
background-image:url(ここにヘッダー画像のURLをコピーペースト);
background-repeat: no-repeat;
background-size: 1120px;/*画像サイズを確認してくださいませ*/
height: 300px;/*画像サイズを確認してくださいませ*/
background-position:top;
}

/* ブログタイトル */
.skin-blogMainTitle {
text-indent:-9999px;
margin-bottom:0;
height:278px;
}

/* ブログ説明文 */
.skin-blogSubTitle {
text-indent:-9999px;
}

/* ヘッダータイトル */
.skin-headerTitle {
padding:0;
text-align: center;
height:300px;
}




CSSを貼り付ける場所です。






さぁ、これでひとまず新・新「CSS編集用デザイン」を使ってカスタマイズ、ヘッダー画像を設置出来そうですね。。

是非チャレンジしてみてくださいませ！！


ではまた。
加藤でした。


私のSmilefactorytenのAmebaOwndサイトはこちらでーす！！
kato AmebaOwnd site