*Essence

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

投稿時間と最終更新日を表示&追記開閉CSS

投稿時間と最終更新日を表示&追記開閉CSS

2019/5/14 の記事に有りますように、修正及び装飾機能を追加致しましたのでカスタマイズのご案内を致します。対象テンプレート『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』の2カラム,3カラム。1) 記事の投稿時間表示の追加。2) 記事の最終更新日表示の追加。3) コメントの投稿時間表示の追加。4) 折り畳み追記の表示方法変更。投稿時間や最終更新日表示については、ユーザー様の要...

... 続きを読む

2019/5/14 の記事に有りますように、修正及び装飾機能を追加致しましたのでカスタマイズのご案内を致します。
対象テンプレート『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』の2カラム,3カラム。

1) 記事の投稿時間表示の追加。
2) 記事の最終更新日表示の追加。
3) コメントの投稿時間表示の追加。
4) 折り畳み追記の表示方法変更。

投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたので、5/14の更新でテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、更新されたテンプレートでは自身の好みで非表示にできるようHTML内に『不要の際は削除』の文言を入れました。

投稿時間・更新日


(↑見本画像はct_responsive 画像が荒くてスミマセン。^^;)
トップページは要約表示なので敢えて投稿時間を表示せず、個別記事画面で投稿時間及び最終更新日を表示します。
また、頂いたコメントの投稿時間も表示します。



1) 記事の投稿時間表示の追加。
FC2ブログの管理画面左メニュー『設定』の『テンプレートの設定』を選び、使用テンプレートのHTML編集をクリック
[ テンプレート名 ] のHTML編集という枠内約1/3程スクロールした所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] (<%topentry_youbi>) 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>


これを下記のように変更します。( (<%topentry_youbi>) の後ろに <!-- 投稿時間不要の場合は ここから--> を追加。)

<!-- 全文表示用HTMLの貼り換え ここから-->
<div class="blog">
<!-- トップページ ここから-->
<!--topentry-->
<article class="blog-con blog-con2">
<div class="entry_title"><h2 id="entry<%topentry_no>"><a href="<%topentry_link>"><%topentry_title></a></h2></div>
<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>)

<!-- 投稿時間不要の場合は ここから-->
<!--permanent_area-->&nbsp;<%topentry_hour>:<%topentry_minute><!--/permanent_area-->
<!-- 投稿時間不要の場合はここまでを削除 -->
<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">&#9998;</span></a>

紫色になっている <!--permanent_area--> <!--/permanent_area--> を外すと個別記事ページだけでなく、トップページにも投稿時間が表示されます。



2) 記事の最終更新日表示の追加。
上記の位置から少し下へ下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c candy2c,3c green2c,3c ryo-2c,3c
[ 検索する文字列 ] <div class="entry-footer clearLeft"> 対象1ヶ所
[ 対象テンプレート ] al_responsive2c,3c lace-al2c,3c
[ 検索する文字列 ] <div class="entry_state"> 対象1ヶ所

<!-- 全文表示用HTMLの貼り換え ここまで-->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)


これを下記のように変更します。( <div class="entry-footer clearLeft"> (若しくは<div class="entry_state">) の上に追加。)

<!-- 全文表示用HTMLの貼り換え ここまで-->
<!-- 最終更新日不要の場合は ここから-->
<!--permanent_area--><p style="text-align:right;margin:0 10px;">Last Modified : <%topentry_modified_year>-<%topentry_modified_month>-<%topentry_modified_day></p><!--/permanent_area--><!-- 最終更新日不要の場合はここまでを削除 -->

<div class="entry-footer clearLeft"> (若しくは<div class="entry_state">)



3) コメントの投稿時間表示の追加。
同様に、HTML編集枠内を半分より少し下がった所に、下記のようなHTMLが有ります。

テンプレートの更新等で目印の文字列(コメントアウト)記述が無い場合は、テンプレート管理画面・調べたいテンプレートのHTML編集を表示したまま、キーボードの CtrlF を一緒に押して文字列を検索して下さい。(Mac ご利用の方はCtrlをCommandキーに置き換えて+Fキー)
[ 対象テンプレート ] ct_responsive2c,3c al_responsive2c,3c candy2c,3c green2c,3c lace-al2c,3c ryo-2c,3c
[ 検索する文字列 ] <%comment_day> 対象1ヶ所

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day> * <%comment_name> <script>


これを下記のように変更します。( <%comment_day> の後ろにを追加。)

