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

<!-- 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>

<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>