Top Page › Template › カスタマイズ › home_resp のカスタマイズ(メニューの開閉)

home_resp のカスタマイズ(メニューの開閉)

2020-10-15 (Thu) 01:30

前記事から引き続き、テンプレート home_resp 2c,3c のカスタマイズです。
折り畳んであるメニューを初期値で開いておく、折り畳みメニューの一部を開いておく、というカスタマイズです。
注目メニューを開いておきたい方にお勧めです。

テンプレート home_resp 2c,3c の折り畳みメニューに、hatena chips 様の cookie付きスクリプトを導入する事の承諾も得ていたのですが、不要な方も居られると思うので、好みをお任せしてカスタマイズ(↓4番のもの)という形にさせて頂きました。m(__)m


1) 折り畳んである全メニューを初期値で開いておく。
2) 折り畳みメニューの一部を開いておく。
3) 初期値で開いたメニューの一部を閉じておく。
4) 開いたメニューを記憶させたい。(cookie対応)





1) 折り畳んであるメニューを初期値で開いておく。
折り畳まれていない状態のメニューです。ただ、メニュータイトルクリックで折り畳めます。^^; 今まで通りが良い方、メニューが少ない方はこちらをどうぞ。
全て閉じても、ページの移動・ブラウザのリロードで展開状態に戻ります。
home_resp2cl-menuopen
↑クリックで見本表示

テンプレートの管理画面下段の [ home_resp〇c ] のスタイルシート編集枠内
スクロールすると1/4位に下記のような箇所が有ります。
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .menu-box を入れて下さい。するとスタイルシート内に1ヵ所見つかます。)
.menu-box{
padding:10px 17px 35px;
overflow:hidden;
display:none;
}
このdisplay値を下記のように変更して下さい。
.menu-box{
padding:10px 17px 35px;
overflow:hidden;
display:block;
}

後は【更新ボタン】を押して適用させて下さい。





2) 折り畳みメニューの一部を開いておく。
畳んであるメニューの一部を、予め開いておくカスタマイズです。
チェックして欲しい・目に留めて欲しいメニューを、初めから開いておく事が出来ます。
home_resp3c-openmenu
↑クリックで見本表示

先ずは、開いておきたいメニューの固有番号を探します。
FC2ブログのテンプレートに加えたプラグインには、それぞれ固有のナンバーが振られています。(多分、プラグインをダウンロードした時の番号だと思います。)
それを調べるには、ご自身のブログを表示した状態でHTMLのソースを表示する事で簡単に分かります。
ご自身のブログを表示し、画面の上で右クリック「ページのソースを表示(V)」をクリックします。
そしてHTMLソースを表示した状態で文字検索窓を開き、下記の文字列を探します。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。)
div class="menu-box
↑この文字列で検索するとメニューの分だけ複数か所見付かるので、その上の行のメニュータイトルを見て、開けておきたいメニューを探して下さい。
メニューの位置が分かったら、その div class="menu-box に続く 『m+数字』 を確認します。(m12345のような形です。数字や桁数はマチマチです。)
この数字がメニューの固有番号なので、これを使って表示する状態を変える事が出来ます。
(数字のままではidやclassを付けた操作が出来ないので、頭に『m』が付くようにしています。)

テンプレートのHTML編集枠内最下位置に
</body>
と有るので、その上に開いておきたいメニュー番号のスクリプトを追記して下さい。
こんな形になります。↓(mの前に有るドット( . )を忘れずに付けて下さい)
<script>
$("
.m数字").css("display", "inherit");
</script>

</body>
</html>

複数ある場合は、下記のようにカンマ( , )でそれぞれを区切って下さい。
<script>
$("
.m数字,.m数字,.m数字").css("display", "inherit");
</script>

また、スクリプトをエリア変数で括る事で、表示エリアを限定する事も出来ます。
<!--not_permanent_area-->
<script>
$(".m数字").css("display", "inherit");
</script>
<!--/not_permanent_area-->
この場合、個別記事ページには展開表示されません。
テンプレート用のエリア変数は下記をご覧下さい。
エリアモード変数


上記だと1カラム表示の際にもメニューが展開されて表示されますので、1カラム時に全部閉じて表示したい場合は下記のように matchMedia を使って制御します。(上のスクリプトを下記に変更してご利用下さい。)

<script>
var mediaQuery = matchMedia("(min-width: 760px)");
handle(mediaQuery);
mediaQuery.addListener(handle);

function handle(a) {
if (a.matches) {
$(".m数字").css("display", "inherit")
} else {
$(".menu-box").css("display", "none")
}
};
</script>

青文字の部分min-width: 760pxが1カラムになる幅の最小値で、760px以上は開いていて、未満になると(展開指定しているメニューも全て)閉じます。
圧縮したものは下記になります。(改行されているように見えますが、繋がっているので途中で切らないようにコピペして下さい。)お好きな方をご利用下さいませ。
<script>
var mediaQuery=matchMedia("(min-width: 760px)");handle(mediaQuery);mediaQuery.addListener(handle);function handle(a){if(a.matches){$(".m数字").css("display","inherit")}else{$(".menu-box").css("display","none")}};
</script>

ご利用の際は、オレンジ文字部分をご自身のメニュー番号に変更し、HTML編集枠内下段 </body> の上に記述します。

後は【更新ボタン】を押して適用させて下さい。





3) 初期値で開いたメニューの一部を閉じておく。
1番の「折り畳んである全メニューを初期値で開いておく。」を行った後に、2番に書いてある方法で閉じておきたいメニューの固有番号を調べておきます。
HTML編集枠内下段に、閉じておきたいメニューの番号を入れたスクリプトを </body> の上に記述して下さい。
<script>
$(".m数字").css("display", "none");
</script>

display値 を "none" にする事によって畳んで表示する事が出来ます。

後は【更新ボタン】を押して適用させて下さい。
長くなってしまった『月別アーカイブ』等にどうぞ。





4) 開いたメニューを記憶させたい。(cookie対応)
このカスタマイズは、別のJS(jQuery)を使用します。方法を掲載したページが有りますので、そちらをご覧下さい。
[ サイドメニューの折り畳みカスタマイズ(cookie付き) ]

