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

►2019/07/18 15:50 

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

1) トップエントリー画像を大きくする。
2) コメントに返信ボタンを付ける。



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にしたので、一緒に『コメントに返信ボタンを付ける』装備を追加致しました。
更新以前のテンプレートは、デフォルトで 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('Re: <%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>

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

スポンサーサイト

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(0)Trackback(0) | Top ▲

重要!7/5の記事、CSSの修正1ヵ所追加お願いします!

►2019/07/08 22:21 

テンプレートをご利用頂き有難うございます。m(__)m
先日7/5に掲載した記事『重要!レスポンシブテンプレートの修正・更新致しました。7/5』に、記載し忘れた変更CSSがございましたので、新しい記事では有りますが掲載させて頂きます。

症状としては、前記事の修正を行うと1カラム時にドロワーメニューを開いた際、メニューが一番最上部に貼り付いて背景と一緒にスクロールしてしまいます。
これは、FC2の広告を最上部に固定させないための手段として、ドロワーメニューの背面を固定する『 height:100% 』を外したために起こるものです。
これを従来通りの位置にメニューを固定するために、下記のようにCSSの記述を修正して下さい。


al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}


serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

上記の記述変更を行って下さい。大変ご迷惑をお掛けしました。m(__)m
(7/5に更新した後のテンプレートで不具合挙動は有りませんが、更新前のテンプレートで7/5の記事通りに修正を行うと不具合が生じますので、上記修正をお願い致します。)
また、本日の記事は重複致しますが7/5の記事にも掲載致します。

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(0)Trackback(0) | Top ▲

重要!レスポンシブテンプレートの修正・更新致しました。7/5

►2019/07/05 23:48 

拙いテンプレートをご利用頂き、誠に有難うございます。
本日、共有化済みレスポンシブタイプのテンプレート 『serene_resp』『ct_responsive』『al_responsive』『ryo』『candy』『green』『lace_al』 の2カラム及び3カラムを修正・更新致しました。

FC2ブログの広告によって、1カラム表示になった際のドロワーメニューが開かなくなる不具合が発生致します。
これは、スマートフォン(android,iPhone)の各ブラウザアプリでモバイル表示をしている時に、下段に表示される広告が上昇して固定する事があり、この『上昇する広告』が邪魔をしてドロワーメニューのボタンが押せなくなる不具合です。
(表示パターンが幾つか有って、全ての広告がこのタイプではありません。)
この現象は、html や body に cssの height:100% が有ると発生するようです。
当方のテンプレートで該当スタイルを確認してみましたら、スタイルシート編集枠内上段に有る reset css の中(上から6段目程)に
html,body{height:100%;} が有り、テンプレートによってはこの部分の下に
html,body{
width:100%;
height:100%;
min-height:100%;
}
というスタイルが記述されているものが有る事が分かりました。
また、ドロワーメニュー内をスワイプしている際に後ろ側のページがスクロールしないよう、メニュー用のjQueryに html と body に対して、height:100% とoverflow:hidden を入れたものを使っておりました。
この、上部に広告が固定してしまう不具合を解消するため、本日の修正で上記のスタイル及びスクリプトを削除し、更新致しました。
本日以前(7月5日夕刻まで)にテンプレートをDLされた方は、お手数ですが再DLされるか、以下の修正を行って下さい。

また、詳しく画像付きでこの不具合を解説されているブログがございますので是非ご参照下さい。
【超重要】FC2ブログ広告によって起こる表示不備について: The other way round
貴重な記事、有難うございました。m(__)m



① テンプレートのスタイルシート編集枠内上部
/* -----reset css------ */ 以下6段程下に有る
html,body{height:100%;} を削除
同じくこの
/* ---reset css end---- */ 以下にある
html,body{
width:100%;
height:100%;
min-height:100%;
}
の中の height:100%; を削除