<!--コメント表示-->
<!--comment-->
<p class="com2" id="comment<%comment_no>"></p>
<article class="com_block <%comment_name>">
<h3 class="com_title"><%comment_title></h3>
<%comment_body>
<div class="com_state">
<%comment_year>-<%comment_month>-<%comment_day>

<!-- 投稿時間不要の場合は ここから-->-<%comment_hour>:<%comment_minute><!-- 投稿時間不要の場合はここまでを削除 --> * <%comment_name> <script>



4) 折り畳み追記の表示方法変更。
5/14 の修正記事のように、個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
個人で追加したJavaScript等がバッティングして開閉動作がされない場合にご利用下さい。
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。(5/14の記事と同じ修正記事です。)
↓(変更方法はここをクリック)Read More
スポンサーサイト

Theme : 共有テンプレート * Genre : ブログ * Category : カスタマイズ

Comment-open▼ * Comment : (4) * Trackback : (0) |

* - 様へ * by aki
ご訪問頂き有難うございます。(^_^)
不躾に訪問して、勝手に色々書き込んで大変失礼致しました。
そして、可愛くカスタマイズして頂き感謝致します。(ヘッダー画像のお手々がセンス良いです♪)
時々カスタマイズや修正・更新記事を掲載しておりますので、是非見に来て下さいね。
また、ご不明な点やお気付きの点なども、どうぞ気兼ね無くコメント下さいませ。

この度は素敵な出会いを有難うございました。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

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

* - 様へ * by aki
大変失礼致しました。
テンプレートの種類やDL時期によって、タグのclassやid名が違ったりコメントアウトが記述されていない場合も有りますね。
(…というご質問と受け取りましたが、 違っておりましたらお教え下さい。)
先程この記事の内容を修正致しましたので、文字検索でカスタマイズの位置を探し、必要タグを追記述して下さい。
宜しくお願い致します。m(__)m

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

テンプレートの修正・更新致しました。5/14

テンプレートの修正・更新致しました。5/14

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』をご利用頂き、誠に有難うございます。m(__)mユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。その他、記事及びコメント投稿時間(個別記事ページ)の表示、最終更新日(個別記事ページ)の表示、折り畳み追記表示部(ReadMore部分)をJavaScriptからCSSに変更、の追加を致しました。...

... 続きを読む

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。
その他、記事及びコメント投稿時間(個別記事ページ)の表示、最終更新日(個別記事ページ)の表示、折り畳み追記表示部(ReadMore部分)をJavaScriptからCSSに変更、の追加を致しました。

1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。


1) 外部参照CSSのlink要素にtitle属性を指定していたため、CSSの表示優先に生じた不具合修正。
修正が必要なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

外部リンクのJavaScriptとCSSをHTMLに追加記述した際に、JS内記述のスタイル及びCSSの一部が反映しない不具合が報告されました。(縦書き表示用JS・CSS)
テンプレートの <head></head> 内に有る
<link rel="stylesheet" href="<%css_link>" media="all" title="default"> という部分の、title="default" を外す事によって表示されるようになりました。
<link rel="stylesheet" href="<%css_link>" media="all">
(↑上記のように変更)
大変申し訳ございませんでした。そして、不具合にお気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、上記のように<head></head> 内のタグを修正お願い致します。


2) 投稿時間や最終更新日表示の追加、折り畳み追記の表示方法変更。
投稿時間や最終更新日表示については、ユーザー様の要望を拝見致しましたのでテンプレートに追加致しました。
ただ、投稿時間の表示は「個人の生活ペースが分かってしまうので知られたくない」というお声が、また最終更新日の表示は「誤字脱字程度の修正でも更新として表示されてしまう」というお声がございましたので、すぐに非表示にできるようHTML内に『不要の際は削除』の文言を入れました。
カスタマイズとして近日記事に致します。ご入用の方は暫しお待ち下さいませ。m(__)m

個別記事ページの折り畳み追記方法を、JavaScriptの使用からCSSのみに変更致しました。
この仕様変更も、(1)のJSを加えた際の不具合と共にJSのバッティングなのか動いてくれなくなったため、依存しないCSSを使って開閉するように変更致しました。(上記のような追加JSが無ければ現行のままでも問題有りません。)
変更可能なテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』『dt21_ryo』 の2カラム・3カラム。

変更した追記部分はこんな感じです。
↓(変更方法はここをクリック)
Read More

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等

Comment-open▼ * Comment : (5) * Trackback : (0) |

koubeiwata19 様へ * by aki
koubeiwata19様、初めまして♪
テンプレートのダウンロード、誠に有難うございます。
FC2ブログには沢山のテンプレートが有りますので、気分で変更しても楽しいですよね。
色々なものをお試し頂いて、是非お気に入りを見つけて下さい。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by koubeiwata19
今晩は

