拙テンプレート向け「月別アーカイブ」パーツの改良版

月別アーカイブ改

サイドバーの「月別アーカイブ」パーツの改良決定版

さて、サイドバーの「月別アーカイブ」については、拙テンプレートをご利用の方向けに、以前に、拙テンプレート向けのサイドバー「月別アーカイブ」パーツのカスタマイズを、ご紹介したところです。
今回は、拙テンプレートの利用者様からのご要望をいただいたこともあり、また以前から、気になっていたこともあって、さらに改良し、年別の合計数が入るものを作ってみました。
今回も、共有プラグインで配布されている「シンプルアーカイブ」のjsをお借りし、大幅に改変するという形になりました。
製作者の45degrees様のブログは、すでに存在せず、今は管理をされていない模様です。
また、
  • 配布開始から、10年以上経過していることや、
  • 共有プラグインとして公開されているということ、
  • 当方は、収益とは無関係なこと
から、改変再配布をさせていただくこととしました。
45degrees様、もうFC2は、見ておられないかもしれませんが、基本となるコードを作っておいてくださって、ありがとうございます。

仕様

「年別の合計数がついている」という以外は、ほぼ、前回と同じような形になるようにしました。
  • また、もともと配布されていた「シンプルアーカイブ」の方式であるaのオンクリックでの開閉をやめ、spanにしたため、よくないと言われている「ダミーhref」も、使わないようにしました。
  • スマホでの使い勝手を考え、上下の間隔を少し増やしました。

見本

テストブログでやってみた状態です。
月別アーカイブ改見本

「シンプルアーカイブ改」の特徴

特徴は
  • 最新の年の各月は、最初から開いており、そして「シンプルアーカイブ改」では、閉じない。
  • 前の年以前のぶんは、クリックで開閉する。
  • ホバーした際に、年タブをカーソルオンに指定。
  • 三角アイコンには、拙テンプレートに導入しているGoogle Material Iconsを使用し、クリックで「下向きの空洞三角」に変化する。

拙テンプレートに限って対応

また、ここで紹介する方法は、基本的には、拙テンプレートに限ったもので、それは、
  • 拙テンプレートで導入しているアイコンフォント(Google Material Icons)を使用していることと、
  • jQueryのライブラリを、プラグインよりも上のほうでもともと読み込んでいるということ
  • サイドバーの上位セレクタ名が一致していること。
が、前提だからです。

導入手順

手順は、大まかに言えば、3ステップです。
  • 月別アーカイブの中身を貼り換える。
  • テンプレートのHTMLにコード(js)を追加する。
  • CSS(スタイル編集)にコードを追加する。
