次のテンプレートに入れようと思っている『サイドメニューの折り畳み』について、当方の既存テンプレートへの導入方法をコメントにて要望を頂きましたので、先にカスタマイズ記事に致します。^^;
当方のテンプレートには既にjQueryが入っているのでcookie.js使って…とも考えたのですが、例えばCDN等で読み込むためにリクエスト数が増えてしまう事を考えたら、初めからcookie対応のJSを探した方が良いと思い、
hatena chips 様よりお借り致しました。
サイドメニュー折りたたみをjQueryで
サイドメニュー折りたたみスクリプトを導入 で小粋空間さんのスクリプトをお借りしたのですが、jQueryを導入したので、jQueryを利用したスクリプトに変更しました。その結果、リストの開閉がアニメーションで徐々に変化するようにできました。小粋空間さんのスクリプトでもprototype.jsが導入してあるとアニメーションは可能らしいですが、jQuery導入済みでprototype.jsを導入するのはためらわれたので、思い切ってjQureyでの...
詳しいJavaScript(jQuery)は上記を見て頂いて(^^ゞ、こちらでは当方テンプレートでの導入方法を。
１） 先ず、ご利用テンプレートで共通にして頂きたい事。
カスタマイズしたいテンプレートのHTML編集画面を開き、編集枠の中から文字列を探します。
（文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。）
jquery.min.js
↑この文字列で検索すると1か所見付かるので、その文字を含む行
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
を切り取って、同じくHTML編集枠内上部に有る
</head>
の上に貼り付けます。
そしてこのjquery.min.jsの下に、下記のJS（jQuery)をコピーして貼り付けます。
<script>
function WriteCookie(a,c,e){var d=a+"="+escape(c)+";";if(e!=0){var b=new Date();b.setDate(b.getDate()+e);d+="expires="+b.toGMTString()+";"}document.cookie=d}function ReadCookie(e){var f=document.cookie;var b=f.split(";");var a=new RegExp(" ","g");e=e.replace(a,"");var d=0;while(b[d]){var c=b[d].split("=");c[0]=c[0].replace(a,"");if(e==c[0]){return unescape(c[1])}if(++d>=b.length){break}}return""}function DeleteCookie(a){var b=new Date();var c=a+"=;expires="+b.toGMTString();document.cookie=c}var days=30;function FoldList(a){if((ReadCookie("SlideDown")+"|").indexOf("|"+a+"|")==-1){$("#title"+a).next().hide()}$("#title"+a).click(function(){$(this).next().slideToggle("normal",function(){if($(this).is(":hidden")){var b=(ReadCookie("SlideDown")+"|").replace("|"+a+"|","|");b=b.replace(/\|$/,"");if((b=="")||(b==undefined)||(b=="|")){DeleteCookie("SlideDown")}else{WriteCookie("SlideDown",b,days)}}else{WriteCookie("SlideDown",ReadCookie("SlideDown")+"|"+a,days)}})})};
</script>
するとこんな形になると思います。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
～～サイドメニュー折り畳みJS、省略～～
</script>
</head>
次に、サイドメニューの表示方法変更のため、それまでのJavaScriptが不要になり、不要部分の文字列を探してスクリプトを削除します。
（文字検索は、キーボードの「ctrlキー」と「Fキー」を一緒に押して表示された窓に下記を入れて下さい。）
var flaged=null;
↑この文字列で検索すると1か所見付かるので、その文字を含む<script>から</script>までを削除します。
<script>
var flaged=null;～～～省略～～～flaged=e)}
</script>
この部分を削除。
ここまでが各テンプレート共通です。
（敢えてJSを外部リンクにしなかったのは、リクエスト数を減らすためと、リンク先に不具合が有った時でも表示できるようにしたかったため、直書きにさせて頂きました。m(__)m）２） 次に、各テンプレートのメニュー部分HTMLを少し改変します。利用テンプレートの該当箇所を下記ソースに貼り換えて下さい。
（ご利用のテンプレート名をクリックして表示して下さい。）
２カラム
ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に
↓を入れて検索します。
<!--プラグイン１-->
見付けた所から 更に下の方の
<!--/プラグイン２-->
までを下記ソースに貼り換えます。
<!--プラグイン１-->
<!--plugin-->
<!--plugin_first-->
<section class="menu_block">
<h3 class="menu_title" id="title<%plugin_first_no>" style="text-align:<%plugin_first_talign>;"><%plugin_first_title></h3>
<div class="menu-box m<%plugin_first_no>">
<script>FoldList("<%plugin_first_no>");</script>
<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-->
<!--/プラグイン１-->
<!--プラグイン２-->
<!--plugin-->
<!--plugin_second-->
<section class="menu_block">
<h3 class="menu_title" id="title<%plugin_second_no>" style="text-align:<%plugin_second_talign>;"><%plugin_second_title></h3>
<div class="menu-box m<%plugin_second_no>">
<script>FoldList("<%plugin_second_no>");</script>
<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-->
<!--/プラグイン２-->
次に ３） の作業へ。
３カラム
ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に
↓を入れて検索します。
<!--プラグイン１-->
見付けた所から 更に下の方の
<!--/プラグイン２-->
までを下記ソースに貼り換えます。
<!--プラグイン１-->
<!--plugin-->
<!--plugin_first-->
<section class="menu_block">
<h3 class="menu_title" id="title<%plugin_first_no>" style="text-align:<%plugin_first_talign>;"><%plugin_first_title></h3>
<div class="menu-box m<%plugin_first_no>">
<script>FoldList("<%plugin_first_no>");</script>
<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-->
<!--/プラグイン１-->
<!-- ============ ▲右メニュー ここまで ============ -->
</div>
<div id="right-box">
<!-- ============ ▼左メニュー ここから ============ -->
<!--プラグイン２-->
<!--plugin-->
<!--plugin_second-->
<section class="menu_block">
<h3 class="menu_title" id="title<%plugin_second_no>" style="text-align:<%plugin_second_talign>;"><%plugin_second_title></h3>
<div class="menu-box m<%plugin_second_no>">
<script>FoldList("<%plugin_second_no>");</script>
<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-->
<!--/プラグイン２-->
次に ３） の作業へ。
２カラム
ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に
↓を入れて検索します。
<!--プラグイン１-->
見付けた所から 更に下の方の
<!--/プラグイン２-->
までを下記ソースに貼り換えます。
<!--プラグイン１-->
<!--plugin-->
<!--plugin_first-->
<section class="menu_block">
<div class="menu_title" id="title<%plugin_first_no>" style="text-align:<%plugin_first_talign>;"><%plugin_first_title></div>
<div class="menu-box m<%plugin_first_no>">
<script>FoldList("<%plugin_first_no>");</script>
<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-->
<!--/プラグイン１-->
<!--プラグイン２-->
<!--plugin-->
<!--plugin_second-->
<section class="menu_block">
<div class="menu_title" id="title<%plugin_second_no>" style="text-align:<%plugin_second_talign>;"><%plugin_second_title></div>
<div class="menu-box m<%plugin_second_no>">
<script>FoldList("<%plugin_second_no>");</script>
<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-->
<!--/プラグイン２-->
次に ３） の作業へ。
３カラム
ご利用のテンプレートHTML編集枠内に有る下記の部分を探して下さい。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に
↓を入れて検索します。
<!--プラグイン１-->
見付けた所から 更に下の方の
<!--/プラグイン１-->
までを下記ソースに貼り換えます。
<!--プラグイン１-->
<!--plugin-->
<!--plugin_first-->
<section class="menu_block">
<div class="menu_title" id="title<%plugin_first_no>" style="text-align:<%plugin_first_talign>;"><%plugin_first_title></div>
<div class="menu-box m<%plugin_first_no>">
<script>FoldList("<%plugin_first_no>");</script>
<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-->
<!--/プラグイン１-->
こちらの3カラムデザインは、モバイル表示時にメニューが左右に分かれるタイプなので、更にもう１ヶ所下記部分を探します。
検索方法：PCのキーボードで『Ctrl＋Fキー』を押して開いた窓に
↓を入れて検索します。
<!--プラグイン２-->
見付けた所から 更に下の方の
<!--/プラグイン２-->
までを下記ソースに貼り換えます。
<!--プラグイン２-->
<!--plugin-->
<!--plugin_second-->
<section class="menu_block">
<div class="menu_title" id="title<%plugin_second_no>" style="text-align:<%plugin_second_talign>;"><%plugin_second_title></div>
<div class="menu-box m<%plugin_second_no>">
<script>FoldList("<%plugin_second_no>");</script>
<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-->
<!--/プラグイン２-->
次に ３） の作業へ。
３） 最後にスタイルシート編集枠内最下へ、下記のスタイルを追加して下さい。
@media only screen and (min-width: 750px) {
.menu_title {
cursor:pointer;
}}@media only screen and (min-width: 760px) {
.menu_block {
padding-top:12px;
}
.menu_title {
cursor:pointer;
}}@media only screen and (min-width: 770px) {
.menu_block {
padding-top:12px;
}
.menu_title {
cursor:pointer;
}}@media only screen and (min-width: 750px) {
.menu_title {
cursor:pointer;
}}@media only screen and (max-width:1000px) {
body::-webkit-scrollbar{
display:none;
}
body{
-ms-overflow-style:none;
}}
#menu, #menu2{
margin-bottom: 0px;
}
.menu-box {
padding: 10px;
}
@media only screen and (min-width: 1001px) {
nav, aside {
padding-bottom:0;
}
.menu_block {
margin: 0;
padding-bottom: 10px;
}
.menu_title {
cursor:pointer;
}}@media only screen and (min-width: 770px) {
.menu_title {
cursor:pointer;
}}@media only screen and (min-width:770px) {
.menu_title {
margin-top:7px;
padding-bottom:3px;
cursor:pointer;
}}@media only screen and (min-width: 1001px) {
.menu_block {
margin-bottom: 10px;
padding-bottom: 0px;
background: rgba(255,255,255,.7);
}
.menu_title {
cursor: pointer;
}}
.menu-box {
padding: 10px;
}@media only screen and (min-width: 1121px) {
.menu_block {
margin-bottom: 10px;
padding-bottom: 0px;
background: rgba(255,255,255,.7);
}
.menu_title {
cursor: pointer;
}}
.menu-box {
padding: 10px;
}後は『更新』ボタンを押して頂ければ完了です。
カスタマイズの際は、不具合が有った時のためにテンプレートの複製を作成しておく事をお勧めします。m(__)m
予め開けておきたいメニューが有る場合は『Read More』をクリックして下さい。
『 Read More 』