② 同じくスタイルシート編集枠内の下記部分を修正 (7/8の記事で修正している部分です。
al_responsive2c-l, al_responsive2c-r, al_responsive3c
lace-al2, lace-al3
 の場合
スタイルシート編集枠を1/3より少し上位までスクロールした所に有る
/* メニュー */ の下

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}

serene_resp2c-l,serene_resp2c-r,serene_resp3c
ct_responsive2c-l,ct_responsive2c-r,ct_responsive3c
candy-2c,candy-3c
green-2c,green-3c
dt21_ryo-3c,ryo-2c
 の場合
(/* ドロワーメニュー部分 */ 以下↓スクロールして)
スタイルシート編集枠を4/5位までスクロールした所に有る

nav{
position:fixed; /* absoluteからfixedに変更 */
~ 省略 ~
}



③ その他テンプレート毎に、HTML編集枠下段に有るscript群の中からドロワーメニュー表示用のscriptを探し、下記のものと差し替えて下さい。
(目印)
<script>
$(function(){$("#nav_open")
若しくは
<script>
$(function(){$("#aside_open")

長いので、続きからどうぞ。m(__)m

>> ReadMore

テーマ : 共有テンプレート - ジャンル : ブログ

テンプレ修正等Comment(15)Trackback(0) | Top ▲

プラグイン3をお知らせ用に表示する・管理人コメントを装飾

►2019/06/28 01:55 

メールやコメントでご質問頂いた事案の回答を、カスタマイズとして掲載致します。

1) プラグイン3をお知らせ用にインデックスページのみに表示。
2) 管理人コメントに画像を表示。
3) 管理人コメントの背景色を変更。(スタイル追加可)



1) プラグイン3をお知らせ用にインデックスページのみに表示。
プラグイン3をトップのお知らせ用として、ブログのトップページのみに表示します。(次ページ以降は表示されない。)
当方のテンプレートでは、通常、プラグイン3が記事カラム最上段に表示され、個別記事ページでは最下段に表示されるようになっております。
これを、インデックスページにのみ表示するカスタマイズです。

FC2ブログの管理画面左のメニュー『設定』の『テンプレートの設定』をクリックし、DLしたテンプレートの「HTML CSS」の編集をクリックします。
HTMLの編集枠をスクロールしていくと、
<div class="menu3">
<!--プラグイン3-->

という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--プラグイン3--> を入れて検索すると2ヵ所有りますので、上の方に有るものを改変して下さい。)
場所を見付けて頂いたら、その個所から
<!--/プラグイン3-->
</div>

という部分までを下記のようにFC2独自の変数タグで挟んで下さい。

<!--index_area-->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>

<!--/index_area-->

この<!--index_area--><!--/index_area-->で挟んだ部分はトップページのみに表示されます。
ただ、ページ上部に有るプラグイン3の全てがトップページのみの表示になりますので、常に表示しておきたいものは
サイドメニューに表示されるプラグイン1・2に移動して下さい。
また個別記事ページ下段に表示されるプラグイン3は、エントリーページの改変に関係無く表示されるので、
不要の場合はHTML編集枠2/3程スクロールした所に有る(検索結果2ヵ所のうち下の方)

<!-- 固定リンク画面の下段に表示 -->
<div class="menu3">
<!--プラグイン3-->
~~~省略~~~
<!--/プラグイン3-->
</div>
<!-- 固定リンク画面の下段に表示 ここまで -->


という部分を削除して頂くと、個別記事ページ下段に表示されなくなります。
あとは更新ボタンを押せば反映されますが、不具合が有った時のために複製を作成し作業すると安心です。




2) 管理人コメントに画像を表示。
2018年2月、テンプレート変数に管理人コメントブロック変数が追加されたのですが、テンプレートへの実装をしておりませんでした。(正直、FC2インフォメーション見て無かった…^^;)
今後のテンプレート更新時や新規申請テンプレートには付けようと思います。が、カスタマイズとして、すぐに付けられるよう掲載しておきます。(2019/06/29 の更新で当方のレスポンシブテンプレートに「管理人画像変数タグ」を実装致しました。)

