*Essence

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

 >  Template >  カスタマイズ >  ct_responsive のカスタマイズ(トップ画像・背景色変更)

ct_responsive のカスタマイズ(トップ画像・背景色変更)

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

/* トップ画像 */
.topimg{
height:0;
padding-top:22.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('アップロードした画像のURL')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}

赤文字の部分は変更する画像の縦横比を計算して数値を入れ、青文字の部分は表示したい画像のアップロード先URLを入れて下さい。

高さを0に指定してpaddingで高さを出し、背景の表示領域を確保します。
paddingの高さはパーセント指定で、
表示画像の高さ(縦サイズ)÷表示画像の幅(横サイズ)×100
という計算式で求めます。
パーセント指定をすることでブラウザのサイズに合わせて高さが変わるようになり、background-size:contain; で表示領域に画像が全て表示されるようになります。
元画像のサイズによっては、高さ(縦)が高くて記事部分が随分と下がってしまったり、幅(横)が足りなくて画像が引き延ばされて画質が荒くなることが有りますので、色々試して落ち着くサイズを探して下さい。m(__)m

すぐに使えるトップ画像変更CSSを3種、用意致しました。
お気に召すものがございましたらご利用下さい。(Read Moreをクリック)

Read More

top-image-s.jpg← クリックすると見本を表示(PCのみ)
CSS枠上部にある
body::before{
background:#d3c7b4 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:18.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image1.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。


top-image3-s.jpg← クリックすると見本を表示(PCのみ)
兼トップページ全文表示見本 (^-^)
CSS枠上部にある
body::before{
background:#b29e85 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:22.72%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-122.fc2.com/s/o/r/sorauta1/top-image3.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。


top-image4-s.jpg← クリックすると見本を表示(PCのみ)
CSS枠上部にある
body::before{
background:#cac2a8 url(https://blog-imgs-122.fc2.com/s/o/r/sorauta1/wgg-st4.png) repeat center;
position:fixed;
display:block;
top:0;
left:0;
width:100%;
height:150%;
content:"";
z-index:-1;
transform:translate3d(0,0,0);
}
を赤い部分のように変更し、

/* トップ画像 */
.topimg{
height:0;
padding-top:26.00%; /* 表示画像の高さ ÷ 表示画像の幅 × 100 */
background:url('https://blog-imgs-123.fc2.com/s/o/r/sorauta1/top-image4.jpg')0 0 no-repeat;
background-size:contain;
margin:0 20px;
}
を赤い部分のように変更して下さい。

Return

Wizard 様へ * by aki
Wizard 様、初めまして。
拙いBlogにご訪問頂き、誠に有難うございます。(^-^)

相互リンクのお誘い、早速 [magic] をサイドメニューに貼らせて頂きました。
もう一つの方は、宜しければ弊サイト [web material *Essence] のAuto Links のページにご自身で登録をお願い致します。m(__)m
…というのも、只今弊素材サイトでは『HP素材・HP作成支援サイト』の相互リンクのみ、且つサイトバナー及び説明文を送信して頂いたサイトに限定して掲載しております。
お手数お掛けして申し訳ありません。

更新無精ですが、宜しくお付き合い下さいます様宜しくお願い致します。m(__)m

いつもたのしく拝見しております! * by Wizard
いつもたのしく拝見しております!

いつもたのしく拝見しております^^
僕もテンプレートやプラグインをつくっています!
良かったら、相互リンクを
していただけないでしょうか^^?
こちらのブログからは、
リンクさせていただきました!

http://magiceffect.blog.fc2.com/
https://magicpark.web.fc2.com/

コメント






管理者にだけ表示を許可する

Wizard 様へ

Wizard 様、初めまして。
拙いBlogにご訪問頂き、誠に有難うございます。(^-^)

相互リンクのお誘い、早速 [magic] をサイドメニューに貼らせて頂きました。
もう一つの方は、宜しければ弊サイト [web material *Essence] のAuto Links のページにご自身で登録をお願い致します。m(__)m
…というのも、只今弊素材サイトでは『HP素材・HP作成支援サイト』の相互リンクのみ、且つサイトバナー及び説明文を送信して頂いたサイトに限定して掲載しております。
お手数お掛けして申し訳ありません。

更新無精ですが、宜しくお付き合い下さいます様宜しくお願い致します。m(__)m
2018-10-30 * aki [ 編集 ]

いつもたのしく拝見しております!

いつもたのしく拝見しております!

いつもたのしく拝見しております^^
僕もテンプレートやプラグインをつくっています!
良かったら、相互リンクを
していただけないでしょうか^^?
こちらのブログからは、
リンクさせていただきました!

http://magiceffect.blog.fc2.com/
https://magicpark.web.fc2.com/
2018-10-29 * Wizard [ 編集 ]