*Essence

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

Top Page › Template › カスタマイズ › serene_resp のカスタマイズ(トップ画像変更)
2019-06-18 (Tue)  17:00

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

テンプレート serene_resp 2c,3c のトップ画像の変更方法です。
このカスタマイズは、大変お手数ですが 『テンプレートの修正・更新致しました。6/17』 の記事を参考に修正・更新をされてからお願い致します。(更新記事 '19/06/17 以降にテンプレートをダウンロードされた方は、そのままカスタマイズ記事をお読み下さい。)

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

テンプレートの管理画面下段の [ serene_resp〇c ] のスタイルシート編集枠内
スクロールすると1/8手前位に下記のような箇所が有ります。

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

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

トップ画像の変更1
padding-top:47.5%; 縦横比計算値のまま
background-position:center center; 表示位置中央

トップ画像の変更2
padding-top:35.0%; 縦横比計算値より小さくした場合(高さが低くなり上下が非表示)
background-position:center center; 表示位置中央寄せ

トップ画像の変更3
padding-top:35.0%; 縦横比計算値より小さくした場合
background-position:center bottom; 表示位置中央・下寄せ(下段表示で上が非表示)

トップ画像の変更4
padding-top:60.0%; 縦横比計算値より大きくした場合(高さが増えて横が非表示)
background-position:right bottom; 表示位置右寄せ・下寄せ

(画像をクリックして頂くと少し大きく表示されます。)

パーセント指定をすることでブラウザのサイズに合わせて画像サイズが変わるようになり、position 指定する事で画像の気に入っている部分を表示する事が出来ます。
background-position:横方向 縦方向; で指定出来る値は
横方向  left/center/right/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等
縦方向  top/center/bottom/in(インチ)/pt(ポイント)/px(ピクセル)/%(パーセント)等

なので、極端に画像が横に長い場合でも位置を指定して表示出来ます。

トップ画像の変更
padding-top:43.0%; 縦横比計算値(22.72%)より大きくした場合
background-position:right center; 表示位置右寄せ・中央寄せ

これの元画像がこちら↓(クリックで原寸)
top-image3.jpg

お気に入りの画像で、色々と試してみて下さい。m(__)m
(但し、容量の大きい画像は表示が遅くなってしまいますので、閲覧される方のためにも 画像サイズ・容量を小さくされるよう注意して下さい。)

最終更新日 : 2019-06-21

Re: - 様へ * by aki
ご了承頂けて良かったです。(^_^)
また何かございましたら、どうぞ気兼ね無くお声を掛けて下さいね。
今後とも宜しくお願い致します。m(__)m

管理人のみ閲覧できます * by -

管理人のみ閲覧できます * by -

Re: - 様へ * by aki
お返事はお伺い致しますね。(^-^)

管理人のみ閲覧できます * by -

Re: - 様へ * by aki
ブログ説明文の文字色について、そちらにお伺いしてご説明致しますね。
宜しくお願い致します。m(__)m

管理人のみ閲覧できます * by -

Re: どなるど 様へ * by aki
いえいえ、いつも有難うございます。
色んな使い方で検証をする、という事が自分一人では出来ませんので、本当に、ご利用者の皆様の『お気付き』のおかげで当方のテンプレートがより完成形!(;'∀')になっていきます。
(…ってか、それ以前に不備の有る状態で共有申請するなよ、と。お手数おかけしてスミマセン。)
どうぞまた何か見付けられましたら、気兼ね無くお教え下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。

p.s. 先程、修正して更新致しました。有難うございました。m(__)m

Re: aki 様へ * by どなるど
akiさん、今晩は(^-^)

>PC画面で貴ブログ見る限りは表示されていないのですが…
>Facebook(に投稿して)の表示、という事ですよね?

すみません(^^;)私、昔から説明が下手でして…。。
そうなんです。ブログでは表示されないので気にしてなかったのですが、シェアした投稿に現れるので、ん?と思っていました。

ちなみに投稿内容が長文だとFacebookでも表示されないのですが、私みたいな超短文の投稿だと見えるようになります(^。^;)

先ほど、↓下記のオレンジ部分を削除して、Facebookにシェアしたら消えてました♪

削除した後のシェア表示はコレです。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190716000851497.jpeg

本当にありがとう御座いましたm(_ _)m

Re: どなるど 様へ * by aki
PC画面で貴ブログ見る限りは表示されていないのですが…Facebook(に投稿して)の表示、という事ですよね?
確認しようとFacebookに自ブログを(削除部分のカスタマイズを施して)掲載しようとしましたが、残念ながら、何故かしらうちのブログ「コミュニティ規約違反」でブロックされているのですよ。^^;
(今年の4月頃から、それまで有った分も全て閲覧不可になってるみたい。FBにブロック解除要請出してるのですが、未だに解除されてません。…ってか、何で?という感じです。)
当方でテンプレ改変後の確認が出来ませんので、大変申し訳ございませんが下記部分を削除してFBでご確認頂けますか?

<!-- コメントリストが不要の場合はここまでを削除(2) -->
</div>
<div style="text-align:right">
<a href="#entry<%topentry_no>" onClick="showHide('cmnt<%topentry_no>');">Comment-close▲</a>

</div>

最後部分にどうしても</div>を一つ残す必要が有るので、オレンジの部分を削除してみて下さい。

この部分は、折り畳みコメント部分を開かないと見えない部分なので((1)と(2)を削除すれば表示しないため)残しておいても問題無い…と思っていたのですが、FBは表示されない部分でもHTMLタグを読んで表示するようですね。(;'∀') 知らなかった。。
お手数ですが、改変後の表示具合をお教え頂いても宜しいですか?
宜しくお願い致します。m(__)m

ちょっとした質問 * by どなるど
akiさん、こんにちは(^-^)
前回↓の件、教えていただきまして有難う御座います。
着々とカスタマイズしてる最中です。

今回は以前からカスタマイズをしてる最中に、
気になる部分があって…その質問です。

私のブログは諸事情によりコメントの書き込みをナシにしているので、いつもHTML編集で『コメントリストが不要の場合はここから削除(1)(2)』の削除作業をしております。

その時に『コメントリストが不要の場合はここまでを削除(2)』の下の
<a href=〜Comment-close▲</a>が残るのですが、これは消さなくても大丈夫でしょうか?

いつもブログを更新したら自分のFacebookに記事をシェアしているのですが、たぶん…たぶんなのですがコレの【Comment-close▲】が文章の最後に表示されます。
別に何か悪さするわけでも困ってるわけでもないので、いつもスルーしています…(^^;)

一応、Facebookで見た時のシェア表示です。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190715160417337.jpeg

気になるような、ならないような感じの事で申し訳ない。。

Re: どなるど 様へ * by aki
では、先ず全文表示から要約表示への変更カスタマイズを行って下さい。
https://sorauta1.blog.fc2.com/blog-entry-321.html

追記する箇所はCSSに2ヵ所です。
スタイルシート編集枠を1/3程スクロールした所に
/* 簡易表示トップページエントリー */
.kiji1{
overflow: hidden;
margin:0;
}

と有るので、その下辺りに下記を追加

.blog-con:first-of-type .left{
float:none;
width:100%;
max-height:50vh;
margin-bottom:10px;
}
.blog-con:first-of-type .left img{
width:100%;
max-height:50vh;
}


同じく枠内を4/5程までスクロールすると
@media only screen and (max-width:420px) {
という部分が有るので、その中
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

の下に下記を追加

.blog-con:first-of-type .left {
margin-bottom:0;
}
.blog-con:first-of-type .left img{
max-height:140px;
}


後は更新ボタンを押して完了です。
当方のブログでは画像が小さいので拡大されて見難くなってますが、どなるど様のブログ画像なら綺麗に掲載されると思いますよ。(^_-)-☆
色々作って気分で変更するのも楽しそうです♪

Re: aki 様へ * by どなるど
akiさん、こんにちは(^-^)

やっぱり難しい事なんですね。。
いろんな言葉でググって調べてたのですが、
そんなカスタマイズは発見できず…
あとプラグイン3でフリーエリアを使って出来ないだろうかと
いろいろ思ったのですが、いい方法が見つからず…
やっぱり、akiさんに聞いた方が早いかなと思いました。

>例えばこのブログのようでは…
お手数おかけして申し訳ございません Σ(・ω・ノ)ノおっ
なるほど…そういう表示の仕方があるのですね。
一応、教えていただいても宜しいでしょうか。
複製作って試してみたいと思いますm(_ _)m

Re: どなるど 様へ * by aki
う~ん、多分両方共存は無理じゃないかなと。…というか、私ではその改変は無理です。^^;
出来るのかもしれませんが、残念ながら当方にその技量と知識がございません。そして、今のところ公式・共有でそのようなテンプレートに出会った事がございません。
申し訳無いです。m(__)m
例えばこのブログのようでは如何でしょうか?
基本形は要約表示で、ページトップの記事のみ画像を横並びさせず、カラムの幅100%で表示させています。(最新だけ、では無く2ページ目以降も同様になりますが。)
これであれば、CSSを少し追加するだけで出来ます。
…どうでしょう?(;´∀`)

全文表示と要約表示 * by どなるど
akiさん、こんばんは(^-^)
今回もワガママな質問です。
新着記事(新規投稿)だけを全文表示にして、
古い記事(投稿)は要約表示にする…
なんて事は可能なものなのでしょうか。。
そういう事が出来たらいいな〜
なんて思ってしまいました(^^;)
簡単に出来る事ならで結構です。
難しい事なら笑って無視してくださいね。

Comment-close▲

Comment







管理者にだけ表示を許可

aki Re: - 様へ

ご了承頂けて良かったです。(^_^)
また何かございましたら、どうぞ気兼ね無くお声を掛けて下さいね。
今後とも宜しくお願い致します。m(__)m
2019-08-19-03:00 * aki [ 編集 * 投稿 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-18-09:50 * - [ 編集 * 投稿 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-18-00:09 * - [ 編集 * 投稿 ]

aki Re: - 様へ

お返事はお伺い致しますね。(^-^)
2019-08-17-21:15 * aki [ 編集 * 投稿 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-17-17:08 * - [ 編集 * 投稿 ]

aki Re: - 様へ

ブログ説明文の文字色について、そちらにお伺いしてご説明致しますね。
宜しくお願い致します。m(__)m
2019-08-17-14:36 * aki [ 編集 * 投稿 ]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2019-08-17-00:39 * - [ 編集 * 投稿 ]

aki Re: どなるど 様へ

いえいえ、いつも有難うございます。
色んな使い方で検証をする、という事が自分一人では出来ませんので、本当に、ご利用者の皆様の『お気付き』のおかげで当方のテンプレートがより完成形!(;'∀')になっていきます。
(…ってか、それ以前に不備の有る状態で共有申請するなよ、と。お手数おかけしてスミマセン。)
どうぞまた何か見付けられましたら、気兼ね無くお教え下さいませ。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。

p.s. 先程、修正して更新致しました。有難うございました。m(__)m
2019-07-16-21:45 * aki [ 編集 * 投稿 ]

Re: aki 様へ

akiさん、今晩は(^-^)

>PC画面で貴ブログ見る限りは表示されていないのですが…
>Facebook(に投稿して)の表示、という事ですよね?

すみません(^^;)私、昔から説明が下手でして…。。
そうなんです。ブログでは表示されないので気にしてなかったのですが、シェアした投稿に現れるので、ん?と思っていました。

ちなみに投稿内容が長文だとFacebookでも表示されないのですが、私みたいな超短文の投稿だと見えるようになります(^。^;)

先ほど、↓下記のオレンジ部分を削除して、Facebookにシェアしたら消えてました♪

削除した後のシェア表示はコレです。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190716000851497.jpeg

本当にありがとう御座いましたm(_ _)m
2019-07-15-23:31 * どなるど [ 編集 * 投稿 ]

aki Re: どなるど 様へ

PC画面で貴ブログ見る限りは表示されていないのですが…Facebook(に投稿して)の表示、という事ですよね?
確認しようとFacebookに自ブログを(削除部分のカスタマイズを施して)掲載しようとしましたが、残念ながら、何故かしらうちのブログ「コミュニティ規約違反」でブロックされているのですよ。^^;
(今年の4月頃から、それまで有った分も全て閲覧不可になってるみたい。FBにブロック解除要請出してるのですが、未だに解除されてません。…ってか、何で?という感じです。)
当方でテンプレ改変後の確認が出来ませんので、大変申し訳ございませんが下記部分を削除してFBでご確認頂けますか?

<!-- コメントリストが不要の場合はここまでを削除(2) -->
</div>
<div style="text-align:right">
<a href="#entry<%topentry_no>" onClick="showHide('cmnt<%topentry_no>');">Comment-close▲</a>

</div>

最後部分にどうしても</div>を一つ残す必要が有るので、オレンジの部分を削除してみて下さい。

この部分は、折り畳みコメント部分を開かないと見えない部分なので((1)と(2)を削除すれば表示しないため)残しておいても問題無い…と思っていたのですが、FBは表示されない部分でもHTMLタグを読んで表示するようですね。(;'∀') 知らなかった。。
お手数ですが、改変後の表示具合をお教え頂いても宜しいですか?
宜しくお願い致します。m(__)m
2019-07-15-21:26 * aki [ 編集 * 投稿 ]

ちょっとした質問

akiさん、こんにちは(^-^)
前回↓の件、教えていただきまして有難う御座います。
着々とカスタマイズしてる最中です。

今回は以前からカスタマイズをしてる最中に、
気になる部分があって…その質問です。

私のブログは諸事情によりコメントの書き込みをナシにしているので、いつもHTML編集で『コメントリストが不要の場合はここから削除(1)(2)』の削除作業をしております。

その時に『コメントリストが不要の場合はここまでを削除(2)』の下の
<a href=〜Comment-close▲</a>が残るのですが、これは消さなくても大丈夫でしょうか?

いつもブログを更新したら自分のFacebookに記事をシェアしているのですが、たぶん…たぶんなのですがコレの【Comment-close▲】が文章の最後に表示されます。
別に何か悪さするわけでも困ってるわけでもないので、いつもスルーしています…(^^;)

一応、Facebookで見た時のシェア表示です。
https://blog-imgs-128.fc2.com/l/e/c/lechat5/20190715160417337.jpeg

気になるような、ならないような感じの事で申し訳ない。。
2019-07-15-16:20 * どなるど [ 編集 * 投稿 ]

aki Re: どなるど 様へ

では、先ず全文表示から要約表示への変更カスタマイズを行って下さい。
https://sorauta1.blog.fc2.com/blog-entry-321.html

追記する箇所はCSSに2ヵ所です。
スタイルシート編集枠を1/3程スクロールした所に
/* 簡易表示トップページエントリー */
.kiji1{
overflow: hidden;
margin:0;
}

と有るので、その下辺りに下記を追加

.blog-con:first-of-type .left{
float:none;
width:100%;
max-height:50vh;
margin-bottom:10px;
}
.blog-con:first-of-type .left img{
width:100%;
max-height:50vh;
}


同じく枠内を4/5程までスクロールすると
@media only screen and (max-width:420px) {
という部分が有るので、その中
.kiji2{
display:none; /* 1カラム時記事非表示 */
}

の下に下記を追加

.blog-con:first-of-type .left {
margin-bottom:0;
}
.blog-con:first-of-type .left img{
max-height:140px;
}


後は更新ボタンを押して完了です。
当方のブログでは画像が小さいので拡大されて見難くなってますが、どなるど様のブログ画像なら綺麗に掲載されると思いますよ。(^_-)-☆
色々作って気分で変更するのも楽しそうです♪
2019-07-15-01:06 * aki [ 編集 * 投稿 ]

Re: aki 様へ

akiさん、こんにちは(^-^)

やっぱり難しい事なんですね。。
いろんな言葉でググって調べてたのですが、
そんなカスタマイズは発見できず…
あとプラグイン3でフリーエリアを使って出来ないだろうかと
いろいろ思ったのですが、いい方法が見つからず…
やっぱり、akiさんに聞いた方が早いかなと思いました。

>例えばこのブログのようでは…
お手数おかけして申し訳ございません Σ(・ω・ノ)ノおっ
なるほど…そういう表示の仕方があるのですね。
一応、教えていただいても宜しいでしょうか。
複製作って試してみたいと思いますm(_ _)m
2019-07-14-13:52 * どなるど [ 編集 * 投稿 ]

aki Re: どなるど 様へ

う~ん、多分両方共存は無理じゃないかなと。…というか、私ではその改変は無理です。^^;
出来るのかもしれませんが、残念ながら当方にその技量と知識がございません。そして、今のところ公式・共有でそのようなテンプレートに出会った事がございません。
申し訳無いです。m(__)m
例えばこのブログのようでは如何でしょうか?
基本形は要約表示で、ページトップの記事のみ画像を横並びさせず、カラムの幅100%で表示させています。(最新だけ、では無く2ページ目以降も同様になりますが。)
これであれば、CSSを少し追加するだけで出来ます。
…どうでしょう?(;´∀`)
2019-07-14-05:53 * aki [ 編集 * 投稿 ]

全文表示と要約表示

akiさん、こんばんは(^-^)
今回もワガママな質問です。
新着記事(新規投稿)だけを全文表示にして、
古い記事(投稿)は要約表示にする…
なんて事は可能なものなのでしょうか。。
そういう事が出来たらいいな〜
なんて思ってしまいました(^^;)
簡単に出来る事ならで結構です。
難しい事なら笑って無視してくださいね。
2019-07-13-03:31 * どなるど [ 編集 * 投稿 ]