カスタマイズの際、記事内に有る『削除するJavaScript ( var flaged=null; )』の部分は、下記のJSに読み替えて下さい。
(文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入力。)
$(function(){$(".js-menu-title")
↑この文字列で検索すると1か所見付かるので、その文字を含む<script>から</script>までを削除します。
<script>
$(function(){$(".js-menu-title")~~~省略~~~.slideToggle(300)})});
</script>
↑この部分を削除。
後は掲載ページ通りにカスタマイズをお願い致します。
(2020/10/14 記事の内容に home_resp 用を追記致しました。)


Comments

home_resp 3c

お待ちしていました。
早速テンプレート home_resp 3cを拝借し「エントリー全文表示」としました。
現在「メニューの開閉」で、1) 折り畳んである全メニューを初期値で開いておく。....にしようと工作しています。そこで質問です。

説明では
(文字で検索する場合は『Ctrl+Fキー』を押して、表示された小窓に .menu-box を入れて下さい。すると2ヵ所見つかり、2/2番目です。)

とのことですが、1ヵ所しか見つかりません....1ヵ所ではないでしょうか??

もう一つ質問
私の所では、右帯と左帯が、左右逆になってしまうのですが...
これは、先の質問の「1ヵ所しか見つからない」事に関係しているのでは??

追伸
試みに「home_resp2c-l」をDLLして見ましたが、 .menu-box の記述は1ヵ所です。
2020-10-15-10:16  呑兵衛あな
[ 返信 * 編集 ]

aki

Re: 呑兵衛あな 様へ

呑兵衛あな 様、こんにちは。
早速のダウンロード、誠に有難うございます。m(__)m

ご質問の件です。
「2ヶ所見付かり、2/2番目です。」は、ページ内を文字検索した場合にHTML編集枠内も含めて検索されるので、HTML編集枠内に1つ・スタイルシート内に1つ、という意味で2/2と書きました。
確かにこれでは混乱してしまうと思いますので、先程「スタイルシート内に」という文言に修正致しました。
ご指摘頂き感謝致します。m(__)m

「左右のカラム位置が逆」についてです。
この度のテンプレートでは左右のカラムを今迄の「左カラム=プラグイン1、右カラム=プラグイン2」を逆にして制作致しました。

右から読む文化も有れば左から読む文化も有ります。
見掛けが異なる事によって、違和感を感じる方もいらっしゃいます。
テンプレートのデザイン的に『右カラム』が突出しているので、この度は右カラムをプラグイン1に致しました。(類似のデザイン genial_resp は右=プラグイン2になっています。)
プラグインの表示位置を、プラグイン管理ページでカテゴリ1⇔2へと変更して頂けばお好みになるかと思います。
メニューが沢山有り移動が大変な場合は、左右カラムのメニュー位置の変更をHTMLの編集画面でカスタマイズ出来ますのでお試し下さい。

編集画面でCtrl+Fキーを押し『▼右メニュー ここから』で検索すると1ヵ所見付かります。
そこから更に下へ見ていくと『▲左メニュー ここまで』という部分が有りますので、下記のソースに貼り換えて下さい。

<!-- ============ ▼右メニュー ここから ============ -->
<!--プラグイン2-->
<!--plugin-->
<!--plugin_second-->
<section class="menu_block">
<h3 class="menu_title js-menu-title" style="text-align:<%plugin_second_talign>;"><%plugin_second_title></h3>
<div class="menu-box m<%plugin_second_no>">
<div style="text-align:<%plugin_second_ialign>"><%plugin_second_description></div>
<%plugin_second_content>
<div style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></div>
</div></section>
<!--/plugin_second-->
<!--/plugin-->
<!--/プラグイン2-->
<!-- ============ ▲右メニュー ここまで ============ -->
</div>
<div id="left-box">
<!-- ============ ▼左メニュー ここから ============ -->
<!--プラグイン1-->
<!--plugin-->
<!--plugin_first-->
<section class="menu_block">
<h3 class="menu_title js-menu-title" style="text-align:<%plugin_first_talign>;"><%plugin_first_title></h3>
<div class="menu-box m<%plugin_first_no>">
<div style="text-align:<%plugin_first_ialign>"><%plugin_first_description></div>
<%plugin_first_content>
<div style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></div>
</div></section>
<!--/plugin_first-->
<!--/plugin-->
<!--/プラグイン1-->
<!-- ============ ▲左メニュー ここまで ============ -->

これで左右が逆になります。
…頂いた質問はとても有益ですね。同様にお感じになる方も居るかもしれません。
折を見て、カスタマイズ記事として掲載させて頂きたいと思います。
お気付き頂き有難うございました。m(__)m
2020-10-15-12:15  aki
[ 返信 * 編集 ]

No Subject

2点とも理解しました。ありがとうございます。
2020-10-15-13:10  呑兵衛あな
[ 返信 ]

aki

Re: 呑兵衛あな 様へ

ご理解頂き有難うございます。(^^)
また何かお気付きの点がございましたらお教え下さいませ。

p.s. ブログ、いつも為になる記事ですね。私の分からない、理解が行き届かない事ばかりです。
勉強させて頂きました。m(__)m
2020-10-15-14:27  aki
[ 返信 * 編集 ]






非公開コメント