テンプレート『al_responsive』『ct_responsive』をご利用頂き、誠に有難うございます。m(__)m01/14 修正及び装飾機能を追加致しましたのでご案内申し上げます。修正は、（ブラウザ最上段に有る）FC2の検索バーをご利用で1カラム表示の際、『al_responsive』のブログタイトルを含むヘッダー部分が下がってしまい、ドロワーメニューのボタン「≡」が隠れて見えなくなってしまう不具合です。隠れてしまうボタンをヘッダー上に表...
akiさん、こんばんは！(^^)/ * by Super源さん
いいえ。お役に立てたらな幸いです。(^^)
なるほど、そうなのですか。
それでは対処のしようががありませんね。(--)(__) ナットク
メニューアーカイブの件、調べてくださり恐縮です。m(__)m
なんと、そのような理由だったのですね。おお！(ﾟoﾟ)
実は、アーカイブの部分は、かなり前に「共有プラグイン追加」からインストールしたもので、何が書いてあるのか中身をきちんと見たことがありませんでした。(^^;
で、改めてどんな内容になっているのか見てみると、ご指摘の class="tree" はどこからも参照されてないことが分かりました。
そこで、 バサッと悪女、じゃなかった削除したところ、無事中身が現われるようになりました。ヽ(^o^)ノ
ありがとうございました。m(__)m
いえいえ。こちらこそ、akiさんに余分なお手間をとらせてしまい、申し訳なかったです。【><】
＞p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、
なるほど。確かにtreeという変数名を避けるというのは賢明な選択かと思います。(^^)
というのは、以前私の方で、何人かの方から、共有プラグインに登録しているブログパーツの表示がちょっと変との報告を受け、調べたところ、その100％近くが、ユーザーの使用しているテンプレートに使われている変数名とのダブりに起因するものだったからです。(^o^;
＞（今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから？それとも諦め？^^;）
(@_@)ウーン どうでしょうね。
確かに、無料で使わせていただいてるわけですから、普通は「まぁ、いいか」と、諦めるかもですね。(^^;
あっ！(ﾟoﾟ)また長くなりそうなので、(^^; 今日はこの辺で。m(__)m
なるほど、そうなのですか。
それでは対処のしようががありませんね。(--)(__) ナットク
メニューアーカイブの件、調べてくださり恐縮です。m(__)m
なんと、そのような理由だったのですね。おお！(ﾟoﾟ)
実は、アーカイブの部分は、かなり前に「共有プラグイン追加」からインストールしたもので、何が書いてあるのか中身をきちんと見たことがありませんでした。(^^;
で、改めてどんな内容になっているのか見てみると、ご指摘の class="tree" はどこからも参照されてないことが分かりました。
そこで、 バサッと悪女、じゃなかった削除したところ、無事中身が現われるようになりました。ヽ(^o^)ノ
ありがとうございました。m(__)m
いえいえ。こちらこそ、akiさんに余分なお手間をとらせてしまい、申し訳なかったです。【><】
＞p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、
なるほど。確かにtreeという変数名を避けるというのは賢明な選択かと思います。(^^)
というのは、以前私の方で、何人かの方から、共有プラグインに登録しているブログパーツの表示がちょっと変との報告を受け、調べたところ、その100％近くが、ユーザーの使用しているテンプレートに使われている変数名とのダブりに起因するものだったからです。(^o^;
＞（今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから？それとも諦め？^^;）
(@_@)ウーン どうでしょうね。
確かに、無料で使わせていただいてるわけですから、普通は「まぁ、いいか」と、諦めるかもですね。(^^;
あっ！(ﾟoﾟ)また長くなりそうなので、(^^; 今日はこの辺で。m(__)m
Super源さん 様へ * by aki
お忙しい中 早速検証頂き、有難うございます。m(__)m
このFC2の検索バーは z-index:1000; で勝手に body 直下に貼られてしまうので、例え方法が有っても私のスキルではどうしようもないです。^^;
なので、ヘッダーが下がってしまうのであればメニューボタンをその上に表示させる方法にしました。
では、メニューボタンの表示は大丈夫みたいですね。良かった。。
自分だけの閲覧環境では分からない事も有りますので、検証して頂けて助かりました。有難うございました。m(__)m
それと、メニュー『アーカイブ』が展開されない理由ですが、HTMLソースを拝見すると
<div class="tree" id="**">
と、テンプレートと重複する class が有るためのようです。
大変申し訳無いのですが、プラグイン『アーカイブ』の class名を tree1 とか tree2 等に変更してみて下さい。
（こちらで確認してみた所、class名を変更しても問題無く表示・展開しました。）
再度、ご確認の程 宜しくお願い致します。m(__)m
p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、先程 後付けながらテンプレートに使用している class="tree" を tree-m という名前に変更・更新致しました。
こちらの件もお教え頂き、有難うございました。
（今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから？それとも諦め？^^;）
このFC2の検索バーは z-index:1000; で勝手に body 直下に貼られてしまうので、例え方法が有っても私のスキルではどうしようもないです。^^;
なので、ヘッダーが下がってしまうのであればメニューボタンをその上に表示させる方法にしました。
では、メニューボタンの表示は大丈夫みたいですね。良かった。。
自分だけの閲覧環境では分からない事も有りますので、検証して頂けて助かりました。有難うございました。m(__)m
それと、メニュー『アーカイブ』が展開されない理由ですが、HTMLソースを拝見すると
<div class="tree" id="**">
と、テンプレートと重複する class が有るためのようです。
大変申し訳無いのですが、プラグイン『アーカイブ』の class名を tree1 とか tree2 等に変更してみて下さい。
（こちらで確認してみた所、class名を変更しても問題無く表示・展開しました。）
再度、ご確認の程 宜しくお願い致します。m(__)m
p.s. tree という class名を付けられる方は他にもきっといらっしゃると思うので、先程 後付けながらテンプレートに使用している class="tree" を tree-m という名前に変更・更新致しました。
こちらの件もお教え頂き、有難うございました。
（今迄DLされた方からのお申し出が無かったのは…たまたま運が良かったから？それとも諦め？^^;）
akiさん、こんにちは！(^^)/ * by Super源さん
おお！(ﾟoﾟ)こんなにあったんですね。(^^;
javascriptの部分は、あの後すぐに発見できましたが…。(^^;
ということで、現在のものをsave後、早速書き換えてみました。(^^)v
ドロワーメニューのボタン、常に最上位に表示されるようになりました。ヽ(^o^)ノ
ヘッダー部分はやはり下がってくるようですが、これは別に実害がないのでokです。
テンプレート修正、どうもお疲れさまでした。m(__)m
大変な作業だったと推測いたします。
また、ご教示ありがとうございました。m(__)m
ところで、この"＝"ボタンをclickするとメニューが現われますが、その中の「アーカイブ」の中を見ると、カラになっているようです。(? ?)アレッ。
以上、今気が付きましたので、ついでながらご報告させていただきました。
javascriptの部分は、あの後すぐに発見できましたが…。(^^;
ということで、現在のものをsave後、早速書き換えてみました。(^^)v
ドロワーメニューのボタン、常に最上位に表示されるようになりました。ヽ(^o^)ノ
ヘッダー部分はやはり下がってくるようですが、これは別に実害がないのでokです。
テンプレート修正、どうもお疲れさまでした。m(__)m
大変な作業だったと推測いたします。
また、ご教示ありがとうございました。m(__)m
ところで、この"＝"ボタンをclickするとメニューが現われますが、その中の「アーカイブ」の中を見ると、カラになっているようです。(? ?)アレッ。
以上、今気が付きましたので、ついでながらご報告させていただきました。
Super源さん 様へ * by aki
一応、今回の更新で変更した箇所を掲載しておきますね（al_responsive2cl）。
長々と書き連ねてしまいますがお付き合い下さいませ。m(__)m
スタイルシート編集枠の上から順に
html{
font-size:80%; /* 75%から80%に変更 */
overflow-x:hidden;
}
h1{
margin:0 30px; /* 0 20pxを0 30pxに変更 */
padding:0;
font-size:1.6em;
color:#fff;
position:static; /* 追加 */
}
ul li{
list-style:circle;
list-style-position:outside ;
margin-left:17px; /* 15pxから17pxに変更 */
}
/* レスポンシブ1000px以下（サイズ共有有り） */
/* ヘッダー部分 */
header{
width:100%;
position:relative;
overflow:hidden;
background:#c0d58c;
height:auto;
margin:0;
/* z-index:6; 削除 */
}
/* メニューボタン */
/* 追加 */
#btn,
#btn1,
#btn2{
display:block;
}
#btn{
overflow:hidden;
/* width:100%; 削除 */
height:30px;
top:0; /* 32pxを0に変更 */
/* z-index:3; 削除 */
position:absolute; /* fixed !importantをabsoluteに変更 */
}
#btn1{
overflow:hidden;
/* position:absolute; 削除 */
width:230px;
height:30px;
top:32px;
z-index:3 !important;
}
/* メニュー */
nav{
position:absolute; /* fixedをabsoluteに変更 */
top:0;
bottom:0;
width:230px;
left:-230px;
/* min-height:100%; 削除 */
height:100vh; /* auto !importantを100vhに変更 */
padding-bottom:50px; /* 15pxを50pxに変更 */
z-index:5;
background-color:#fff;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
/* #menu,#menu2{
margin-top:61px;
} 削除 */
/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
header{
margin-bottom:10px; /* 追加 */
}
/* 1カラム時非表示 */
.introduction{
display:none; /* 追加 */
}
/* レスポンシブ1001px以上で適用 */
@media only screen and (min-width:1001px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
/* メニュー */
nav{
position:static;
float:left;
width:230px;
height:100%; /*追加 */
margin:26px 0 0 15px;
overflow:hidden;
box-sizing:border-box;
}
.tree{
/* padding-top:12px; 削除 */
display:block; /* メニューを開いて表示 */
}
スタイルシートは以上です。あと、ドロワーメニューのscriptが少し変わりましたのでそれも載せておきます。
<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"})}}),$("body,html").css({"overflow":"hidden","height":"100%"})}),$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}}),$("body,html").css({"overflow":"visible","height":"auto"})})});
</script>
宜しければ複製でも作って検証してみて下さい。m(__)m
長々と書き連ねてしまいますがお付き合い下さいませ。m(__)m
スタイルシート編集枠の上から順に
html{
font-size:80%; /* 75%から80%に変更 */
overflow-x:hidden;
}
h1{
margin:0 30px; /* 0 20pxを0 30pxに変更 */
padding:0;
font-size:1.6em;
color:#fff;
position:static; /* 追加 */
}
ul li{
list-style:circle;
list-style-position:outside ;
margin-left:17px; /* 15pxから17pxに変更 */
}
/* レスポンシブ1000px以下（サイズ共有有り） */
/* ヘッダー部分 */
header{
width:100%;
position:relative;
overflow:hidden;
background:#c0d58c;
height:auto;
margin:0;
/* z-index:6; 削除 */
}
/* メニューボタン */
/* 追加 */
#btn,
#btn1,
#btn2{
display:block;
}
#btn{
overflow:hidden;
/* width:100%; 削除 */
height:30px;
top:0; /* 32pxを0に変更 */
/* z-index:3; 削除 */
position:absolute; /* fixed !importantをabsoluteに変更 */
}
#btn1{
overflow:hidden;
/* position:absolute; 削除 */
width:230px;
height:30px;
top:32px;
z-index:3 !important;
}
/* メニュー */
nav{
position:absolute; /* fixedをabsoluteに変更 */
top:0;
bottom:0;
width:230px;
left:-230px;
/* min-height:100%; 削除 */
height:100vh; /* auto !importantを100vhに変更 */
padding-bottom:50px; /* 15pxを50pxに変更 */
z-index:5;
background-color:#fff;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
/* #menu,#menu2{
margin-top:61px;
} 削除 */
/* レスポンシブ1000px以下で適用 */
@media only screen and (max-width:1000px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
header{
margin-bottom:10px; /* 追加 */
}
/* 1カラム時非表示 */
.introduction{
display:none; /* 追加 */
}
/* レスポンシブ1001px以上で適用 */
@media only screen and (min-width:1001px){
/* html{
width:100%;
overflow-y:scroll;
overflow-x:hidden;
} 削除 */
/* メニュー */
nav{
position:static;
float:left;
width:230px;
height:100%; /*追加 */
margin:26px 0 0 15px;
overflow:hidden;
box-sizing:border-box;
}
.tree{
/* padding-top:12px; 削除 */
display:block; /* メニューを開いて表示 */
}
スタイルシートは以上です。あと、ドロワーメニューのscriptが少し変わりましたのでそれも載せておきます。
<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"})}}),$("body,html").css({"overflow":"hidden","height":"100%"})}),$("#nav_close,#nav_wrap").click(function(){$("nav").animate({"top":"0","left":"-230px"},{duration:200,complete:function(){$("#nav_wrap").css("display","none")}}),$("body,html").css({"overflow":"visible","height":"auto"})})});
</script>
宜しければ複製でも作って検証してみて下さい。m(__)m
akiさん、こんばんは！(^^)/ * by Super源さん
件の機能、修正版で早速対応してくださり、感謝です。(T^T) ウルウル←ウレシナキ デス
もう私は、akiさんに一生ついていきますよ、(--)(__) ホント ホント。
おお！(ﾟoﾟ)そうわれてみれば、今まであまり気にしてませんでしたが、表示後ヘッダーが少し下がってきますね。
私のところは検索バーは使っていない2カラムですが、TOP、カテゴリ、記事ページなど、全てのページにおいて下がってくるようです。
あとで新テンプレートをDLしてチェックしてみますが、もしよろしければ、どの辺を見ればよいのかお教えくださるとうれしいです。
何せ、当方カスタマイズしているため、新規の入れ替えができないので。(^^;
それでは、またお邪魔します。(@^^)/~~~
もう私は、akiさんに一生ついていきますよ、(--)(__) ホント ホント。
おお！(ﾟoﾟ)そうわれてみれば、今まであまり気にしてませんでしたが、表示後ヘッダーが少し下がってきますね。
私のところは検索バーは使っていない2カラムですが、TOP、カテゴリ、記事ページなど、全てのページにおいて下がってくるようです。
あとで新テンプレートをDLしてチェックしてみますが、もしよろしければ、どの辺を見ればよいのかお教えくださるとうれしいです。
何せ、当方カスタマイズしているため、新規の入れ替えができないので。(^^;
それでは、またお邪魔します。(@^^)/~~~
人が付けやすい名前って、やっぱり有りますよね。そして、避けた方が良さそうです。^^;
ただ、全然関係無い名前だと後で分からなくなってしまう気がして…で、結局末尾に数字やアルファベット付けてるだけ。安易過ぎますが…(;´∀｀)
自分以外に利用してもらうものは気を付けないと、ですね。
また何かお気付きの点が有りましたらお教え下さいませ。m(__)m
今後とも宜しくお願い致します♪