素敵なテンプレートを

お借りしました

有難う御座います

素姓乱雑 様へ * by aki
この度の縦表示の件、お問い合わせ頂かなかったら 当方の気付きも無く、改善も無いまま利用を諦める方がいらっしゃったかもしれません。
改めてお礼申し上げます。有難うございました。m(__)m

テンプレート、ご利用頂いてるんですね♪嬉しいです。(^-^)
FC2のアクセス解析も問題無い位置です。(<body>直下でOKです)
一応、設置のマニュアルURLです。
https://help.fc2.com/analysis/manual/Home/secchi.html

ブログ記事を拝見させて頂いて気付いたのですが、当方のテンプレートはIEとEdgeも対応です。
ただ、IEで閲覧時に 記事内の画像が大きく枠をはみ出てしまっていますので、スタイルを一つ追加して下さい。(これを加えればIE9~11でも崩れ無く表示出来ます。開発者ツールにて確認)

.shadow-attachment {
box-shadow: 6px 6px 6px rgba(0,0,0,0.4);
max-width: 100%; /* 最大表示幅 */
}

画像の影スタイルに、max-width: 100%; を追加して下さい。
そうしますと新しいブラウザは素より、当方の手持ちブラウザ(確認用に敢えて古いバージョン。win10)IE,Edgeの他 Opera27.0,Firefox40.0,Safari5.1 でもはみ出さずに表示出来ます。(^_^)

No Subject * by 素姓乱雑
一つ書き忘れました。FC2アクセス解析をどこに放り込んだら最適か、
ご教示ください。

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

令和初投稿♪ゆるJOG日和

令和初投稿♪ゆるJOG日和

新しい元号に変わり、ゴールデンウィーク真っ只中。昨日までの雨天から打って変わり本日の快晴♪今日はゆる~いJogging日和♪で、いつもの栃木県中央公園に行って参りました。新緑が綺麗な季節です。ホンの一か月で↓こんな景色がこんな景色に。(2019/04/06 → 2019/05/02)桜が綺麗だった橋の上からの景色も↓こんな景色がこんな風に変わりました。(^-^) (2019/03/31 → 2019/05/02)鮮やかな青空と新緑で、何かとっても元気になった♪...

... 続きを読む

新しい元号に変わり、ゴールデンウィーク真っ只中。
昨日までの雨天から打って変わり本日の快晴♪今日はゆる~いJogging日和♪
で、いつもの栃木県中央公園に行って参りました。

新緑が綺麗な季節です。ホンの一か月で
20190406.jpg
↓こんな景色が
20190502.jpg
こんな景色に。(2019/04/06 → 2019/05/02)

桜が綺麗だった橋の上からの景色も
20190331-1.jpg
↓こんな景色が
20190502-1.jpg
こんな風に変わりました。(^-^) (2019/03/31 → 2019/05/02)

鮮やかな青空と新緑で、何かとっても元気になった♪


Theme : 日々のつれづれ * Genre : 日記 * Category : その他

Comment-open▼ * Comment : (7) * Trackback : (0) |

* - 様へ * by aki
貴ブログにお返事致しましたので、お手数をお掛けしますが そちらをお読み下さい。m(__)m
お読みになったら、貴ブログ内の当方コメントは削除して頂いて構いません。

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

* - 様へ * by aki
テンプレートのご利用有難うございます。
突然不躾に訪問して、色んな指示を書き込んでしまって大変申し訳ございませんでした。
修正方法ですが、先ずHTMLを見てみますとコピペしてもらった箇所(HTML編集枠1/4程の所)に不要な終了タグが有るので、それを削除して下さい。
<!-- トップページ ここから-->の下方4行目以降

<div class="entry_date"><%topentry_year>-<%topentry_month>-<%topentry_day> (<%topentry_youbi>) <%topentry_hour>:<%topentry_minute><a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" target="_blank" rel="noopener"><span class="pen-link">✎</span></a>
</div>
</div>←これを削除する

もう一点、コメント投稿時間表示部分ですが、ゴメンナサイ!FC2の独自変数、間違えてました!
なので、もう一度修正をお願い致します。m(__)m(HTML編集枠半分より少し下の所)
<!--コメント表示-->の下方7行目以降

<%comment_year>-<%comment_month>-<%comment_day>-<%comment_hour>:<%comment_minute> * <%comment_name> <script>

に修正します。(<%topentry_~>になっているのを<%comment_~>に修正という事です。)
取り敢えずこの2つをやってみて頂けますか?宜しくお願い致します。

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

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

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

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

