要約タイプのトップエントリー画像を大きくする・コメントの返信ボタン

ご要望やご質問の有ったもので、カスタマイズ出来るものを掲載致します。
気になるものがございましたらご利用下さいませ。m(__)m
（弊テンプレート用ですので、他のものとはid名やclass名、HTML/CSS等の掲載位置が異なります。他に転用した場合の不具合や質問、補償等は一切承りませんのでご了承下さい。）

１）　トップエントリー画像を大きくする。
２）　コメントに返信ボタンを付ける。
（２の記事は、2019/11/23の更新で標準装備致しました。更新日以前のテンプレート・カスタマイズとしてご利用下さい。m(__)m）




１）　トップエントリー画像を大きくする。
FC2ブログのテンプレートで、<!--topentry-->は『エントリーを繰り返し表示させる』ブロック変数です。
この記事で言う「トップエントリー画像を大きくする。」は読んで字の如く、<!--topentry-->で出力されたページのトップに有るエントリー記事の画像を大きくする、という意味で解釈して下さい。（なので、2ページ目以降もトップは大きい画像です。^^;）
要約表示タイプで並んでいる一番上だけ、横並びを解除して『画像を大きく表示する』というカスタマイズですので、全文表示タイプでは変わりません。m(__)m

↓下記画像はgreen-3c 。画像がボケて欠けてますが^^;、一番上の要約記事の画像だけ大きく表示されています。


テンプレートによってクラス名が違うので、ご自身のテンプレート名をご確認頂き、スタイルシート編集枠内に下記を追加して下さい。

al_responsive2c-l, al_responsive2c-r
(al_responsive3c は.con1 を .con2 にして下さい。)
3/5程スクロールした所の
/* 簡易表示トップページエントリー */
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

.con1:first-of-type .left{
float:none;
width:auto;
max-height:40vh;
margin-bottom:10px;
}
.con1:first-of-type .left img{
width:100%;
max-height:40vh;
}

最下部まで下がったところに有る
@media only screen and (max-width:400px) {
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

.con1:first-of-type .left{
margin-bottom:0;
}
.con1:first-of-type .left img{
max-height:155px;
}

（al_responsive3c は.con1 を .con2 にして下さい。）

--------------------

ct_responsive2c-l, ct_responsive2c-r, ct_responsive3c
ryo-2c, dt21_ryo-3c
2/5程スクロールした所の
/* 簡易表示トップページエントリー */
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

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

最下部付近までスクロールした所の
@media only screen and (max-width:400px) {
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

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

--------------------

candy-2c, candy-3c, green-2c, green-3c
2/5程スクロールした所の
/* 簡易表示トップページエントリー */
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

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

4/5程下へスクロールした所の
@media only screen and (max-width:420px) {
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
の下に追加

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

あとは更新ボタンを押せば反映されますが、不具合が有った時のために複製を作成し作業すると安心です。




２）　コメントに返信ボタンを付ける。
＊ 2019/11/23 の更新で、当方共有テンプレートに装備致しました。
以前、カスタマイズ上で少し不具合が有った部分の修正方法を、The other way round の Akira様に教えて頂きましたので、記事を修正させて頂きます。（有難うございました。m(__)m）

また、カスタマイズ済みのテンプレート配布許可を 同[ The other way round　-Akira様- ] に頂きましたので、装備のため修正・更新を致しました。
装備済みテンプレートの更新日は、スタイルシート上段に有る reset css が
/* ---reset css end----2019/11/20更新 */
/* ---reset css end----2019/11/23更新 */
の記述になっているものです。
上記更新日以前のテンプレートに追加する場合の修正箇所を、下記に掲載致しますので是非ご利用下さいませ。

[該当テンプレート]
genial_resp2c,3c
serene_resp2c,3c
ct_responsive
al_responsive
candy-2c3c
green-2c3c
lace-al2,al3
lace-d2c,d3c
dt21_ryo,ryo_2c

小さい修正を7/16にしたので、一緒に『コメントに返信ボタンを付ける』装備を追加致しました。
管理ページからのコメント返信で、名前の文字色を選択した場合に表示が崩れてしまう現象を確認しましたので、7/29の更新で装備を外し、以前の状態に戻しました。管理ページの名前文字色を変更をしない、管理ページのコメント画面から返信をせず、ブログの記事ページからの返信であれば崩れませんので、管理画面返信を使わない方用にカスタマイズとして掲載しておきます。
管理画面を使用してコメントの返信投稿した場合の不具合画像を『ReadMore』に掲載しましたのでご覧下さいませ。

テンプレートの投稿欄は、デフォルトで Subject に[No Subject ]が入っておりますが、頂いたコメントのお返事をする際に『返信』を押して頂くと Subject に[Re: "お名前"様へ ]が入るカスタマイズです。
ボタンを押さずに、そのまま[No Subject]や他の文に打ち換えして頂いても問題有りません。

有ればお返事するのにちょっとだけ楽かな～・・という機能です。^^;

先ず、HTML編集枠1/2より少し上くらい
<!--コメント投稿-->以下にある
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）
<input id="subject" type="text" name="comment[title]" value="No Subject" ～省略～
という文字列の、オレンジの部分が有るかご確認下さい。
（多分、全て付いていると思いますが、もし無かったら追加して下さい。）

次に、その下をゆっくり見ていくと
<!--コメント表示-->以下に有る
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）

[ <a href="<%comment_edit_link>">編集</a> ]

↓この文字列を下記のように変更します。

[ <!--comment_author--><!-- <!--/comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%comment_name> 様へ')" title="このコメントに返信する">返信</a><!--comment_author--> --><!--/comment_author--><!--comment_author--><a href="#blogcomment" onClick="changeTextValue('Re: <%author_name> 様へ')" title="このコメントに返信する">返信</a><!--/comment_author--> * <a href="<%comment_edit_link>" title="コメントを編集する">編集</a> ]

次に、HTML編集枠を一番下までスクロールさせ、</body> の上、 script群の一番下あたりに下記を追加します。
（文字で検索する場合は『Ctrl＋Fキー』を押して、表示された小窓に上記文字を入れる）

<script>function changeTextValue(a){document.getElementById("subject").value=a};</script>

あとは更新ボタンを押せば反映されますが、不具合が有った時のために複製を作成し作業すると安心です。