テンプレートのHTML編集枠を大体半分位スクロールした所に
<%comment_title>
という部分が有ります。(ほぼ当方のテンプレートでは同じくらいの位置に有りますが、見つからない場合は検索して下さい。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <%comment_title> を入れて検索します。)
この変数タグの前に下記オレンジ色の部分を追加して下さい。

<!--comment_author--><img src="<%image>" alt="<%author_name>" style="border-radius:50%;width:50px;height:50px;margin:-18px 0 -8px -23px;border:1px solid #bbb;">&nbsp;<!--/comment_author--><%comment_title>

上記では環境設定のプロフィール画像が(小さく^^;)表示されます。
プロフィール画像以外を表示させたい場合は、<img src="<%image>" ~~の部分を
<img src="表示したい画像のURL" ~~
に変更して下さい。

後は更新ボタンを押して適用させて下さい。
ただ、管理人画像を表示させるには、FC2ブログにログインしている状態でコメント、または返信している必要が有ります。
(コメントの管理画面から必ずしもレスを打つ必要は有りません。あくまでも『ログインしている状態』であれば良いので、その状態で自ブログの投稿画面に打ち込めば表示されます。)
ログインしていない状態で打ったコメントには、画像が表示されません。m(__)m




3) 管理人コメントの背景色を変更。(スタイル追加可)
以前コメントにてご要望を頂き、現行の共有化済みレスポンシブテンプレートに、すぐに使えるCSSが付いております。
既に、使い方の説明を過去の修正・装飾記事に掲載しておりましたが、再度こちらにも掲載致しますので是非ご利用下さい。m(__)m

テンプレート設定ページの一番下に [ テンプレート名 ] のスタイルシート編集 という枠が有ります。
その枠を一番下までスクロールすると、

/* 管理者コメントの背景に色を付ける(日本語可・記号等は文字の前にバックスラッシュを入れる)
バックスラッシュは日本語表示用フォントで円記号に見えますが問題ありません */

.コメント入力時の管理者名 {
background-color:#fcfff2;
}


という文言が有ります。(上記はserene_resp2c-lの場合)
この .コメント入力時の管理者名 という部分に、コメントを書き込む際のお名前を入れて下さい。
例えば当方なら .aki , 名無しさんだったら .名無しさん , のように、記号が入る場合は記号の前にバックスラッシュ(フォントによっては\マークに見える。キーボードの位置は右下辺り、『ろ』のキー)を入れます。(例: .neko\*chan )
スタイルの内容は背景色になっておりますが勿論変更可。背景画像にしたり、文字色を変えたり、お好みに変更して下さい。

また、該当する箇所が無い場合(更新前のテンプレート等)は過去の修正・装飾記事にも掲載しておりますので、そちらも併せてお読み下さい。
al_responsiveとct_responsiveの修正及び装飾追加

カスタマイズは、不具合が有った時のために複製を作成して作業すると安心です。

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(9)Trackback(0) | Top ▲

折り畳み追記の開閉

►2019/06/27 23:50 

折り畳み追記についてを、要望の有ったカスタマイズと一緒にまとめました。

この『折り畳み追記』については、FC2ブログテンプレートの[レガシー・カスタマイズ]とでも言いますか、昔から要望されるカスタマイズで、古い記事に掲載があるブログも多数ございます。(掲載が古い共有テンプレートにも付いている事が多い機能です。)
そのため当方のテンプレートでも初めから付帯しております。
しかし、追記の使用・表示方法は、テンプレートを利用される方のお考えで賛否等もあり、機能の使用を強制するものではございませんので、ご不要の方・追記を隠す必要性を感じない方は、大変お手数ですがHTML編集枠内のコメントアウト内を削除・編集して下さい。

