Blogger:ブログアーカイブで投稿タイトルをデフォルトで非表示にして、ユーザがクリックした場合のみ表示する

イントロダクション

この投稿では、以下のケースの Blogger のブログアーカイブについて説明しています。

ブログ アーカイブ

• タイトル：階層
• オプション：「投稿タイトルを表示」にチェック
• アーカイブの頻度：毎月

Blogger のブログアーカイブでは、タイトルを階層とし、オプションで「投稿タイトルを表示」にチェックを入れておくと、現在開いている投稿と同じ月の投稿タイトル一覧が標準で表示されるようになります。

具体的には、2014年の11月に公開した投稿をブラウザで開いていると、ブログアーカイブでは、その月の記事タイトル一覧が表示された状態になります。

ブログアーカイブ
現在開いている投稿と同じ月の投稿タイトル一覧が標準で表示される
(現在開いている投稿が強調表示されているのは、カスタマイズしたため。）

その他の月の記事タイトル一覧は、閲覧者が月の左側に表示されている三角形のマークをクリックして、階層を開かなければ表示されません。

ブログアーカイブ
その他の月の記事タイトル一覧は、閲覧者が操作しなければ表示されない

閲覧者の利便性を考えると、投稿タイトルを表示して、各月にどんな投稿があるのかページを遷移できなくても確認できるのが理想的です。

しかしながら、ひと月に何十本も投稿を公開していると、大量の投稿タイトルが最初からページに表示された状態になり、ページの見通しが悪くなります。


そこで、標準では表示された状態となる（閲覧者が開いている投稿の公開月の）記事タイトル一覧を、閲覧者がクリックするまで表示されないようにしてみます。

コード

Blogger の設定画面のテンプレートより、HTMLの編集を行います。

なお、テンプレートの HTML を編集する前に、テンプレートの HTML をすべてテキストエディタに張り付けて、保存（バックアップ）しておくとよいでしょう。


表示されたテンプレートの HTML の中から、以下のようなブログアーカイブを表示している箇所を探し出します。

<b:widget id='BlogArchive1' locked='false' title='ブログ アーカイブ' type='BlogArchive'>

</b:widget>


その <b:widget> から </b:widget> の間に以下のような構造を見つけることができます。

この部分は、ブログアーカイブの階層構造の一階層を表示する機能に相当します。

    <b:includable id='interval' var='intervalData'>
        <b:loop values='data:intervalData' var='i'>
          <ul class='hierarchy'>
            <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
              <b:include data='i' name='toggle'/>
              <a class='post-count-link' expr:href='data:i.url'>
                <data:i.name/>
              </a>
              <span class='post-count' dir='ltr'>
                (
                <data:i.post-count/>
                )
              </span>
              <b:if cond='data:i.data'>
                <b:include data='i.data' name='interval'/>
              </b:if>
              <b:if cond='data:i.posts'>
                <b:include data='i.posts' name='posts'/>
              </b:if>
            </li>
          </ul>
        </b:loop>
      </b:includable>


この部分を次のように修正します。

    <b:includable id='interval' var='intervalData'>
        <b:loop values='data:intervalData' var='i'>
          <ul class='hierarchy'>
            <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
              <b:include data='i' name='toggle'/>
              <a class='post-count-link' expr:href='data:i.url'>
                <data:i.name/>
              </a>
              <span class='post-count' dir='ltr'>
                (
                <data:i.post-count/>
                )
              </span>
              <b:if cond='data:i.data'>
                <b:include data='i.data' name='interval-month'/>
              </b:if>
              <b:if cond='data:i.posts'>
                <b:include data='i.posts' name='posts'/>
              </b:if>
            </li>
          </ul>
        </b:loop>
      </b:includable>

また、次のコードを上記のコードの次に挿入します。(</b:includable>の次に挿入）

    <b:includable id='interval-month' var='intervalData'>
        <b:loop values='data:intervalData' var='i'>
          <ul class='hierarchy'>
            <li expr:class='&quot;archivedate &quot; + &quot;collapsed&quot;'>
              <b:include data='i' name='toggle-close'/>
              <a class='post-count-link' expr:href='data:i.url'>
                <data:i.name/>
              </a>
              <span class='post-count' dir='ltr'>
                (
                <data:i.post-count/>
                )
              </span>
            </li>
          </ul>
        </b:loop>
      </b:includable>
    <b:includable id='toggle-close' var='interval'>
        <b:if cond='data:interval.toggleId'>
            <a class='toggle' href='javascript:void(0)'>
              <span class='zippy'>
                <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
                  &#9668;&#160;
                  <b:else/>
                  &#9658;&#160;
                </b:if>
              </span>
            </a>
        </b:if>
      </b:includable>


特に大事な部分を赤字で示しました。
いろいろな実装方法があると思いますが、一番シンプルに・簡単に出来る方法ということで、基本的に元からあるソースコードを流用する形で作成しました。


簡単にソースコードの説明をします。
ブログアーカイブの年の階層の次は、月の階層が来ます。

通常は、年の階層と月の階層は同じ <b:includable id='interval' var='intervalData'> を使用して表示しています。（年の階層を作り出した後、更に自分自身を再帰的に呼び出すことで、月の階層を作り出しています。）

そのため、年の階層と月の階層を同じ <b:includable id='interval' var='intervalData'>で作り出す行動だと、ブログアーカイブは標準の「今開いている投稿と同じ月の投稿タイトル一覧が標準で表示される」という動作になってしまいます。


そこで、<b:includable id='interval-month' var='intervalData'> という構造を新たに作り出しています。

この構造は、元々の  <b:includable id='interval' var='intervalData'> をコピーして作成した後、一部を書き換えています。

書き換え箇所は、

(1)
<li expr:class='&quot;archivedate &quot; + &quot;collapsed&quot;'>

と

(2)
<b:include data='i' name='toggle-close'/>

です。


(1) では、月の階層構造が閉じていることを示す collapsed が class 属性にセットされるようにしています。
（標準の data:i.expclass では、月の階層構造が開いていることを示す expanded が class 属性にセットされてしまいます。）


(2) では、(1) と同じように、標準では月の階層構造が開いていることを示す三角形の図形が月の左にセットされてしまいます。

そのため、月の階層構造が閉じていることを示す三角形の図形を月の左側にセットするために、元々あった <b:includable id='toggle' var='interval'> をコピーして、月の階層構造が閉じていることを示す三角形の図形を作成することに特化した  <b:includable id='toggle-close' var='interval'> を作成し、それを呼び出すようにしています。


以上の改造を行い、テンプレートを保存すると、実際にブログに反映されます。

なお、テンプレートを保存する前に、テンプレートのプレビューを行い、ちゃんと今回行った修正が反映されているかどうかや、修正の影響によりブログが動かなくなっていないかなどをチェックするのを怠らないようにしましょう。

まとめ

以上の修正を行うと、次の図のように現在開いている投稿と同じ月の投稿タイトル一覧が標準で表示されないようになります。

ブログアーカイブ
現在開いている投稿と同じ月の投稿タイトル一覧が標準で表示されない

なお、標準では表示されなくなりますが、他の月と同様に、月の隣の三角形のマークをクリックすることで、その月に公開した投稿タイトル一覧を表示できるようになります。


ユーザの利便性のために、ブログアーカイブから各月の投稿に直接移動できるようにはしたいけれど、標準で大量の投稿タイトル一覧が表示されるのは嫌だと思っている人は、この方法がその問題の解決策になる可能性があります。


※本投稿は上級者向けです。編集を間違えるとBloggerのブログが正常に動作しなくなる可能性があります。