アメブロ カスタマイズ
自分専用のオリジナルデザインにするための『ステップ②』です。
背景に、画像を挿入し、ページをスクロールしても背景が一緒にスクロールしないようにするための手順をご覧になれます。
カスタマイズ前の準備
この記事を読む前に、こちらの設定をしておいてくださいね。
変更に失敗し元に戻したい場合、こちらの記事をご覧ください。
カスタマイズ手順
- あらかじめ、3840×2160(16:9)の1MB以下の画像を用意します。
※上記のサイズは、4x フルHD対応のためです。
※どうしても1MBを超える場合は、2560×1440でも良いかと思います。
- 『ブログ管理』画面を開きます。
https://blog.ameba.jp/ucs/top.do
- 『デザインの設定』ボタンをクリックします。
https://blog.ameba.jp/ucs/skin/skinselecttop.do
- 「デザインの変更」の「適用中のデザイン」にある『CSSの編集』をクリックします。
https://blog.ameba.jp/ucs/editcss/srvcssupdateinput.do
- 「ブログデザインヘッダ・背景用画像の追加」の『参照』をクリックし、手順 1 で用意した画像を指定し、『アップロード』ボタンをクリックします。
- 「アップロードされた画像」の『この画像のパス』をコピーします。
- 「現在使用中のプロぐデザインCSS」をスクロールし、「(1-2)基本背景」に
/* 背景に画像を固定(iOS対応版)*/ body:before{ background-image:url("https://stat.blogskin.ameba.jp/blogskin_images/20200401/11/31/xe/j/o38402560youx2moon1585706403620.jpg"); background-position: center; background-repeat: no-repeat; background-size:cover; background-color: #ffffff; content:""; display:block; position:fixed; width:100%; height:100vh; top:0; left:0; z-index:-1; }
※パスをコピーした例
background-image:url("https://stat.blogskin.ameba.jp/blogskin_images/20200401/11/31/xe/j/o38402560youx2moon1585706403620.jpg");
- 「コンテンツ背景、ヘッダー以下の背景色」の部分を下記のように変更し、『保存』をクリックします。
/* コンテンツ背景、ヘッダー以下の背景色 */
.skin-blogBody, .skin-blogBodyInner {
background-color: #ffffff;
}
を/* コンテンツ背景 */ .skin-blogBody, { } /* ヘッダー以下の背景色 */ .skin-blogBodyInner { background-color: #ffffff; }
以上で適用完了です。お疲れさまでした。
記事を気に入って頂けたら
お願いします m(_ _)m
本でしっかり勉強したい人は、こんな本はいかがですか?