【Blogger】プルダウン型ブログアーカイブのカスタマイズ（標準JS不要）

Bloggerに標準搭載されているJavaScript（widgets.js）を無効にすることで、ブログを高速化できます。

しかし、一部のウィジェット（ガジェット）が機能しないなどの弊害が起きます。

その一例がブログアーカイブウィジェットです。

標準JSを無効にすると、階層とフラットリストではリストの開閉ができなくなり、プルダウンメニューでは項目を選んでもページ遷移が起きません。

どうにかこれらの問題を解決できないかと調べた結果、プルダウンメニューについては解決策が見つかりました。

この記事では、標準JSを無効にしつつプルダウン型のブログアーカイブウィジェットを作動させる方法を書いていきます。

また、アーカイブの日付表記の変更やデザインのカスタマイズも行ったので、そちらも合わせて述べていきます。

【Blogger】月別アーカイブに翌月・前月のリンクを設置する

標準JSなしでプルダウン型アーカイブを作動させる方法

テンプレートのHTML編集エディタにアクセスし、アーカイブウィジェットの<b:includable id='menu' var='data'>...</b:if>内の以下の部分を、

<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>

こちら↓に差し替えて保存します。

<select onChange='location.href=value;' expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>

追加したonChange='location.href=value;の部分で、現在開いているページのURLを示すlocation.hrefをselectタグ内のoptionタグのvalueに記述されているURLに差し替えることでページ遷移が起きます。

これだけで標準JSがなくてもプルダウンメニューが動くようになります。

今回紹介したのはHTMLを書き換える方法でしたが、他にもJavaScriptやjQueryでも同様のことができるようです。

詳しくはこちらの記事をご覧ください。

select optionで選択された時にvalueに指定した値で遷移する方法 | Awesome Blog

日付表示を「○年△月」表記に変更

Blogger管理画面の「レイアウト」からアーカイブガジェットの設定変更ができます。

しかし、ここから設定できる日付の表示形式には日本式の「○年△月（YY/MM）」表記の選択肢はありません。

ここらへんがさすが曲者Blogger……といった感じですが、長期ひきこもりの雑ブログさんがこちらの記事で解決方法を書かれていたので、このブログにも導入してみました。

BLOGGERアーカイブガジェット日付表示変更の完成版-長期ひきこもりの雑ブログ

上の記事で書かれているMENU用のコードを参考にしました。

ただし、そのまま導入するとプルダウンメニューでは不具合が起きてしまったので、コードの以下の部分と、</select>直前の</b:loop>を削除しました。

<b:loop values='data:intervalData' var='interval'>

また、リンク先のコードでは以下の部分が<!--と-->でコメントアウトされていますが、のちほど記述するデザインのカスタマイズでウィジェットのタイトル部分を取ってしまうので、こちらのコメントアウトは外しました。

<option value=''><data:title/></option>

アーカイブウィジェットのデザイン変更

プルダウン型アーカイブウィジェットのデザイン変更を行いました。

アーカイブウィジェットのタイトル部分を削除

アーカイブウィジェットの<b:includable id='main'>...</b:if>内の以下の部分を削除するか、<!--と-->、または<b:comment>と</b:comment>で囲ってコメントアウトします。

<b:if cond='data:title != &quot;&quot;'>
  <h2><data:title/></h2>
</b:if>

ただタイトル部分を削除するだけなら、レイアウト画面のガジェットの設定でタイトルを空白にすればいいのですが、設定したガジェットタイトルを出力する<data:title/>をoptionタグで使いたかったので、このような方法をとりました。

アーカイブウィジェットのCSS変更

ここからCSSでデザインを変更していきます。

このブログではQooQというテンプレートを使用しています。また、標準で読み込まれるCSS（bundle.css）を無効にしています。

他のテンプレートを使っていたり、標準CSSを読み込む設定にしていると表示が崩れる場合があります。予めご了承ください。

#BlogArchive1 .widget-content{ /*ウィジェットのスタイル削除*/
  background: transparent;
  padding: 0;
}
#BlogArchive1 select{
  appearance: none; /*逆三角形削除（下の2行も同様）*/
  width: 100%;
  height: 32px;
  padding: 0 8px;
  background-color: #ffffff;
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23666333%22%20d%3D%22M16.59%208.59L12%2013.17%207.41%208.59%206%2010l6%206%206-6z%22%2F%3E%3C%2Fsvg%3E'); /*逆三角形の代わりにSVG表示*/
  background-position: right 8px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  border: 1px #dddddd solid;
  color: #333333;
  font-size: 14px;
}
#BlogArchive1 select::-ms-expand{
  display: none; /*逆三角形削除（IE）*/
}
#BlogArchive1 select:focus{
  outline: 1px solid #0B8043; /*selectクリック時に枠線表示*/
}

#BlogArchive1の部分は適宜変えてください。

デフォルトの状態だとselect部分の右端に逆三角形（▼）が表示されるのですが、これをselectにappearance:noneとselect::-ms-expandにdisplay: noneを設定することで消しています。

消した逆三角形の代わりに SVG 画像を表示させています。

selectタグには::before や::afterが使えないようで、SVGのコードをBase64という形式に変換してbackground-image: url(...)に設定する……という、とても面倒なことをしています。

今回使用したSVGはMaterial Iconsのexpand_moreです。CDNを読み込むのではなく、SVGをダウンロードして適当なテキストエディタで開いてソースコードを表示させます。

Material Iconsの場合1つ目のpathタグは背景色に関わる部分（不要）なので削除をしました。そのコードをこちらの記事でBase64形式に変換しました。

SVGデータをCSSのbackground-image向けのBase64コードにかんたん変換ツール | 大石制作ブログ

注意点として、この方法だとSVGの色をCSSで変更できません。

SVGのコードのpath部分にfill='#666'のような感じで直接設定してください。Base64に変換されるとその部分もエンコードされてわかりにくくなるので、変換前に色を指定したほうがいいと思います。

ちなみにbackground-imageの代わりにmask-imageを使えばCSSで色指定ができるとのことですが、当然のようにIE非対応でした。

もうIE対応は諦めてもいいかなとは思っています。来年サポート終了するし……。

あとがき

プルダウン型のブログアーカイブウィジェットを標準JSなしで作動させる方法や、アーカイブの月別表記の変更やデザインのカスタマイズについて書きました。

こんだけ長々と書いてきて、いちばん大変だったのがSVGをbackground-imageに設定するところだったという。

useタグとか使えないのかなーと調べたのですが、「background-image SVG use」で検索しても「SVGをbackground-imageで使う方法！（useタグのことは1ミリも出てこない）」みたいな記事しか引っかからなかったので諦めました。

あとアーカイブウィジェットの階層とフラットリストも標準JSなしで動くようにならないかなーとは考えました。

でもこちらはガッツリJS書けないと無理そうで手が出せない。

記事表示させないタイプのフラットリストならinputとlabel使えば折りたためますけど、そういうことじゃないんだろうな……。