具体的な方法は、以下です。
  1. プラグインの管理を開き、月別アーカイブの「詳細」をクリックし、プラグインのタイトルをお好みの名前に変更する(そのままでいいならそのままで)。
  2. 次に、プラグインの【HTMLの編集】から、「コードの中身」を開き、貼ってあるものを全部消去する。残さず、全部。
  3. 全部消したら、中身に以下を貼り付ける。文字列をそろえたりする必要はなく、とにかく貼ればよい。
    <div id="simple_archive"><ul><!--archive--><li &align><a href="<%archive_link>" title="<%archive_year>年<%archive_month>月(<%archive_count>)"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li><!--/archive--></ul></div>
    プラグインの貼り換え
  4. 「設定」を押す。
  5. 次に、「テンプレートの設定」から、編集画面を開く。
  6. HTMLの一番下まで行き、</body>の直前に、以下のコードを貼り付ける。文字列をそろえたりする必要はなく、とにかく貼ればよい。
    月別アーカイブ改テンプレート
  7. 次に、下の「スタイル編集」へ行き、一番下でいいので、以下を貼り付ける。
    /*----月別アーカイブ折り畳み用----*/
    .simple_z{margin:0 0 3px;font-weight:bold;}
    .simple_z:not(#simple_archive_y0){cursor:pointer;}
    .simple_z:before{content:"\e037";font-family:'Material Icons';vertical-align:middle;}
    .simple_z.close:before{content:"\e3c8";font-family:'Material Icons';vertical-align:middle;}
    .simple_x{margin:0 0 3px 15px;}
    .simple_x:not(#simple_archive_m0){display:none;}  
    .simple_a:before{content:"├";margin:0 5px 0 0;}
    .simple_m{display:block;margin:0 0 3px;}
    .simple_m:last-of-type>a:before{content:"└";}
    .plugin_right_content #simple_archive_inner .simple_z,.plugin_right_content #simple_archive_inner .simple_x{text-align:left !important;} 
    
  8. 「更新」ボタンを押す。
  9. ブログを開き、クリックをしてみて、動作を確認し、ちゃんとできていたら、作業は終了(最新の年のぶんは、クリックしても閉じません)。

前回分を使用中の方は、貼り換えで

以前の「Tree-Archive改」を使用中の方で、今回のほうに変えたい方は、コードの貼り換えをお願いします。
関連記事

コメント

コメント(14)
おはようございます
ありがとうございます。
無事に出来ました。これで記事数の把握もしやすくなりました。
お手間をとらせて本当にありがとうございました。
ちなみに図鑑記事はウソ・冗談ですよ。(笑)

柴犬マイア

2020/01/19 07:45 URL 編集返信
導入しました。
こんにちは。
ワシにも出来ました。
ありがとうございます♪

半漁人

2020/01/19 10:40 URL 編集返信
Janedoe1471
To 柴犬マイアさん
拝見しました。できていますね。
件数の把握が容易になって、よかったと思います。
なんだ、図鑑は冗談だったんですか^^

Janedoe1471

2020/01/19 15:18 URL 編集返信
Janedoe1471
To 半漁人さん
拝見しました。
過去記事の件数がはっきりわかるようになったので、閲覧者さんの参考にもなると思います^^

Janedoe1471

2020/01/19 15:20 URL 編集返信
管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます

-

2020/01/27 08:47 編集返信
Janedoe1471
To -さん
そうですか、削除する部分は、そのひとつ上のscriptです。
↓の緑の部分を貼り換えるというのが、当初の目的だったのですが。
https://janedoe1471.blog.fc2.com/blog-entry-208.html

新しいほうのscriptは、再度貼っておけば、問題はありません。

Janedoe1471

2020/01/27 13:43 URL 編集返信
Janedoe1471
To -さん
ただいま確認して、原因がわかりました。
以前のscriptの削除は、できているのですが、新しいscriptを貼るときに、先頭に
<script>
というタグがなければならないのが、それがありません。
scriptコードというのは、scriptの「開始タグ」と「閉じタグ」の2つで必ず囲んでおかねばならないというものです。
ですので、コードの先頭に<script>を足してください。
functionの直前です。

Janedoe1471

2020/01/27 14:46 URL 編集返信
ありがとうございます。
直りました。
本当に世話が焼ける還暦前のオッチャンで申し訳ありません。
トホホホ・・・。

柴犬マイア

2020/01/27 16:24 URL 編集返信
Janedoe1471
To 柴犬マイアさん
ただいま確認いたしました。直っていますね。
こういうことは、よくあるので、そしてすぐに直せるものなので、特に深刻な事故というわけではありません^^
私も、老眼に苦しんでいるおばさんですので、若くはないもので、どっちかといえば、仲間という感じですので、ご心配なく^^

Janedoe1471

2020/01/27 17:32 URL 編集返信
遅ればせながら
いつもお世話になります。
遅ればせながら、このカスタマイズを『貼り換え』という形でやってみたのですが、そのあとトップページに表示される拍手の位置が下のほうへずれてしまいました。スタイルシートは月別アーカイブのコードの下に拍手のコードが入っているのですが、なにか影響したのでしょうか…?
お忙しいところ申しわけございませんが、調べていただけるとありがたいです。どうぞよろしくお願いいたします。

さきた☆たまき

2020/02/17 19:56 URL 編集返信
Janedoe1471
To さきた☆たまきさん
そうですか、それでは、調べてみますので、しばらくお待ちください。

Janedoe1471

2020/02/17 21:02 URL 編集返信
Janedoe1471
To さきた☆たまきさん
お待たせしました。
調べましたところ、月別アーカイブ用のコードを、CSSに貼ったときに、余計な「/」が、末尾についてしまったようです。
以下の画像のような感じです。

https://blog-imgs-134.fc2.com/j/a/n/janedoe1471/bit.png

このスラッシュを消してみて、トップページの表示が正常に戻るかどうかを、確認してみてください。
もしも直らなかったら、またお知らせください。

Janedoe1471

2020/02/17 22:00 URL 編集返信
直りました!
おはようございます。
今朝PCを開けた際修正をしましたら、無事『拍手』の位置がもとにもどりました。たぶん、前のコードが削除しきれず残ってしまったものと思います。
いつもお手間をかけ恐れ入ります…。ありがとうございました。

さきた☆たまき

2020/02/18 09:35 URL 編集返信
Janedoe1471
To さきた☆たまきさん
ただいま拝見しました。直っていますので、よかったです^^

Janedoe1471

2020/02/18 14:59 URL 編集返信
コメント投稿
【お願い】FC2ブログの方は、必ず、ご自分のブログURLを入力してください。
非公開コメント

プロフィール

Janedoe1471

Author:Janedoe1471 この写真とはまったく違うおばさんです。
が、気持ちだけは、いつまでも、こういう感じでいたいと思っています。

更新通知登録ボタン

更新通知で新しい記事をいち早くお届けします

検索フォーム