Top Page › Template › カスタマイズ › home_resp のカスタマイズ(背景色・画像変更)

home_resp のカスタマイズ(背景色・画像変更)

2020-10-17 (Sat) 21:50

前記事から更に(×2) (^_^;) 引き続き、テンプレート home_resp 2c,3c の背景色・背景画像の変更方法です。
トップ画像を変更したら、是非それに似合う背景色・背景画像に変えてみましょう。
youth-rosemihon.jpg
↑クリックで見本を表示


1) 背景色を変更、若しくは背景画像に変更する。
2) 背景色に合わせて記事部の背景色を変更する。





1) 背景色を変更、若しくは背景画像に変更する。
トップ画像の色調に合わせて背景色(背景画像)を変更します。
スタイルシート編集枠のほぼ最上部(少し下)を見ると、下記のようなCSSが有ります。
body::before{
/* 水玉の背景を他の画像にする場合は、ここから↓ */
background-image:radial-gradient(#fff 10%, transparent 15%),radial-gradient(#fff 10%, transparent 15%);
background-position:0 0, 15px 15px;
background-size:30px 30px;

/* ↑ここまでを削除し、代わりに background-image:url(画像のURL);を入れる */
background-color:#d7e7ef; /* 背景色 */
background-repeat:repeat;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}

背景を水玉模様から他のものに変える場合は、オレンジ色の部分を削除し、その部分に background-image:url(画像のURL); を入れて下さい。
水玉模様はそのまま、背景色を変える場合は紫色の部分のカラーコードを変更して下さい。

ブログが表示されるまでのほんの僅かな時間ですが、何も無い白い背景が表示されます。(ダークテーマ表示時も同様)
なので、 body に background-color:#cee4ee; /* 背景色 */ (薄い水色)
ダークテーマ時は body.dark に background-color:#272e3a; /* 背景色 */(グレー)と入れております。
水玉の背景色を変更した場合は、出来ましたらその上の body と body.dark に有る background-color も同じ色に変更して頂くと違和感が無くなりますので、お手数ですが併せて変更して下さいませ。

後は【更新ボタン】を押して適用させます。
不具合が有った時のために、複製を作っておくと安心です。




2) 背景色に合わせて記事部の背景色を変更する。
要約表示エントリー部分の色を背景色に合わせて変更する方法です。
改めて再度見本↓(^_^)
youth-rosemihon.jpg
スタイルシート編集枠内を探すと、1/6程の所に下記のような箇所が有ります。
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .blog-con を入れて検索して下さい。)
すると3ヵ所見付かりますので、1/3と3/3番目を変更します。
/* メインカラム部分 */

.blog-con{
position:relative;
margin:5px 0 35px;
padding:15px;
border:1px solid rgba(0,0,0,.1);
border-radius:5px;
box-shadow:0 5px 6px -3px rgba(0,0,0,.3);
background-color:#f6fcff;
}

↑1/3、↓3/3 上下オレンジの部分を変更したいカラーコード等にする。

/* メインカラム部分 */
body.dark .blog-con{
background-color:#212833;
border:1px solid #3f3f3f;
}

後は【更新ボタン】を押して適用させて下さい。
不具合が有った時のために、複製を作っておくと安心です。


[Tag] * カスタマイズ * 背景

Comments







非公開コメント