月間アーカイブを「折りたたみ」と「横並び」にカスタマイズ

月間アーカイブを「折りたたみ」と「横並び」にカスタマイズ

カスタマイズ HTML, CSS, JavaScript
2021/10/23
11
vanillaice (Akira)
vanillaice (Akira)
FC2プラグイン

月間アーカイブの高さが大きすぎてお困りの方が多いようなので2つご提案しようと思います。

はじめに

ブログを長く続ければ続けるほどリストが縦に伸びるので困る、という事情ですよね (∵`)
公式プラグインの「月間アーカイブ」は1つの月で1行取りますので、毎月更新していてブログを3年続ければ行数は36行、GoogleのLighthouseを意識した行間指定(またはリンク間の距離)でざっと計算すると約1200pxもの高さです。

見た目の操作としては

  • 折りたたんで高さの消費を抑える
  • なるべく横に並べて高さの消費を抑える

この2つかな、と思います。あるいは「カレンダー」を利用するという方針転換もありますね。ただカレンダーの場合はリスト形式ではないので全体像の把握はできません。

共有プラグインを検索するといくつか良さそうなものが見つかる可能性があります。その際には document.write() メソッドを利用していないものを選ぶ ことが重要です。このメソッドは現在既に 利用非推奨 となっており、将来的にブラウザはこのメソッドを実行しなくなるそうです。実際、既にChromeでは特定の状況下では実行していません。

FC2ブログの「テンプレート」のDLページでは、このメソッドを含むテンプレートに対し

上記のような警告文が表記されるようになっています。
* サンプルは弊テンプレートですが既に別のメソッドに変更・修正済です。
* document.writeIn は改行書き出しのあるものを指し、document.writeとほぼ同じです。

けれども「プラグイン」の方には警告文なし (´・ω・`)
公式プラグインの方はJSを含まないものが多いんですが、共有プラグインはその逆でJSがメインのような。あまり把握していないので断言はできません。すみません (´・ω・`)

一般ユーザーさんは「このプラグインにdocument.writeが含まれているかどうか」の判断は非常に難しいので、そうですね… とりあえずDLしてみて編集ページを開いて目視確認するのが確実かなぁ。ともかくこのメソッドを避けましょうね、というのが一つの注意点です。

提案1 折りたたみ

  • 2021年10月 (3)
  • 2021年09月 (10)
  • 2021年08月 (3)
  • 2021年07月 (13)
  • 2021年06月 (21)
  • 2021年05月 (2)
  • 2021年04月 (0)
  • 2021年03月 (1)
  • 2021年02月 (3)
  • 2021年01月 (3)
  • 2020年12月 (11)
  • 2020年11月 (2)
  • 2020年10月 (9)
  • 2021年09月 (3)
  • 2021年08月 (3)
  • 2021年07月 (3)

* サンプルのリンクは外しています。高さは120pxを指定しています。
全部折りたたんでしまうとアレなんで、ある程度の高さを超えたら残りは開いて見てもらう、という形が良いと思います。フリーエリアプラグインをDLし、そこにペーストします。

<!-- html -->
<ul id="plg__archive-1">
  <!--archive-->
  <li class="plg__item">
    <a href="<%archive_link>"><%archive_year>年<%archive_month>月 (<%archive_count>)</a>
  </li>
  <!--/archive-->
</ul>
<a class="plg__btn" href="#plg__archive-1" aria-label="click to open"><span class="plg__arrow"></span></a>

<!-- CSS -->
<script>
var styleElm = document.createElement('style');
styleElm.innerHTML = `
#plg__archive-1 {
  list-style: none;
  margin: 0 !important;
  padding: 0;
  overflow: hidden;
  transition: height .6s;/* アニメーションの速度 */
}
.plg__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 38px;
  margin: 12px 0 0;
  border: 1px solid rgb(200,200,200);/* ボタンborder色 */
  background: rgb(255,255,255);/* ボタン背景色 */
  color: rgb(51,51,51);/* ボタンアイコン(テキスト)色 */
  cursor: pointer;
}
/* テキストに変更する場合はここから削除 */
.plg__arrow {
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
.plg__is_open .plg__arrow {
  transform: rotate(-135deg);
}
/* テキストに変更する場合はここまで削除 */
`;
document.getElementsByTagName('head').item(0).appendChild(styleElm);
</script>

<!-- JS -->
<script>(function(window,document){let mB=document.querySelector('.plg__btn');let tM=document.getElementById('plg__archive-1');let bH='420px';let cH;init();function init(){cH=tM.clientHeight;tM.style.height=bH;mB.addEventListener('click',function(){clickToggle()},!1)}function clickToggle(){let lH=tM.style.height;tM.style.height=(lH==''||lH==bH)?cH+'px':bH;mB.classList.toggle('plg__is_open')}})(window,document)</script>

クラス名など既存内容とバッティングしてはいけませんので、アンダースコア2つで繋いでいます。都合が悪い場合は変更してください。

ボタンを矢印ではなく「クリックで開く」「もっと見る」などのテキストに変更する場合はhtml内の <span class="plg__arrow"></span> を希望するテキストに置き換えます。その際はCSSの一部が不要になりますのでガイダンスに従ってください。

CSSはバリデート対策でJSによるheadへの挿入、という形を取っています。編集しやすいようにグレイブアクセントで構成していますので、2つある ` の記号を削除したり移動させたりしないよう注意してください。

デフォルトの高さは 420px を指定しています。自身の状況と照らして適切な数値に変更してください。<!-- JS --> と目印を付けたまとまりの中に 1箇所 あります。実際の高さより大きい数値を指定しないよう注意。また、折りたたむことを前提にしていますので、「もし高さがxx以上なら or xx以下なら」といった条件づけはしていません。

サイドメニューがドロワータイプの場合は利用できません。

ドロワーのタイプにもよりますが、ほとんどが利用不可です(場合によってclientHeightが正しく取得できないため)

展開ボタンをクリックした際にリストの先頭に戻るようにしてあります。これが無いと長いリストが開いた時にページ表示現在位置が最下部まで引っ張られて、コンテンツを見失ってしまいます。

もっと良いやり方があると思いますが、vanillaJS(pure JS, ネイティブJS)であること、アニメーションを付けること、の2点にこだわってこの内容にしました。

提案2 横並び

2021年
10月 (1)
08月 (1)
07月 (3)
06月 (1)
02月 (3)
01月 (2)
2020年
11月 (2)
10月 (1)
09月 (1)
07月 (3)
06月 (1)
05月 (3)
04月 (9)
03月 (5)
02月 (2)
01月 (2)
2019年
12月 (2)
11月 (2)
10月 (6)
09月 (1)
08月 (2)
07月 (2)
06月 (3)
05月 (1)
04月 (5)
02月 (5)
01月 (3)

* サンプルのリンクは外しています。

<div id="plg__archive"></div>

<script>
  let acvY=0;
  let acvL='<dl>';
  <!--archive-->
  if(acvY!=<%archive_year>) {
    if(acvL!='<dl>') {
      acvL+='</dd>';
    }
    acvL+='<dt style="font-weight:bold;"><%archive_year>年</dt><dd style="margin:0 0 1em;">';
    acvY=<%archive_year>;
  }
  acvL+='<a href="<%archive_link>" style="display:inline-block;margin:0 1em 0 0;"><%archive_month>月 (<%archive_count>)</a>';
  <!--/archive-->
  acvL+='</dd></dl>';
  document.getElementById('plg__archive').insertAdjacentHTML('afterbegin', acvL);
</script>

スタイリングは直接インラインCSSで書き込んでいます。管理のしやすさ・使い勝手はこちらの方が上かもしれません。この形でも高さが大きい場合は折りたたみにする、というのでも良いのかな、思います。折りたたまれたコンテンツやリンクというのは目に触れない分アクセスされにくいので、アーカイブを重要視する方はこちらをおすすめします。

まとめ

高さの調整については スクロールボックスにする というのが簡単で手っ取り早いんですが、縦スクロールというのはスマートフォンで非常に扱いづらいんですね。なので今回の2提案に絞りました。誰かのお役に立てれば幸いでございます (●'0'●)/

サイドバーの項目をスクロール

サイドバーの項目をスクロール

2019.5.31に追記を行っています。 カテゴリなんかが増えていくと サイドバーの縦幅が必然的に長くなって不格好になります。短文記事の横に縦に長~~~いサイドバーというのは鬱陶しいものでございます (´・ω・`)...

Related post

Comments  11

ナツメ
2021/10/23 (Sat) 16:10

変更してみました。

akiraさん、こんにちは。
ずっと放置だったアーカイブ。誰も見ないだろう、と思ってましたが、変えてみると、確かに違う。笑
両方試してみて、2番目の方に変更させていただきました。
いつもすてきな提案、勉強になります。

神代
2021/10/24 (Sun) 12:56

こんなプラグインを待ってました!

Akiraさん、こんにちは。神代です。
先日はサポートありがとうございました。

そうそう、このような月別アーカイブがほしかったんですよ~。
自作する技術がなかったので、大変ありがたいです。
早速使わせていただきました。

追伸:
あれからFC2ブログに問い合わせたのですが、普通に表示されるとの返事が。
私の環境だけエラーが表示されるようですが、特に問題なさそうなので、とりあえず今はそのままにしておいています。

vanillaice (Akira)
vanillaice (Akira)
2021/10/25 (Mon) 14:32

To ナツメさん

こんにちは ('0')/

長くご活躍されているのでかなり縦に長かったですよね。多少はすっきりしたのではないでしょうか :)

----- 別件

最新記事のランキング関連バナーのimg要素のhtmlが
width="横" height="縦"
と、そのまま「横」「縦」のテキストのままになっていますので、バナーの実寸を忘れずに書き換えてくださいね。例えば「レシピブログ」のバナーであれば
width="140" height="30"
です。

vanillaice (Akira)
vanillaice (Akira)
2021/10/25 (Mon) 14:33

To 神代さん

こんにちは ('0')/

web上のページというのは割とJSエラー満載だったりします。複雑なページほどエラーが多いというか。なので正しく機能しているのであれば気にされなくて良いと思いますよ :)

ナツメ
2021/10/25 (Mon) 14:39

To vanillaice (Akira)さん

ひえ~(-_-;)お恥ずかしや!!
さっそく訂正しておきますぅ。苦笑
わざわざご訪問いただき、ありがとうございます。

-
2021/10/29 (Fri) 20:33

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/10/30 (Sat) 16:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/10/30 (Sat) 23:06

To コメント削除できない件 内緒さん

ごめんなさい。コメントフォームの方、今直しました (*_ _)

そうなんですよ。確か内緒さんが横並びだったはず… と思って伺いましたがプラグイン名がわからずー ( ̄∀ ̄;)
プラグインは名称が変わるともう見つけられないですよね。作者名検索でも出てこないことが多いですし。
いずれにしろネームが入るのは嫌だろうなぁ、と思ったので新規で作成しました。

hige
2021/10/31 (Sun) 19:17

私が参考にした横並びのプラグインは
「コンパクト月別アーカイブ」
https://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=32321&mob=
というものでそれを改造したものです。
元のプラグインに、月別の投稿数を表示するとか、title属性も不要と思ったのでそれも省いたものです。
こういったプラグインの改造って、元の作者に気を遣います。なので元の作者名、クレジットは残しました。

vanillaice (Akira)
vanillaice (Akira)
2021/11/01 (Mon) 00:16

To higeさん

こんばんは ('0')/
そうですね。クレジット表記は作者さんの意向であれば消さずにおいてくださいね。情報ありがとうございます :)

深緑の女魔術師
2021/11/26 (Fri) 19:44

お借りします

深緑の女魔術師です。

上のベテランさんに比べるとまだまだですが
10年弱経過で非常に長かったので利用させてもらいまいた。

まだカテゴリがあるので全体的に長いですが
だいぶスッキリ出来たので感謝です。

多忙みたいですのでレスは不要です。

以上です。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)