GW中のお返事、ちょっと遅くなります。m(__)m

GW中のお返事、ちょっと遅くなります。m(__)m

ご訪問頂き、誠に有難うございます。今年のゴールデンウィーク、平成から令和へ…新しい元号に変わります。長期のお出掛け等は致しませんが、ちまちまと忙しいので『コメントのお返事』、ちょっと遅れます。申し訳ございませんが、必ず致しますのでお待ちくださいませ。m(__)m…平成最後の投稿かな。オマケ。先日、お世話になっている動物病院に行った際に撮った画像。毎年来るけど、今年はちょっと早めの巣作り。『二期作』の如く、...

... 続きを読む

ご訪問頂き、誠に有難うございます。
今年のゴールデンウィーク、平成から令和へ…新しい元号に変わります。
長期のお出掛け等は致しませんが、ちまちまと忙しいので『コメントのお返事』、ちょっと遅れます。
申し訳ございませんが、必ず致しますのでお待ちくださいませ。m(__)m

…平成最後の投稿かな。オマケ。
動物病院の燕夫妻

先日、お世話になっている動物病院に行った際に撮った画像。
毎年来るけど、今年はちょっと早めの巣作り。
『二期作』の如く、ひと番いのヒナの巣立ちが済むと次の(別の)番いがやって来て同じ巣を使うという…(二期作とは、同じ耕地で同じ作物を1年に2回栽培し収穫すること…別の番いが別のヒナを育てるから『二毛作』?…ってか、例えが悪いかな?(;^ω^))
しかも動物病院の入り口&ALS〇K完備で尚安心の優良物件♪
ツバメが下見しにやって来ると、病院スタッフの方がカップうどんの容器を半分に切って壁に貼り付け巣を用意してくれます。(^-^)
(放っておくと勝手に糞で巣を作り始め、壁や下が汚れるので。)

待合室から見えるツバメの様子、卵→ヒナの成長が楽しみ♪です。


Theme : 日々のつれづれ * Genre : 日記 * Category : その他

Comment-open▼ * Comment : (8) * Trackback : (0) |

