*Essence

HP用フリー素材とFC2共有テンプレートを作成・配布しています。

TOP >  Template >  カスタマイズ >  youth_resp のカスタマイズ(トップ画像変更)

youth_resp のカスタマイズ(トップ画像変更)

前記事から引き続き、テンプレート youth_resp 2c,3c のトップ画像の変更方法です。
お気に入りの画像に変更する事で、他には無い 自分だけのブログになります。(趣味やペットブログ等にも良いですね♪)
また、季節やイベント毎に変える等も、訪問される方の目を楽しませてくれる事と思います。(^-^)
youth-rosemihon.jpg
↑クリックで見本を表示


1) トップ画像を変更する。
2) 背景色を変更、若しくは背景画像に変更する。


1) トップ画像を変更する。
表示領域のサイズに合わせて画像が拡大・縮小されるので、スマートフォンやタブレットなど 端末に合わせた表示が出来ます。
画像をレスポンシブ対応させる方法は幾つか有りますが、パーセント指定と background-size:cover; を使った方法です。
background-size:cover; は、画像の幅と高さの比率を固定して領域を覆うように表示し、はみ出した部分を非表示にします。

テンプレートの管理画面下段の [ youth_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .topimg を入れて下さい。すると7ヵ所見つかり、1/7番目です。)

/* トップ画像 */
.topimg{
height:auto;
position:relative;
overflow:hidden;
padding-top:50.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 ,高さを下げたい場合は数値を下げる */
background:url('https://blog-imgs-133.fc2.com/s/o/r/sorauta1/youth-w.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

paddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
(青文字の部分は表示したい画像のアップロード先URLを入れて下さい。)
縦横比の計算値で%指定すると元画像が(拡大・縮小されて)全て表示されます。
この数値を計算値より少なくすると高さが縮小され縦が非表示になり、大きくすると拡大された画像の横が非表示になります。
画像の高さが「高いな」と思われましたら、%部分の数値を減らして調整して下さい。

youth-topimgcha1.jpgyouth-topimgcha2.jpg

詳しくは↓下記に画像付きで説明しておりますのでご覧下さいませ。
serene_resp のカスタマイズ(トップ画像変更)

続いて、(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .topimg を入れて下さい。)
・スタイルシート編集枠1/2程スクロールした所に有る(文字検索2/7番目)
・スタイルシート編集枠3/5程スクロールした所に有る(文字検索3/7番目)
・スタイルシート編集枠2/3程スクロールした所に有る(文字検索4/7番目)
に下記のようなCSSが有ります。

/* トップ画像 */
.topimg{
padding-top:40.00%; /* 高さを50%から40%に変更、位置はセンターのままで */
}


これは、レスポンシブで画面幅が小さくなった際に表示する画像の高さなので、お好みで調節して下さい。
(ブラウザの幅やデベロッパーツールを使って幅を狭めてみて、カラムが切り替わる際のトップ画像の高さを見ながら調整して下さい。)

更にその下、
・スタイルシート編集枠5/6程スクロールした所に有る(文字検索5/7番目)
に下記のようなCSSが有ります。
この部分は暗色テーマのトップ画像ですので、上記の要領で画像を変更して下さい。

/* トップ画像 */
body.dark .topimg{
height:auto;
position:relative;
overflow:hidden;
padding-top:50.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 ,高さを下げたい場合は数値を下げる */
background:url('https://blog-imgs-133.fc2.com/s/o/r/sorauta1/youth-d-1.jpg'); /* 表示したい画像URL */
background-position:center center; /* 表示する位置 中央寄せ */
background-repeat:no-repeat;
background-size:cover;
}

オレンジの文字部分に、表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100 で求めた数値を入れ、青い文字部分に表示したい画像のアップロード先URLを入れます。

続いて、
・スタイルシート編集枠9/10程スクロールした所に有る(文字検索6/7番目)
・スタイルシート編集枠ほぼ最下までスクロールした所に有る(文字検索7/7番目)
に下記のようなCSSが有ります。

body.dark .topimg{
padding-top:40.00%; /* 高さを50%から40%に変更、位置はセンターのままで */
}


これも、レスポンシブで画面幅が小さくなった際に表示する画像の高さなので、お好みで調節して下さい。
後は更新ボタンを押して適用させて下さい。
不具合が有った時のために、複製を作っておくと安心です。




2) 背景色を変更、若しくは背景画像に変更する。
トップ画像の色調に合わせて背景色(背景画像)を変更します。
スタイルシート編集枠のほぼ最上部(少し下)を見ると、下記のようなCSSが有ります。

body::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
to top, #fff, #fff 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px);

background:repeating-linear-gradient(
0deg, #fff, #fff 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px);

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

青い文字部分は古いブラウザ用のベンダープレフィックスなので、現行のブラウザ閲覧であれば無くても問題有りません。
(ベンダープレフィックスとは、先頭に付ける -webkit-, -moz-, -ms-, -o- など各ブラウザで先行実装/独自拡張された機能を使用する時に付ける識別子のことです。)
この(青い文字)オレンジの文字部分がストライプを形成しているCSSで、画像は使用しておりません。
#fff とあるのが白い線のカラーコードで、rgba(255,255,255,0) とあるのが透過部分です。
その透過部分から背景色(紫色の文字、カラーコード)が見えています。
ストライプはそのまま、背景色を変える場合は紫色の部分のカラーコードを変更して下さい。
背景に画像を使う場合は、青い文字部分とオレンジの文字部分を削除し、その部分に background-image:url(画像のURL); を入れて下さい。

そしてもう一ヵ所。
スタイルシート編集枠4/5程スクロールした所に、下記のようなCSSが有ります。
こちらは暗色テーマの方の背景色です。

body.dark::before{
/* ストライプの背景を他の画像にする場合は、ここから↓ */
background:-webkit-repeating-linear-gradient(
to top, #000, #000 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px);

background:repeating-linear-gradient(
90deg, #000, #000 1px, rgba(255,255,255,0) 1px, rgba(255,255,255,0) 10px);

background-size: 10px 1px;
/* ↑ここまでを削除し、代わりに background-image:url(画像のURL);を入れる */
background-color:#111d26; /* 背景色 */
}

上記の淡色テーマと同様に、#000 とあるのが黒い線のカラーコードで、rgba(255,255,255,0) とあるのが透過部分です。
背景色を変える場合は紫色の文字部分のカラーコードを変更し、画像にする場合は、青い文字部分とオレンジの文字部分を削除し、その部分に background-image:url(画像のURL); を入れて下さい。

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


Last Modified : 2020-02-24

Comments






非公開コメント

aki Re: h 様へ

こんばんは♪
そちらに伺ってお返事致しますね。(^-^)
2020-02-25-21:07aki [ 返信 * 編集 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-02-25-08:06  [ 返信 * 編集 ]