#新
・タグ検索が可能に
・画面の横幅が768pxの時にのみ表示が崩れるのを直した
・サイト上部の画像をAVIF画像に変更
・個別の記事の下部にあるTopへボタンのリンク先を変更
・記事内のHTMLタグの挙動を一部変更
#タグ検索
一覧ぺージから、タグによる検索を可能にした。ずっとタグによる検索はサーバーサイドで動くpluginを使わなければならないと思っていたが、Jekyllの公式ページを見ているとLiquid関数を使って実装出来そうだったのでやってみた。
すべてのタグについて簡単なMarkdownファイルを用意しなければならないが、使うタグは数個しかないし一度用意すればよい。_tagsディレクトリにそれぞれのタグごとの設定ファイルを作り、_layout/tag.htmlでそれぞれのタグについてのページが生成されるようにする。ページの生成は個別の記事のページが生成されるのと同じ仕組みで動いている。
あとは表示を適当に整えて、完成だ。URLの設定が少し複雑で面倒だったが、それ以外はトップページと似たスタイルで済むし難しくはなかった。
#レスポンシブデザイン
別になにか新しい機能をつけたわけではない。
ただ、スタイルの適用の仕方がバラバラだった。768px以上にPC用のデザインが適用される部分もあれば、768px以下にスマホ用のデザインを適用している部分もあり、768pxの人はさまざまなものがバラバラのサイズで表示される有様だった。ピンポイントな画面幅の不具合ではあるが、iPadはこの画面幅のはずだった。
以上と以下はまだどちらも使用していて混ざったままだが、問題なく表示されるようにはなった。
#AVIF画像
一年ほど前にEdgeのアップデートで主要ブラウザが全てAVIF画像に対応した1。圧倒的な圧縮率は魅力的で、当時から使っていたリポジトリの画像はAVIFに置き換えたが、ブログコンテンツを新たに作り始めた時は面倒だったから通常のPNGファイルのままアップロードした。
今回、自分のサイトをいろいろ見ながら作っていると読み込み時間が気になりPageSpeed Insightsで見てみると、やはりスコアは低かったので、画像形式を変えてみた。シンプルな作りのサイトなので、同時にいくつかの設定を直せばスコアは改善した。
pictureタグはブラウザが対応している場合のみAVIF画像を表示する、というような芸当ができるようなので、特に困るようなことは起きないはずだ。
#Topへボタン
前回、記事を5つごとに分割して以降、上手く機能しない状態だった。ボタンを押すと毎回ブログトップの1ページ目に飛ばされるのだ。2ページ目の一覧からこの記事を読み始めたのなら、2ページ目の一覧に戻るべきだ。
絶対的なパスを指定できないため、少し困った。1ページ前に戻る、という機能は簡単に2作れそうだったが、記事の中の脚注を押して同じページの下部の脚注欄に移動したときにページが移動した、という判定を受けるため今回は使えない。仕方がないからセッションストレージを使ってJavaScriptで作った。個別の記事を開いた時に1ページ前のリンクを保存しておく、というものだ。特に何も考えずに作ったが、あとから作ったタグ検索でもこれは上手く動作していい感じだ。
#HTMLタグ
ブログトップやタグで検索した時に出てくる本文の概要、要約などは、僕が記事ごとに設定していて、本文のはじめの部分をそのまま使うこともあれば、自分で新しく書くこともある。これまでは本文をそのまま使ってしまうと、本文に着いているHTMLタグも抜き出されてしまっていた。たとえば上の「#HTMLタグ」の文字のように、太字になっていたり色をつけていたりすると、それがブログトップにも反映されてしまう。これを直して文字情報のみ抜き出す仕様にした。複雑なことはやっておらず、JekyllのLiquidフィルタを使うだけでHTMLタグは除去できる。
それと、リンクの挙動も変更した。本文中に下線が表示されているものはクリックすると別ページにジャンプするのだが、以前はブログを見ている記事がジャンプしてしまう仕様だった。これでは記事を読んでいる途中でクリックし、ジャンプ先でもいろいろ見て回ると、記事に戻ってくるのが困難だ。というわけで新しいタブで開くようにした。
新しいタブで開くにはURLの部分にHTMLで指定をするのだが、僕はURLは[表示される文字](URL){: .blog-link }と言うようにMarkdownで書いているので、HTMLタグを書く部分がない。そこでblog-linkクラスが適用されている文字列に新しいタブで開くコードをJavaScriptで追加した。