ねこ 様へ * by aki
当方の知人に、Vivaldy、IE(PC)、Chrome(NEC tablet 2台(新・旧 ブラウザ3種類))で閲覧確認して頂きました。どれも問題無く動作していたそうです。
ただ、こればっかりは全ての方が同じ閲覧環境に無いので、どこかで自身の線引きをしないといけませんよね。
例えば当方のテンプレートでも、IEの開発は今後されないですが、利用者がいる限りクロスブラウザを(且つ出来るだけ新旧)目指して作成しています。
が、ブラウザもデバイスも全て…は検証環境も無いですし、やっぱり無理です。(^^;

この度は『学びの機会』を頂き、有難うございました。
もし、より良い方法を見付けられましたら、是非!教えて下さいませ!
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by ねこ
こちらのiPadminiもsplit viewでウインドウを2つ並べて確認しております。
動作確認に使っている端末が私は多くないので、環境依存のものかもしれないですね。本体・OS共に最新でもないので…。
しかしこうして第三者様に、ここのブログの動作を通して別環境で検証していただき、明確な解決ではないにしろとても勉強になりました。本当にありがとうございます。

ねこ 様へ * by aki
ねこ 様へ
お返事頂き有難うございます。
当方の手持ちiPhoneSEのsafariと、旦那所有iPad(縦でも2カラムになるので、横向きsafariのsplit viewを使って2画面にし、1カラム表示)で検証致しましたが、仰るような不具合が見受けられませんでした。(iOS ver12.2)
暗色背景タップで解除後、普通にタイムラグ無くスクロールもドロワー開閉も出来ました。
改変後のJavaScriptは下記のようになっております。

<script>
$(function(){$("#nav_open").click(function(){$("nav").css({display:"block"}).animate({top:"0",left:"0"},{duration:200,complete:function(){$("#nav_wrap").css({display:"block",position:"absolute","z-index":"4",top:"0",bottom:"0",right:"0",left:"0",background:"rgba(0,0,0,0.5)"})}});});$("#nav_close,#nav_wrap").click(function(){$("nav").animate({top:"0",left:"-270px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}});})});
</script>
<script>
$(function(){var a;$("#nav_open").on("click",function(){a=$(window).scrollTop();$("body").addClass("fixed").css({top:-a});$("#nav_open").addClass("open")});$("#nav_close,#nav_wrap").on("click",function(){$("body").removeClass("fixed").css({top:0});window.scrollTo(0,a);$("#nav_open").removeClass("open")})});
</script>

それとCSSの @media only screen and (max-width:749px) { に
.fixed{
position:fixed;
width:100%;
height:100%;
}

を追加。参考サイトとの違いは、元々有る開閉scriptでメニュー下の背景を覆う部分#nav_wrapが有るので、それも.on("click",function()対象にするために$("#nav_close,#nav_wrap")としています。
当方はこれで動作しているのですが…挙動おかしいですか?
そうなると、申し訳無いのですが私の力量では難しいです。
あちこち見て廻りましたが、思うような記事の掲載が少ない上に既存JSの流用という訳にいかず、script及びCSSも一から見直さないと難しいようなので…やはりすぐには難しいです。
申し訳ございませんが、将来的なテンプレートの課題にさせて下さい。m(__)m

No Subject * by ねこ
様々な手段を試していただき、本当にありがとうございます。
ただ、実は最初の投稿に書いた「うまくいかなかったposition:fixedによる方法」というのがこの方法でした。今回aki様が参考になされたサイトを、同じく私も参考に記述を追加した次第です。追加内容もほぼ同じものであったかと思います。

初回の投稿では文章がかさむので「うまくいかなかった」の一言で簡単に省略してしまいましたが、詳しくお話しすると動作自体は目的のものができていました。何がうまくいかなかったかというと、ドロワー展開時に薄暗くなっている背景を触ってしまうとほんのしばらくですがほかの動作を受け付けなくなるのです。
ただいまaki様のこのブログでも試してみましたところ、やはり背景を触るとしばらくドロワーの収納やスクロールが一定時間受けつけなくなります。

私が動作確認を行っているのは、MacのFirefoxとSafari、iPadmini(iOS11.3)のSafariです。パソコンでは問題ないのですが、iPadminiでは上記の症状が出るため実装を見送ってしまいました。aki様の環境(特にiOS端末)ではいかがでしょうか。

ねこ 様へ * by aki
お返事が遅くなりまして申し訳ございません。

使えそうなscriptを見付けましたので、只今このブログに適用しております。
参考サイト: http://illbenet.jp/view/83
一応、PCではGoogleChrome,IE10,Edge,Firefox,Opera,Safari5.1(windows 10)で確認。
SPもandroid,iPhone 共にスクロール位置で背景固定されています。

問題が無ければ、下記のようにscriptを改変して下さい。
(不具合が有った時のために複製を作っておくと安心です。)
HTML編集枠内下段、ドロワーメニューscript部分の#nav_wrapに有る、
$("body,html").css({overflow:"hidden",height:"100vh"}) と(オープン時)
$("body,html").css({overflow:"visible",height:"auto"}) を(クローズ時)削除(多分ここまでは既にされていると思います)し、その下に

<script>
$(function(){var a;$("#nav_open").on("click",function(){a=$(window).scrollTop();$("body").addClass("fixed").css({top:-a});$("#nav_open").addClass("open")});$("#nav_close,#nav_wrap").on("click",function(){$("body").removeClass("fixed").css({top:0});window.scrollTo(0,a);$("#nav_open").removeClass("open")})});
</script>

を追加します。そして、スタイルシート編集枠内3/4程スクロールした所に
/* ドロワーメニュー部分 */ という文言が有りますので、この下辺りにでも

.fixed{
position:fixed;
width:100%;
height:100%;
}

と追加して更新して下さい。
これでスクロールの途中でも背景は止まっていると思うのですが…如何でしょう?(^-^;
ご確認頂き、不具合が無いかご連絡頂ければ幸いです。

No Subject * by ねこ
お休みの中、お返事いただきありがとうございます。
私もスクリプトに明るいわけでもなく、テンプレートの差分を作っては同じく模索を繰り返しておりました。当方縦に長いコンテンツを書くことが多いため、実は以前から背景の固定をさせないようにheight:100%とoverflow:hiddenに関する記述を消して使っておりました。まさに今現在aki様がこのブログに適用しているテンプレートと同じ動作です。
しばらくはこの処理で通していこうかと思っております。重ねてになりますが、お休みのところありがとうございました。私は一利用者としてですが、これからも宜しくお願いします。

ねこ 様へ * by aki
こちらこそ初めまして♪ご訪問頂き、誠に有難うございます。

SP閲覧ではやっぱりドロワーメニューの方が使い易い…という個人的な好みで、ほぼ同じようなドロワーメニューをレスポンシブテンプレートに導入しております。
しかしながら、当方JSに明るくないため、背景スクロールを「その位置で」止める方法を色々模索しているのですが、なかなか辿り着けません。。
例えばこのブログで試しているのですが、敢えて背景を固定しない、というのはどうでしょう?
実際に閲覧ブラウザで、このブログの幅を狭めて確認してみて下さい。
(1カラム表示時のbodyにスクロールバー非表示のcssを追加しています。ドロワーメニューの操作をするだけなら背景はそこで止まってます、が…マウスホイール動かせばスクロールしてしまいます。あくまでも”非表示”なので…。)(^-^;
SPでの閲覧はマウスホイールで動かす事が無いので、PC程は気にならない…と思います。
(ほぼ画面がメニューで占有されますし。)
如何でしょう?^^;

もう少し方法を探してみますので、暫くお待ち頂けますか?

No Subject * by ねこ
はじめまして。
スマホ閲覧時のドロワーメニューにサイドバーを使っているテンプレートがありがたく、重宝しております。サイドバーは下に落として、ドロワーは別物というものが多いもので。

配布されているテンプレートに関し、一つご質問したいことがございます。
ドロワー展開時、背景のメインカラムはスクロールが固定されているように作られていらっしゃるかと思います。この固定のタイミングで背景のスクロール位置がトップに戻ってしまいますが、これを現在位置のまま固定する方法はございませんでしょうか。

変数を用いスクロールの位置を取得・代入してみたものの、ドロワー収納時には元の場所に戻るのですが、どうも展開中だけはトップが表示されてしまいます。
スクリプトを拝見いたしますと、height:100%とoverflow:hiddenを割り当てて固定しているようですので、トップに戻る動作はこれによる副次的(?)なものかなと解釈しておりますが…。
手探りというか半ば手当たり次第ですが、topだったりmarginだったりを設定して、そこにスクロールの位置の値を代入したりしているものの未だ思うようには動かずです。position:fixedによる方法等他に思いつくものも試してはみましたが、やはりこちらもうまくいかず。
もしなにかご存知でしたらご教授いただきたく思います。

テンプレートの修正・更新致しました。4/26

テンプレートの修正・更新致しました。4/26

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』をご利用頂き、誠に有難うございます。m(__)mユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。修正したのは2点。1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。1) ドロワーメニュー下...

... 続きを読む

レスポンシブテンプレート、『al_responsive』『ct_responsive』『candy』『green』『lace_al』をご利用頂き、誠に有難うございます。m(__)m
ユーザー様よりご連絡を頂きまして、本日HTMLの記述ミス部分を修正・更新を致しました。

修正したのは2点。
1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。

1) ドロワーメニュー下の Title list 及び RSS のリンク先URLの誤記述。
修正が必要なテンプレート 『ct_responsive』『candy』『green』の2カラム・3カラム。

画面幅が狭く、サイドメニューがドロワーメニューになった際、メニュー最下段に【 Admin * Title list * RSS 】が表示されます。
そのうちの【 Title list 】と【 RSS 】のリンク先が、弊ブログURL「https://sorauta1.blog.fc2.com/」になっておりました。
表示確認に入れたものですが、いつから、どの時点でこうなっていたのか、全く気付きませんでした。ひょっとして初めから…?(…共有申請時に審査で撥ねられるからそれは無いか…)
大変申し訳ございませんでした。そして、お気付き頂いた方へ、誠に有難うございました。m(__)m

修正する箇所ですが、下記に掲載致しますHTMLを修正お願い致します。

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/4程スクロールした所に

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li>* <a href="https://admin.blog.fc2.com/control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?all" title="全記事一覧">Title list</a> * </li>
<li><a href="https://sorauta1.blog.fc2.com/?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<!-- 1カラム時のメニュー下管理ページリンク-->
<ul class="admin">
<li><a href="<%server_url>control.php" title="管理ページトップ">Admin</a> * </li>
<li><a href="<%url>?all" title="全記事一覧">Title list</a> * </li>
<li><a href="<%url>?xml" title="RSS">RSS</a></li>
</ul>
<!--/ 1カラム時のメニュー下管理ページリンク-->


(若しくは <%url> の部分をご自身のブログURLに変更でもOK。)


2) 文字サイズを任意で大きくした際の、下方文字はみだしをしないように修正。
カスタマイズで文字サイズを大きくされる方も多いと思いますので、もう少し簡単に・文字のはみ出し無く表示されるように修正致しました。
修正・更新したテンプレート 『al_responsive』『ct_responsive』『candy』『green』『lace_al』の2カラム・3カラム。
('19/04/05 修正まとめ記事にHTML該当部分が有りましたので記事修正致しました。併せてテンプレートのCSS修正をお願い致します。m(__)m '19/04/26 )

FC2管理画面左メニュー『テンプレートの設定』より、該当テンプレート名のHTML.CSS編集をクリック。
[ 該当テンプレート名 ] のHTML編集枠を3/1程スクロールした所に

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>
</div>


という部分が有りますので、そこを下記のように変更して下さい。(コピペ可)

<div class="right">
<div class="text_overflow">
<p class="moji-c"><%topentry_description></p>
</div>
<p class="right-txt"><a href="<%topentry_link>">... 続きを読む</a></p>
</div>
</div>


(上記青文字HTMLの4行目と5行目の上下を変更しています。)
そしてもう1点、[ 該当テンプレート名 ] のスタイルシート編集枠を2/5程スクロールした所に

.moji-c{
height:70px; /* 文字表示部分の高さ(3行分 文字数は200字で省略) */
overflow:hidden;
line-height:1.8;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
}


というような部分(heightの数値、3点リーダーの数値が違う場合も)が有りますので、下記のように変更して下さい。(コピペ可)

.moji-c{
overflow:hidden;
padding-bottom:1.8em;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3; /* 3行表示末尾に3点リーダー表示(webkit系のみ) */
max-height:5.2em; /* IE,Firefox対策(4行は7.0em、5行は8.8em) */
}


(上記青文字CSSの height:70px; を削除し、line-height:1.8; を padding-bottom:1.8em; に変更、最後に max-height:5.2em; という行を追加しています。また、-webkit-line-clamp:3; が4と記述されていた場合は4にし、max-height:7.0em; にして下さい。)
そして、文字サイズを大きくする場合は、スタイルシート編集枠内上の方に

html{
font-size:83%; /* フォントサイズは1em(16px)の83% */
overflow-x:hidden;
}

という部分が有りますので、ここのフォントサイズのパーセントの数値を調整して下さい。

HTML/CSSの修正に不安が有る場合は、複製を作成してから作業すると安心です。
この度の修正も、大変お手数とは存じますが、宜しくお願い致します。m(__)m

2019/05/13 修正
.moji-c の max-height数値を0.2emずつ減らしました。(ギリギリだとちょっぴりはみ出る文字が有るようなので…)m(__)m

Theme : 共有テンプレート * Genre : ブログ * Category : テンプレ修正等

Comment-open▼ * Comment : (8) * Trackback : (0) |

Super源さん 様へ * by aki
修正・更新の新記事を書いている時にコメント頂いたのですね。^^;
また修正してました。スミマセン。。
昔テンプレートを作っていた頃と違って、HTML5・CSS3、レスポンシブ、JQuery、多様の閲覧デバイス等々と色々不勉強な事が多過ぎて覚えきれない&覚えられない…。
時代の流れの速さに追いつけず、且つ頭の中は経年劣化しております。(-_-;)

まぁ、言い訳はこれくらいで…分からないなりに不具合の解決方法を探して考える事が楽しいので(ご利用されている方には迷惑ですが)、修正・更新は今後も続きます!(^-^;
申し訳ございませんが、何卒お付き合いの程 宜しくお願い致します。
Super源さん、当方JSは明るくないので教えて下さいませ。m(__)m

akiさん、こんばんは!(^^)/ * by Super源さん
久しぶりにやってきたところ、テンプレートがまた進化してるようですね。(^^)v
過去記事を少しずつ読ませていただき、遅れを取り戻したいと思います。【><】

というより、もしかしたら、テンプレートの修正等で、GWが終わってしまったのではないでしょうか。
複数のブラウザに対応させるのは、ホント大変ですよね。
どうもお疲れさまでした。m(__)m

それでは、またお邪魔します。(@^^)/~~~

* - 様へ * by aki
> scriptどうしがどこかで衝突しているからかもしれません。
正にその通りでした。
何度も申し訳ございませんでした。
詳細はメールでお送りしておりますのでご覧下さいませ。m(__)m

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

トーフスキー 様へ * by aki
無事に表示出来ましたか?不具合無ければ何よりです。(^_^)
また何かお気付きの点等がございましたら、どうぞ気兼ね無くお教え下さいませ。

修正・更新ばかりしている素人テンプレですが、どうぞ末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

No Subject * by トーフスキー
うわぁ!ありがとうございますぅ。

私のような初心者にもわかる丁寧な説明をいただき感激です。
おかげさまで思っていたような形になりました。

この度はお手数をおかけしました。
あらためて御礼申し上げます。

今後ともよろしくお願いいたします。

トーフスキー 様へ * by aki
こちらこそ、助かりました。有難うございました。(^-^)
…で、修正された簡易表示(3行表示)のスタイルシートですが、記事修正・更新前のものだと思います。
一度急いで記事を書いてアップし、その後追記修正して再度記事更新しています。(^^;
なので、お手数掛けて大変申し訳ございませんが、1点だけ追記をお願い致します。m(__)m

.moji-c の -webkit-line-clamp:3; が適用されるのは、webkit系(GoogleChrome,Safari)のみでIEやFirefoxでは効きません。
iPhoneやAndroidスマホで閲覧する場合は ほぼChromeかSafariなので、webkit系のベンダープレフィックス(識別子)で問題無く表示されます。
しかし、PC等で閲覧する場合は色んなブラウザが有るので皆同じ表示という訳にはいきません。
なので、webkit系以外のブラウザでは高さの最大値までしか表示しないように、且つ相対値にして(フォントサイズによって)可変するように変更しました。
(CSSが効かないブラウザでは、FC2の独自タグ<%topentry_description>で出力される200文字の要約文がそのまま表示されます。その200文字の文量から3行の高さを超えた分を非表示にするという方法です。)

height:70px; /* 文字表示部分の高さ(3行分 文字数は200字で省略) */

max-height:5.4em; /* IE,Firefox対策(4行は7.2em、5行は9.0em) */

pxは絶対値なので可変してくれませんが、emは相対値なので親要素のfont-sizeを基準に大きさを計算して高さを可変します。
このページの記事も修正してございますので同様に、スタイルシート編集枠を2/5程スクロールした所の .moji-c{ の最後に下記を追加して下さい。

max-height:5.4em; /* IE,Firefox対策(4行は7.2em、5行は9.0em) */


次にハンバーガーボタンですが、貴殿ブログの改変後のボタンと参考サイトのボタンを見ながら調整してみました。
ただ、参考サイトはボタンが固定されておらず一緒にスクロールされていく表示なので外の枠を大きく取れますが、弊テンプレでは固定させる事でスクロールしていても押下でき、且つ文面を邪魔しないようにボタン背景を透過にしております。
タップできる範囲を少し大きくしましたので、下記スタイルに変更した後、ご確認下さいませ。m(__)m
該当箇所はスタイルシート編集枠3/4程スクロールした所に
/* ドロワーメニュー部分 */
という文言が有りますので、その下辺りを修正して下さい。(沢山有るので、不安な場合は複製を作っておくと安心です。)

#btn1 {
overflow: hidden;
height: 30px;
top: 0;
right: 0;
width: 40px;
position: absolute;
}
#nav_open {
right: 5px;
padding-bottom: 10px;
position: fixed !important;
cursor: pointer;
width: 35px;
height: 40px;
z-index: 3;
}
#nav_open span, #nav_open span:before, #nav_open span:after {
position: absolute;
bottom: 30px;
right: 0;
height: 4px; /* ハンバーガーボタン 線の太さ */
width: 21px; /* ハンバーガーボタン 線の長さ */
background: #000;
display: block;
content: '';
transform: translate3d(0,0,0);
}
#nav_open span:before {
bottom: -7px;
}
#nav_open span:after {
bottom: -14px;
}

もう少し下↓

.css-cancel {
display: inline-block;
position: relative;
margin: 2px 12px 0 23px;
padding: 0;
width: 4px; /* キャンセルボタン 線の太さ */
height: 24px; /* キャンセルボタン 線の長さ */
background: #000; /* 線の色 */
transform: rotate(45deg);
}
.css-cancel:before {
display: block;
content: "";
position: absolute;
top: 50%;
left: -10px; /* 左からの位置 */
width: 24px; /* キャンセルボタン 線の長さ */
height: 4px; /* キャンセルボタン 線の太さ */
margin-top: -2px; /* 上からの位置 */
background: #000; /* 線の色 */
}


以上です。ご不明な点がございましたら再度ご連絡下さいませ。m(__)m

No Subject * by トーフスキー
修正ありがとうございます。
該当の箇所修正しました。

2点質問です。
スマホ表示の際、右上に表示されるハンバーガーボタンを大きくしたいんですがどうすればいいでしょう。一応太さと長さは変更しましたがもうちょっと大きくしたい。
このサイトくらいのサイズです。
http://pattayalife.net/

もう1点、ボディに表示される各記事の行数がWindows10上でfirefoxとchromeで異なります。
chromeは3行でちょうどいいんですが、firefoxは7行ほど表示されてちょっと間延びした感じになります。
できれば3行程度で揃えたいと思います。

教えてクレクレ君で申し訳ありません。