アメブロ カスタマイズ
新しいCSS編集用デザインを使って自分専用のオリジナルデザインにするための『ステップ②』です。
背景に、画像を挿入し、ページをスクロールしても背景が一緒にスクロールしないようにするための手順をご覧になれます。
カスタマイズ前の準備
この記事を読む前に、こちらの設定をしておいてくださいね。
変更に失敗し元に戻したい場合、こちらの記事をご覧ください。
カスタマイズ手順
- あらかじめ、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」をスクロールし、末尾に
/* 背景に画像を固定(iOS対応版)*/ body:before{ background-image:url("上記の画像のパスを貼り付け"); 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; }
※上記の画像には、ダブルクオーテーション内に下記のURLが貼りつけられています。
https://stat.blogskin.ameba.jp/blogskin_images/20200401/11/31/xe/j/o38402560youx2moon1585706403620.jpg
以上で適用完了です。お疲れさまでした。
記事を気に入って頂けたら
お願いします m(_ _)m
本でしっかり勉強したい人は、こんな本はいかがですか?
アメブロ カスタマイズ&デザインブック
2,480円
Amazon |