*Essence

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

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

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

拙いテンプレートをご利用頂き、誠に有難うございます。
本日、共有化済みレスポンシブタイプのテンプレート 『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

serene_resp2c-l, serene_resp2c-r, serene_resp3c
ct_responsive2c-r, ct_responsive3c
ryo-2c, dt21_ryo-3c

<script>
$(function(){$("#nav_open").click(function(){$("nav").css({display:"block"}).animate({top:"0",right:"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",right:"-270px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}})})});
</script>


ct_responsive2c-l
<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>


al_responsive2c-l
<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","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}})});$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}})})});
</script>


al_responsive2c-r, lace-al2
<script>
$(function(){$("#nav_open").click(function(){$("nav").css({"display":"block"}).animate({"top":"0","right":"0"},{duration:200,complete:function(){$("#nav_wrap").css({"display":"block","position":"absolute","z-index":"4","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}})});$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","right":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}})})});
</script>


al_responsive3c, lace-al3
<script>
$(function(){$("#aside_open").click(function(){$("aside").css({"display":"block"}).animate({"top":"0","right":"0"},{duration:200,complete:function(){$("#aside_wrap").css({"display":"block","position":"absolute","z-index":"4","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}})}),$("#aside_close,#aside_wrap").click(function(){$("aside").animate({"top":"0","right":"-230px"},{duration:200,complete:function(){$("#aside_wrap").css("display","none")}})})}),$(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","background":"rgba(0,0,0,0.5)","top":"0","bottom":"0","right":"0","left":"0"})}})}),$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}})})});
</script>


candy-2c,3c, green-2c,3c
<script>
$(function(){$("#nav_open").click(function(){$("nav").css({display:"block"}).animate({top:"0",right:"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",right:"-270px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}})})});
</script>

関連記事

コメント







管理者にだけ表示を許可

aki Re: トーフスキー 様へ

ゴメンナサイ!閉じタグが一つ、足りませんでした!
再度上書き修正したテキスト上げておきましたので、ご覧下さいませ。(下段のコメントと同じURLです。)m(__)m

<!-- 月別アーカイブページ記事一覧表示 ここまで -->
</div>
↑この閉じタグを追加して下さい。

これでダメな場合は、改変後のHTML全て記述したテキストをアップしますので、並べて確認しながらカスタマイズして下さいませ。
お手数をお掛けして申し訳ございません。。
2019-07-18-22:46 * aki [ 返信 * 編集 ]

Re: aki 様へ

教えていただいた内容で修正してみたんですが、プレビューを表示するととんでもない表示になってしまいました。

多分どこか修正ミスってるんだと思うんですがなにかヒントでも考えられますか?

https://blog-imgs-128.fc2.com/t/o/u/toufuski/toufuskiblogfc2com__preview.png

手の掛かる子でスンマセン。
2019-07-18-16:05 * トーフスキー [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

お返事が遅くなり、大変申し訳ございませんでした。
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/category-monthly_list.txt

作業箇所も一緒に書いて有りますのでご確認下さいませ。m(__)m
当方はヤフブロに知り合いが居ないため、ブログの構成を良く見た事無いのですよね。^^;
なので「あんな風に~~」みたいなのが分からないのです。お手数をお掛けしてスミマセン。
どっちにしてもテンプレート自体が我流なので、不備・不具合・お気付き等何かございましたら色々お教え下さいませ。

ヤフブロご出身の方は皆さま長く運営されてる方がばかりで、記事数が半端無く多い!それはそれは素晴らしく、すごい事です。(^-^)
なので自身のブログで確認しようにも、先般の如く(記事数が少ないが故に)難しいことも有るのですね。
この度お手伝い頂き良く分かりました。有難うございました。m(__)m
2019-07-15-00:30 * aki [ 返信 * 編集 ]

Re: aki 様へ

ひとつ思いついたんですが、カテゴリや月別アーカイブ内で、記事一覧と要約表示をボタンで切り替えってできないでしょうか。

先の全記事一覧のボタンのような感じ。
デフォルトは要約表示で。

これができればうれしい。
ヤフブロの[ リスト | 詳細 ]のような感じ。

素人が勝手なことを言って申し訳ありません。
2019-07-13-17:19 * トーフスキー [ 返信 * 編集 ]

Re: aki 様へ

遅ればせながら本日テンプレートを修正してみました。
結論からいうと、全記事一覧とコメントの時間表示だけ修正しました。

カテゴリ一や月別アーカイブ、タグ内の一覧表示は下部の記事要約とダブるのが閲覧者には混乱を招くかなって思って、適用してみたものの結局削除しました。

要約記事を削除する方法も教えていただんですが、それなら記事一覧無しの要約だけでいいかと・・・

懇切丁寧に教えていただいたのに申し訳ありません。

でもまた気が変わったときのためにこちらの記事やtxtへのリンクは保管しておきます。

いつもいつも親切な対応ありがとうございます。感謝しております。
2019-07-13-16:12 * トーフスキー [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

お返事が遅くなり申し訳ございません。
先ず、先般追加した部分は削除して、元に戻して頂けるようお願い致します。
(↓で変更した箇所です。この変更した部分を削除して下さい。)
『カテゴリーとアーカイブリスト』
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/ct_categorylist.txt ←このソースは削除

HTMLを挿入する場所は、同じ『全記事リスト』の
<div class="archive">
<!-- 全記事リスト開始 -->
の所から
<!-- 全記事リスト終了 -->
</div>
までを削除し、そこに下記のURLを表示させた全文を貼り付けて下さい。
全部貼った後の下段には
<div class="menu3">
<!--プラグイン3-->
が来ますので場所をお間違えの無いように。(^-^)
『全記事一覧・カテゴリー・月別・タグリスト』
https://blog-imgs-128.fc2.com/s/o/r/sorauta1/archive-list.txt ←これを全てコピペ

プラグイン3はindexページのみ表示にされてるのかな?であれば次に記述されているソースは
<!--index_area-->
<div class="menu3">
<!--プラグイン3-->
になりますのでご確認下さい。

サイドのメニューで『カテゴリー』や『月別アーカイブ』『タグリスト』をクリックし表示したページのリスト数は、管理画面の環境設定(ブログの設定→記事の設定)で変更して下さい。
一応、そのページだけページネーション(ページ割りのリンク)を上段に持ってきています。
次へ・前へという表記が良い場合はお教え下さいませ。m(__)m
また、各ページのリスト下段に記事の要約表示が表示されるのですが、不要であれば(リストのみ表示したい場合)、下記のようにFC2のエリア変数を追加して下さい。

<!-- トップページ ここから-->
<!--topentry-->
<!--not_category_area-->
<!--not_date_area-->
<!--not_tag_area-->

<article class="blog-con blog-con2">
省略
</article>
<!--/not_tag_area-->
<!--/not_date_area-->
<!--/not_category_area-->

<!--/topentry-->
<!-- トップページ ここまで -->

(どんな表示になるかは、このブログで確認できます。)

>あと可能なら、タイトルは1行におさまる最大の文字数で切ってもらうことは可能でしょうか。
…文字数で非表示にするにはJS使ったりと難しいので、CSSでやってみました。
幅100%で、それを超える文字は非表示及び三点リーダーで省略するように、先程のタグ内にインライン化しています。

>あと、質問ですが、コメントに日付だけでなく時間も表示するようにするにはどうすればいいんでしょう?
…カスタマイズ記事に掲載しておりますので、こちらのページを参考に頑張ってみて下さい。あ、簡単ですよ。(^o^)丿
https://sorauta1.blog.fc2.com/blog-entry-318.html

以上ですが、カスタマイズには複製を作ってから!が安心です。戻すのって大変ですものね。^^;
それと、カスタマイズの具合を見てどんな感じか、ご面倒でもお教え頂いて宜しいですか?
2019-07-10-23:24 * aki [ 返信 * 編集 ]

No Subject

なるほど、カテゴリ別の一覧表示はそういうロジックでしたか。
それなら1ページに収まらない場合はおかしな表示になってしまいますね。
仕方ないですね。

>直ぐ変更できますよ?(^-^)

これお願いします。
教えてくださいm(_ _)m

>HTMLの追記編集でカテゴリ・月別アーカイブ・タグページに、ページの記事一覧リストを表示する方法

これも合わせてお願いします。

あと、質問ですが、コメントに日付だけでなく時間も表示するようにするにはどうすればいいんでしょう?

クレクレ君で申し訳ありません。
2019-07-10-08:11 * トーフスキー [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

表示、確認致しました。テストして頂き有難うございます!
開いていない部分の表示とそのページに表示されるカテゴリー別の件数自体は不具合では無いですね。これはこれで正常です。(^^;

カテゴリー別の一覧を表示するのに、『ページの全記事一覧を出してから振り分けする』というjavascriptなので、というかNet上で掲載されているのを複数確認してみましたら全て同じJSでしたので、CSSこそ違えども同じ表示になるでしょう。
なので、各カテゴリーを1ページに何件表示する では無く、このページに有るカテゴリー件数、という事ですね。
問題は、当方のように件数が少なく1ページ(1000件)で収まるなら綺麗に振り分けするのでしょうが、トーフスキーさんのように1ページ1000件で収まらず複数ページに表示される場合、カテゴリーで振り分けられるのはそのページで表示された1000件(掲載日順)なので、カテゴリー名が有っても2ページ目や3ページ目に表示されるような古い日付の記事だと、そのページになるまで(展開されず)リスト表示になるようです。
(例えば「海外発券」は全記事内に39件ありますが、1ページ目には表示されず2ページ目に6件有るので、カテゴリー分けされたページでも2ページ目にリスト表示されます。)

なるほど!こういうのは記事が1000件以上無いと確認できませんでしたので、非常に助かりました!( ;∀;)
有難うございました♪m(__)m
実はカスタマイズ記事とかブログ標準装備とか考えていたのですが…問い合わせが来そうなのでやめときます。。(^^;

カテゴリー別一覧表示をやめて『全記事一覧』の表示に戻し、タイトル一列にしてシンプルな方が良いなら、要望のように変更しますか?
直ぐ変更できますよ?(^-^)
他に、プラグインでは無くHTMLの追記編集でカテゴリ・月別アーカイブ・タグページに、ページの記事一覧リストを表示する方法も有ります。
このブログのCategorys,Archivesで試しておりますのでクリックしてみて下さいね。(ユーザータグは当ブログ、入れて無いので^^;)
2019-07-09-22:18 * aki [ 返信 * 編集 ]

No Subject

追加で申し訳ありません。
ちょっと要望なんですが、タイトルの後ろにカテゴリ名が連結されてますが、これを無しにしたい。
タイトルもできるだけ短くしたいんですヨ。

ex.
この[┣バンコク]という文字列。
”シティポイントホテル到着◆バンコクパタヤ旅行記2019年05月(05)05/13 [┣バンコク]”

あと可能なら、タイトルは1行におさまる最大の文字数で切ってもらうことは可能でしょうか。
2019-07-09-09:06 * トーフスキー [ 返信 * 編集 ]

Re: aki 様へ

カテゴリ別記事一覧、実装してみました。
ちょっと不具合があるようです。

いくつかのカテゴリについては記事が展開されていません。
パット見た限り規則性はなさそうです。

確認いただければ幸いです。
2019-07-09-08:26 * トーフスキー [ 返信 * 編集 ]

aki Re: Super源さん 様へ

こちらこそご無沙汰してしまって。(^^;
流石に先週はバタバタでした。
何せレスポンシブで申請しているテンプレートが全部『ドロワーメニュー』!なので、何処をどう直したらいいやらで頭の中もいっぱいいっぱいでした。
(また、記事にも掲載ミスがありましたし。)

Super源さんはご自身でhtmlもcssもJSも書けますし、プラグイン作ったりもできますから、いっその事自分専用テンプレートも作ってみては如何です?(^o^)丿
2019-07-08-23:01 * aki [ 返信 * 編集 ]

aki Re: トーフスキー 様へ

スミマセン!1ヵ所修正の掲載を失念致しました!
今、急いで追加記事とこの記事に追記致しましたので、大変お手数ですが修正をお願い致します。。
また助けて頂きました。有難うございました!m(__)m
それと鍵コメの件ですが…何となく(私が)介入し過ぎ・図々し過ぎたかなと思ったのです。
もし使ってみて頂けるのであれば有難いですが。。
2019-07-08-22:36 * aki [ 返信 * 編集 ]

No Subject

スマホで私のブログを表示してトップページを適当にスクロールした状態でハンバーガーボタンを押すとメニューが最上部に表示されてしまいスクロールした画面からはアクセスできません。
貴ブログでは問題ないので私が修正するときにミスったかも。
問題の箇所がわかれば嬉しいんですが。
2019-07-08-19:53 * トーフスキー [ 返信 * 編集 ]

akiさん、こんにちは!(^^)/

久しぶりにやってきたところ、テンプレートがまたまた進化を遂げてるようですね。おお!(゚o゚)

私の場合、これは一度最新版に差し替える必要がありそうですね。【><】
ちょっと考えてみます。(@_@)ウーン

しかし、FC2も、ホントいろいろとやってくれますよね。
まぁ、文句を言える立場ではないのでしょうけれど…。(苦笑)
2019-07-08-11:43 * Super源さん [ 返信 * 編集 ]

No Subject

どうもです。

カテゴリ別記事一覧のソースを明日にでも適用してみたいと思ってます。
個人的にはテスターモード全開なんですが、頂いたコメントでは否定的なことも・・・

どうなんでしょう?
2019-07-08-07:35 * トーフスキー [ 返信 * 編集 ]