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


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

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

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

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

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


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

大きく変更になったのは、
コンテンツの幅が980pxから1120pxに変更になりました。

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


ヘッダー画像設置

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

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

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





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

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


アメブロ>マイページ>デザイン変更>CSS編集を選択(クリック)

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


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






設置に必要なCSS

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

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


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


/*
=======================
新・新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


AD