Blogger ブログ アーカイブの修正

業務外

井戸掘りブログには過去の記事を日付順に並べた、ブログアーカイブという部品を組み込んでいます。これは私の利用しているブログサービス（Blogger）の標準部品です。年単位・週単位で記事へのリンクをまとめて、クリックすると開閉します。

このブログアーカイブですが、
PC用のウェブバージョンでは開閉しますが、スマホ用のモバイルバージョンでは開きっぱなしです。4年以上続けているブログなので、行数が多くてスマホ用が見辛くなっています。

スマホで見ると、
ブログアーカイブが開きぱなしです

これ何とかしたい。Google先生に聞いてみましょう。

ネットを検索すると、このブログアーカイブのモバイルバージョンは幾つかJava Scriptのバグがあるようです。ならデバッグしてJava Scriptを置き換えればいいんじゃね？ってことでデバッグの仕方から勉強してみました。使ったのはGoogleのブラウザChromeに組み込まれているデベロッパーツールです。もちろん無料ね。

ちょいと勉強して、ウェブバージョンのブログアーカイブの開閉の動きを確認しました。どうやらclass="widget BlogArchive"を持つdivタグの中で、liタグとspanタグをCSSを切替えて操作しているようです。

ウェブバージョン、ブログアーカイブ閉

ウェブバージョン、ブログアーカイブ開

閉じた状態（2014年のみが表示されます）

<div class="widget BlogArchive" data-version="1" id="BlogArchive1">
<h2>ブログ アーカイブ</h2>
<div class="widget-content">
<div id="ArchiveList">
<div id="BlogArchive1_ArchiveList">
<ul class="hierarchy">
<li class="archivedate collapsed">
<a class="toggle" href="javascript:void(0)">
<span class="zippy">

        ►&nbsp;
   
</span>
</a>
<a class="post-count-link" href="https://nsfarmer.blogspot.com/2014/?m=0">
2014
</a>

開いた状態（2014年以下の週が表示されます）

<div class="widget BlogArchive" data-version="1" id="BlogArchive1">
<h2>ブログ アーカイブ</h2>
<div class="widget-content">
<div id="ArchiveList">
<div id="BlogArchive1_ArchiveList">
<ul class="hierarchy">
<li class="archivedate expanded">
<a class="toggle" href="javascript:void(0)">
<span class="zippy toggle-open">▼&nbsp;</span>
</a>
<a class="post-count-link" href="https://nsfarmer.blogspot.com/2014/?m=0">
2014
</a>

ははーん、モバイルバージョンはこれが動かないんだな。
次にモバイルバージョンの動きを確認します。PCでもURLの最後に『?m=1』を付け足せば、モバイルバージョンとして動作します。どうじゃ・・・　同じように動いています。でも開閉しません。開きぱなしです。ぐぬぬ、ツールの勉強までしたのに付け焼き刃ではダメか…。

モバイルバージョン、ブログアーカイブ閉

！
そうだ、CSSの切替えが問題ないなら、CSS自体が動いていないってことです。それぞれのバージョンのCSSを比較してみましょう。

こちらがウェブバージョンに組み込まれているCSSです。
https://www.blogger.com/static/v1/widgets/3597120983-css_bundle_v2.css

こちらがモバイルバージョンに組み込まれているCSSです。
https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css

CSSのコードが圧縮されて超見辛いですが、デベロッパーツールなら整形してくれます。

結論
CSSの定義が足りません。モバイルバージョンではブログアーカイブの開閉に必要なArchiveListの定義が抜け持ちています。この部分です。

#ArchiveList .toggle {
    cursor: pointer;
    font-family: Arial,sans-serif
}

#ArchiveList .toggle-open {
    _font-size: 1.7em;
    line-height: .6em
}

#ArchiveList {
    text-align: left
}

#ArchiveList a.post-count-link,#ArchiveList a.post-count-link:link,#ArchiveList a.post-count-link:visited {
    text-decoration: none
}

#ArchiveList a.toggle,#ArchiveList a.toggle:link,#ArchiveList a.toggle:visited,#ArchiveList a.toggle:hover {
    color: inherit;
    text-decoration: none
}

.BlogArchive #ArchiveList ul li {
    background: none;
    list-style: none;
    list-style-image: none;
    list-style-position: outside;
    border-width: 0;
    padding-left: 15px;
    text-indent: -15px;
    margin: .25em 0;
    background-image: none
}

.BlogArchive #ArchiveList ul ul li {
    padding-left: 1.2em
}

.BlogArchive #ArchiveList ul {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-image: none;
    border-width: 0
}

.BlogArchive #ArchiveList ul.posts li {
    padding-left: 1.3em
}

#ArchiveList .collapsed ul {
    display: none
}

ではこれを、このページに組み込んでみましょう。頭とお尻に<style type="text/css">～</style>を付けて、記事の先頭にHTML編集画面で組み込みます。

じゃーん、モバイルバージョンのブログ アーカイブが折り畳められました。いいね。

スマホで見ると、
ブログアーカイブが閉じました

ブログ記事に毎回CSSを組み込むのは面倒です。このCSSをブログのテンプレートに組み込めば、全記事のブログ アーカイブが修正されるはず。その内、手直ししてみます。

感想と構想

デベロッパーツールの勉強を含めて3日で解決しました。偉い、凄い、自画自賛。笑

ブログアーカイブのエラーについては、以下の記事を参考にさせていただきました。
Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない
Blogger:モバイル版の表示にて、ブログアーカイブが正常に動作しない(2) - 原因を探る
残念ながら、こちらの記事でもブログアーカイブの年が開きぱなしなのは調査されていません。でもJava ScriptやCSSを調査する機会を与えてくれました。

Chromeのデベロッパーツールの使い方は、以下の記事を参考にさせていただきました。
ChromeのデベロッパーツールでJavaScriptをデバッグする方法（2019年版）

圧縮されたソースコードの整形は、以下の記事を参考にさせていただきました。
Google ChromeのJavaScriptデバッガの進化がすごい

---

今回の記事でソースコードを表示するのにSyntaxHighlighterは使用していません。エディタ（Eclipse）風に表示するツールですが、最近動きがおかしい。これも調べないと…。

---

【2019/7/5後記】
テンプレート修正しました。