1) 折り畳み追記の表示方法変更。
2) トップページ全文表示で折り畳み追記を開閉。


1) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しましたので、カスタマイズ記事として再掲載致します。(修正記事以降にDLされた方には必要ありません。HTMLソースで下記のようになっているかをご確認下さいませ。m(__)m)
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
また、追記開閉が不要の場合は該当箇所の
<!-- 記事ページの追記開閉が不要の場合はここから削除 --> から
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる --> のように削除及び文言の追加をお願い致します。

変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。


変更箇所は、HTML編集枠内1/3程スクロールした所に有る

<p id="readmore" style="padding-top:3em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a>
<noscript>
<a href="<%topentry_link>#more">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<hr class="hr1">
<%topentry_more><a href="#readmore" onClick="showHide('more<%topentry_no>');">Return</a>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


という部分を下記に変更

<p id="readmore" style="padding-top:1.8em;margin-top:-3em;margin-left:-5px;">&#8203;</p>
<!-- 記事ページの追記開閉が不要の場合はここから削除 -->
<!--permanent_area-->
<div class="hidden_box">
<input type="checkbox" id="navTgl">
<label for="navTgl" class="open">ReadMore</label>
<div class="hidden_show"><%topentry_more>
<label for="navTgl" class="close">Close</label>
</div>
</div>
<!--/permanent_area-->
<!-- 追記開閉が不要の場合はここまでを削除し、この部分に<%topentry_more>(全角山括弧を半角に変更して)を入れる -->


そして、スタイルシート編集枠内一番下(“@media only screen” で括っていない所)にでも

/* 記事ページ追記ボタン */
.hidden_box label{
padding:0 10px;
border:solid 1px #aaa;
cursor:pointer;
}
.hidden_box label:hover{
background:#e1f0f6;
color:#333;
}
.hidden_box input {
display:none;
}
.hidden_box .hidden_show{
height:0;
padding:0;
overflow:hidden;
opacity:0; /* 中身を非表示にしておく */
}
.hidden_box input:checked ~ .hidden_show{
padding:10px 0;
height:auto;
opacity:1; /* クリックで中身表示 */
}


上記を追加して更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。




2) トップページ全文表示で折り畳み追記を開閉。
テンプレート内に既に記述して有るJavaScript(コメントOpen用)を使って、トップページ全文表示(要約表示から全文表示へのカスタマイズ後も含む)での追記開閉が出来ます。
ただ、トップページで追記も見せてしまうと個別記事ページへの誘導は難しくなると思いますので、ご自身の判断でお使い頂きます様お願い致します。m(__)m
(カスタマイズ後の個別記事ページでは、展開された状態の表示になります。)

HTML編集枠をスクロールしていくと、
<!--more_link-->
という部分が有ります。
(PCのキーボードで『Ctrl+Fキー』を押して開いた窓に <!--more_link--> を入れて検索すると一ヵ所だけ有ります。)
場所を見付けて頂いたら、その個所から
<!-- 全文表示用HTMLの貼り換え ここまで-->
を下記に貼り換えて下さい。

<!--more_link-->
<p><a href="javascript:void(0);" onClick="showHide('more<%topentry_no>');">Read More</a></p>
<noscript>
<a href="<%topentry_link>#readmore">Read More</a>
</noscript>
<div class="sidehide" id="more<%topentry_no>">
<%topentry_more>
<p><a href="#more<%topentry_no>" onClick="showHide('more<%topentry_no>');">Return</a></p>
</div>
<!--/more_link-->
<!--more-->
<p id="readmore" style="padding-top:1.8em;"></p>
<%topentry_more>
<!--/more-->
</div>
<!-- 全文表示用HTMLの貼り換え ここまで-->


上記に貼り換えて更新ボタンを押せば完了です。
不具合が有った時のために複製を作っておくと安心です。

テーマ : 共有テンプレート - ジャンル : ブログ

カスタマイズComment(0)Trackback(0) | Top ▲