Top Page › Template › カスタマイズ › サイドメニューの折り畳みカスタマイズ(cookie付き)

サイドメニューの折り畳みカスタマイズ(cookie付き)

2020-09-09 (Wed) 19:00

次のテンプレートに入れようと思っている『サイドメニューの折り畳み』について、当方の既存テンプレートへの導入方法をコメントにて要望を頂きましたので、先にカスタマイズ記事に致します。^^;
当方のテンプレートには既にjQueryが入っているのでcookie.js使って…とも考えたのですが、例えばCDN等で読み込むためにリクエスト数が増えてしまう事を考えたら、初めからcookie対応のJSを探した方が良いと思い、hatena chips 様よりお借り致しました。
サイトのイメージ画像

サイドメニュー折りたたみをjQueryで

サイドメニュー折りたたみスクリプトを導入 で小粋空間さんのスクリプトをお借りしたのですが、jQueryを導入したので、jQueryを利用したスクリプトに変更しました。その結果、リストの開閉がアニメーションで徐々に変化するようにできました。小粋空間さんのスクリプトでもprototype.jsが導入してあるとアニメーションは可能らしいですが、jQuery導入済みでprototype.jsを導入するのはためらわれたので、思い切ってjQureyでの...

詳しいJavaScript(jQuery)は上記を見て頂いて(^^ゞ、こちらでは当方テンプレートでの導入方法を。



1) 先ず、ご利用テンプレートで共通にして頂きたい事。
カスタマイズしたいテンプレートの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)




2) 次に、各テンプレートのメニュー部分HTMLを少し改変します。利用テンプレートの該当箇所を下記ソースに貼り換えて下さい。
(ご利用のテンプレート名をクリックして表示して下さい。)

2カラム

3カラム

2カラム

3カラム




3) 最後にスタイルシート編集枠内最下へ、下記のスタイルを追加して下さい。










後は『更新』ボタンを押して頂ければ完了です。
カスタマイズの際は、不具合が有った時のためにテンプレートの複製を作成しておく事をお勧めします。m(__)m

予め開けておきたいメニューが有る場合は『Read More』をクリックして下さい。


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-->
上記の場合、個別記事ページには展開表示されません。
テンプレート用のエリア変数は下記をご覧下さい。
エリアモード変数

Comments

最高です!!

こんばんは!
こんなに早く記事を書いてくださりありがとうございます。
コメント欄で教えていただいた記事を元に自分でもがんばってみたのですがどうしても動かなかったのでとても助かりました(;∀;人)

導入方法の解説がとても分かりやすく、一発で動かすことができました。
また、プロフィールやいくつかの項目は最初から開いておけたらなあと思っていたので、追記のカスタム方法はまさに知りたかったことでした。

サイドメニューもうちょっと短くしないとなあとおもいつつも色々追加してしまっていたので今回のカスタムはすごくありがたかったです!!!
2020-09-09-20:45  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

こんばんは。無事にカスタマイズが完了したようですね。良かったです。(^-^)

ちょこ様のブログを少し、拝見させて頂きました。
ゲームの事はよく分かりませんが、とても素敵に・楽しく使って頂いているみたいでとても嬉しいです。有難うございます。
ご利用のテンプレートで何かお気付きの点などございましたら、どうぞ気兼ね無くお声掛け下さいませ。

この度は素敵な出会いを有難うございます。
今後とも末永くお付き合い下さいます様、宜しくお願い致します。m(__)m

p.s. メニューのタイトルですが『PLOFILE』→『PROFILE』です。(^^)
2020-09-09-21:26  aki
[ 返信 * 編集 ]

ありがとうございます!!

テンプレート製作者様にそう言っていただけて、とても嬉しいです(*´▽`*)

「こういう表現ができたらいいな」っていうカスタムがHTMLやCSSをいじって実際成功できたときがすごく気持ちよくて、こちらのブログで紹介されてるカスタムや、自分で調べた手法をあれこれ詰め込んでます。
私自身も、お気にいりのブログなので訪問本当にありがとうございます!!

大分長い間ROMしていたんですが、今回勇気を出してコメントしてよかったですw
これからもどうぞよろしくお願いしますね!!

ああああなんか違和感があると思ったら綴り間違えてた・・・
これは恥ずかしい・・・・
早速直しましたご指摘ありがとうございます(´;ω;`)
2020-09-10-01:21  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

あ、見てきました。直ってて良かったです。
出過ぎた真似をしてゴメンナサイね。^^;

それとカスタマイズ記事、読ませて頂きました。
欲しいものを色々付け足していくと、どうしてもデータ量が多くなってしまい表示が遅くなりがちです。
ただ、Googleの指針に固着し過ぎると、折角のブログも楽しくなくなっちゃいます。
上手く折り合いを付けて、末永く楽しく(ココ大事!)運営して下さい。(^-^)
2020-09-10-12:59  aki
[ 返信 * 編集 ]

