*Essence

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

Top Page › Template › カスタマイズ › 要約タイプのトップエントリー画像を大きくする・コメントの返信ボタン
2019-07-18 (Thu) 15:50

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

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

1) トップエントリー画像を大きくする。
2) コメントに返信ボタンを付ける。
(2の記事は、7/29の更新で装備解除致しました。カスタマイズとしてご利用下さい。m(__)m)


1) トップエントリー画像を大きくする。
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;
}


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




2) コメントに返信ボタンを付ける。
小さい修正を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> ]
↓この文字列を下記のように変更します。
[ <a href="#blogcomment" onClick="changeTextValue('To <%comment_name>&thinsp;様へ')" title="このコメントに返信する">返信</a> * <a href="<%comment_edit_link>" title="コメントを編集する">編集</a> ]

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

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

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

体調不良で、(テンプレートの不具合拡散を防ぐため修正更新を優先し)記事が遅れました事をお詫び致します。m(__)m


管理ページからのコメント返信で、名前の文字色を選択した場合に表示が崩れてしまう現象を確認しましたので、7/29の更新で装備を外し、以前の状態に戻しました。
管理ページの名前文字色を変更をしない、若しくは管理ページのコメント画面から返信をせず、ブログの記事ページからの返信であれば崩れません。

名前の装飾1



名前の装飾2

この不具合は、FC2の(投稿者名を表示する)独自単変数を使ってテンプレートの返信ボタンを作っているために起こる現象のようです。
大変申し訳ございませんが、管理画面のコメント返信をご利用頂く場合は、名前の装飾を『無し』にして投稿して頂くようお願い致します。m(__)m



Re: 呑兵衛あな 様へ * by aki
お礼だけは言わせて下さい!
記事修正しました。お気付き有難うございました。m(__)m

Comment-close▲

Comment







管理者にだけ表示を許可

aki Re: 呑兵衛あな 様へ

お礼だけは言わせて下さい!
記事修正しました。お気付き有難うございました。m(__)m
2019-10-09-20:45 * aki [ 返信 * 編集 ]