*Essence

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

Top Page › その他 › GW中のお返事、ちょっと遅くなります。m(__)m
2019-04-28 (Sun)  14:17

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

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

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

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

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


スポンサーサイト

最終更新日 : 2019-05-03

ねこ 様へ * 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による方法等他に思いつくものも試してはみましたが、やはりこちらもうまくいかず。
もしなにかご存知でしたらご教授いただきたく思います。

Comment




ご質問の際は確認用にURLをお願い致します。




管理者にだけ表示を許可

ねこ 様へ

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

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

No Subject

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

ねこ 様へ

ねこ 様へ
お返事頂き有難うございます。
当方の手持ち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
2019-05-06-22:34 * aki [ 編集 ]

No Subject

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

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

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

ねこ 様へ

お返事が遅くなりまして申し訳ございません。

使えそうな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%;
}

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

No Subject

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

ねこ 様へ

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

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

もう少し方法を探してみますので、暫くお待ち頂けますか?
2019-05-03-00:28 * aki [ 編集 ]

No Subject

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

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

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