こんにちは

akiさんこんにちは。
作業お疲れ様です。
とってもスッキリしていて、ますます記事が見やすくなると思います。
さすがですね!
2020-09-11-12:27  そふぃあ
[ 返信 * 編集 ]

aki

Re: そふぃあ 様へ

こんにちは♪コメント有難うございます。(^-^)

テンプレートの申請はまだなんですけどね。記事の方が先になってしまいました。
まぁ、色んなタイプのテンプレートが有っても良いかな~と思いまして、メニューが閉じてるのを作ってみました。が、ニーズが有るかは…分かりません。
自分でJS書けないのでそこらへんは他力本願ですけども。^^;
2020-09-11-15:54  aki
[ 返信 * 編集 ]

ページトップ・ボトムボタンについて

akiさんこんばんは。
どちらに書き込めばいいかわからなかったので、こちらの記事に失礼します<(_ _)>

iPadを縦か横にしてページを見たときに、ページの上に向かってスクロールしたら、ページトップ・ボトムボタンがついてこなくなってしまいました。

下に向かってスクロールしたとき・PCからページを見たとき・iPhone11で見たときは上下どちらにスクロールしてもついてきます。

この現象に気づく前にディスプレイの幅に関わる部分のCSSをいじっていたので、そこが原因かなとは思うのですが、どこが悪さしているのか見当がつきませんでした…

お忙しい中大変申し訳ないのですが、どこを直せばいいか知恵をお借りできないでしょうか…
2020-09-16-21:29  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

こんばんは。
えっと…現象を確認したいのですが再現できません。
元々ボタンは(最初は)表示されず、少しスクロールすると現れる仕様にしてあります。要するに一番最上では非表示です。
ipad, iPhoneSE(どちらもシステムバージョンはiOS13.7)で確認しましたが、キチンと上下にスクロールしますし、最上部以外はボタンも見えています。(勿論、縦・横回転してみましたが、問題点が分かりませんでした。)^^;

HTMLソースを拝見致しましたが、他にもスムーズスクロール用のJSが重複して入っています。
初めから入っているので、そちらを優先して利用したいのであれば、初めから入っているものを削除して下さい。(元のものが上部で消える仕様です。$(function(){var a=$("#pagetop");の書き出しになっています。)

それと、jQuery3.4.1が重複しています。これも無駄ですので、下に有る方を削除して下さい。(headで読み込んでいます。こっちを消すとメニュー開閉が効かなくなります。)

私から見た動作は…現状で正しいように思うのですが、どうでしょう?(・_・;)
出来ましたら詳しいお話を載せて下さいませ。

p.s. 只今共有申請用テンプレートを色々弄っているため、ブログが色々変わる事が有ります。スミマセン。
2020-09-16-23:18  aki
[ 返信 * 編集 ]

Re: aki 様へ

あれ…iPadを再起動してみたら、ボタン正常に動くようになりました;;;;
大変お騒がせしました…何だったんだろう;;;

入れたいと思ったscriptとか、とりあえず書き込んでしまって、不要になった部分の確認をしてなかったのでご指摘とても助かります…!!
jQuery指示通り片方削除しました。

スムーズスクロールのscriptなんですが、
<!-- スムーズスクロール -->
で囲われている方は、記事内にアンカーを付けて、同じ記事内に作成した目次の項目からアンカーまでスクロールするものなんですが、このスクリプト初めから入っているんですか!

申し訳ないです、初めから入ってたほうのscriptがどれかわからないのでお教え願えないでしょうか><
2020-09-17-00:25  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

直ったようで良かったです。(^-^)
スムーズスクロールの件、ページ内アンカーでしたか。失礼しました。
それはテンプレート内に入っていないのでそのままで。m(__)m

何か作業をする前に、テンプレートの複製を作っておくと安心ですよ。
(と言いながら…私の複製は申請済みテンプレートの数倍有りますが。^^;要らないの捨てなきゃ。)
また何か有ったらお声掛け下さい。(^^)
2020-09-17-00:32  aki
[ 返信 * 編集 ]

Re: aki 様へ

スクロールの件了解です!
無駄にお時間いただいてしまいすみませんでした><

テンプレートの複製めんどくさくていつも作るの忘れてしまうんです(;^_^A
致命的なミス犯す前に作業の前に複製作っておく癖付けないといけませんね><

またわからないことあった際はよろしくお願いします!!
2020-09-17-00:42  ちょこ
[ 返信 ]

aki

Re: ちょこ 様へ

はい。
こちらこそ、今後とも宜しくお願い致します。(^-^)
2020-09-17-15:21  aki
[ 返信 * 編集 ]






非公開コメント