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

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

2020-02-23 (Sun) 07:00

前記事から引き続き、テンプレート 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); を入れて下さい。

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


最終更新日 : 2020-04-20

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2020-02-25-08:06

- URL [ 返信 ]

aki

Re: h 様へ

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

aki https://sorauta1.blog.fc2.com/URL [ 返信 * 編集 ]

教えてください

「youth_resp3c」に特化して質問します。
Q1.基本文字色を変更したいのですが、弄る場所を教えてください。具体的には
ダークモードでは真っ白、普通(?)モードでは真っ黒にするつもりです。

Q2.貴説明の「文字サイズの変更」を参考に
https://sorauta1.blog.fc2.com/blog-entry-374.html
html{
font-size:85%;
の「85%⇒100%」に変更したところ、「Title list」で変更したフォーマットが崩れてしまいました。
https://sorauta1.blog.fc2.com/blog-entry-380.html
以下のとおり、『吹き出し』後ろの数字が下行に落ちます。
https://nonn63400.blog.fc2.com/archives.html
「ct_responsive3c」でも「font-size:100%;」にしているのですが、こちらは崩れません。

著しい頭脳労働になるのであればスルーしてください。
よろしくお願いします
2020-04-11-19:21

呑兵衛あな http://nonn634.blog.jp/URL [ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

いつもご愛顧有難うございます。m(__)m
ご質問の件です。

> Q1.基本文字色を変更したいのですが、弄る場所を教えてください。具体的には
> ダークモードでは真っ白、普通(?)モードでは真っ黒にするつもりです。
…淡色モードでは元々#000(黒)になって居ります。
暗色モードは #ddd(白に近い灰色)なので、スタイルシート編集枠の中4/5程の所に有る
/* ダークテーマ用CSS */ の下

body.dark {
color:#ddd; /* 基本文字色 */

ここの色コードを #fff; に変更して下さい。(#fff; は #ffffff; 白の省略形なのでどちらでも可。)


> Q2.説明の「文字サイズの変更」を参考に「85%⇒100%」に変更したところ、「Title list」で変更したフォーマットが崩れてしまいました。
…今程記事を少し修正致しました。
https://sorauta1.blog.fc2.com/blog-entry-380.html

[<%titlelist_category>]</a><span style="opacity:0.5;display:inline-block;"> &#x1f4ac; <%titlelist_comment_num></span></p>
</div>
<!--/titlelist-->

上記のように、display:inline-block;を追加して下さい。
このCSSを追加する事で💬とコメント数の部分が1つの塊になりますので、例え文字数と表示幅の調整で一行落ちても、💬とコメント数が分かれて表示される事が無くなります。

文字サイズの変更は加味しておりませんでした。
この度の貴重な検証・情報、有難うございました。m(__)m
2020-04-12-00:27

aki URL [ 返信 * 編集 ]

Re: aki 様へ

さっそく御教授いただきありがとうございます。
修正しました
2020-04-12-09:19

呑兵衛あな http://nonn634.blog.jp/URL [ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

修正できたようで何よりです。
また何かお気付きが有りましたら、どうぞ遠慮無くお声掛け下さいませ。

この度もご連絡頂き、誠に有難うございました。m(__)m
2020-04-12-14:37

aki URL [ 返信 * 編集 ]







非公開コメント