絞り込み検索をスクロールテーブルを代用して実装してみた【ブログデザイン】2020年1月14日SHAREツイートシェアはてブLINEPocketやあ、(百魔の主を書いている兼業作家の)葵です。(@Aoi_Yamato_100)ブログの記事数が増えてくると、どうしても埋もれる記事が出てきてしまうものです。雑記ブログだとカテゴリーはとっ散らかってしまうし、まとめ記事や内部リンクでまとめるのもちょっと大変。[jin-iconbox07]ユーザビリティ的にはトップページから3クリックでたどり着けない記事は遠すぎる、なんて話もあります。[/jin-iconbox07]私の場合は漫画のレビュー記事が増えてくるにあたって、まとめ記事や内部リンクだけでは整理しきれなくなってきました。来た人がなんとなく面白そうな作品を探せるようにしたい漫画やアニメのレビュー記事(タイトルに対するレビュー)というのは、基本的に『すでにその作品を知っている人』が検索から訪れます。私としては、『まだその作品を知らない人』に「こんな面白い作品あるんだよ!」というのを伝えたいのです。なると、現状のサイト構成はそういう人にあまり優しくない作りになっています。一応似たような作品があれば内部リンクとかで紹介できるようにはしているけどさ。サイト内検索も『名前を知ってないと使えない』もんな。うまいこと面白い作品を紹介できないか。私は当然自分の作品も読んでほしいですが、私が読んで「面白い」と思った作品もいろんな人に読んでもらいたいと思っています。そこで、いろいろ悩みながら、なんとか来訪者がサイトを使いやすいようにできないかな、と試行錯誤してみることにしました。Filterは機能は良いがデザインが微妙カスタムタクソノミーで絞り込み検索を実装しようとするも挫折するfunctions.phpをいじった結果、見事ブログが壊れる高度な検索機能は有料で提供される意味がよくわかった視点を変えて『タグ』を活用することにタグで要素を分解する問題は使いやすさとデザイン神カスタマイズを発見するスクロールテーブルにボタンをぶち込んでみたスクロール表示もちゃんと出るまとめ:絞り込み検索の代わりに独自検索機能を実装できたプラグインで絞り込み検索を実装しようとするも挫折するまず最初に考えたのは『絞り込み検索』です。絞り込み検索というのは要するに、カテゴリーで絞り込みタグで絞り込み結果表示みたいなことができる機能のことを指します。Filterとりあえず最初はワードプレスのプラグインを探しました。いった絞り込み検索やカスタム検索は、良いものだと会社が有料で提供していたりするみたいで、いくつか有料のものと、そして無料のワードプレスプラグインを発見しました。Filter』というプラグインです。一度これを使ってみたのですが、元機能は良いもののデザインがあまりよくなくて、最終的にはCSSをいじろうとして断念しました。人が書いてくれたものをなんとなく理解してなんとなくいじれるくらいのもので、一からコードを書けるような力はありません。自分でCSSいじれるよーって人はこれを元にカスタムすると結構便利だと思います。カスタムタクソノミーで絞り込み検索を実装しようとするも挫折するほかのプラグインも似たようなものだったので、プラグインは諦めます。次に、いろいろ絞り込み検索について調べている中で見かけた『カスタムタクソノミー』という文言を調べてみました。記事に新しい定義を付け加えることでその定義を元に絞り込み検索とかできるようになるよ的な機能のことを指すのだと思われます。適当な認識!これはプラグインを使わなくても、functions.phpなどをいじることで出来るみたいです。いうことでやってみました。2020ふぅ、焦ったZE☆functions.phpというのは、カスタマイズを提供してくれている人がよく注意喚起をするファイルのことで、要するに、ワードプレスのテーマ機能の根幹を指すファイルです。phpというのはなんかサーバーとの連携を定義してるうんちゃらかんちゃららしく、下手にいじるとブログがマジ真っ白になります。私はテーマ機能から直接phpをいじるのですが、更新の直後に管理画面へアクセスできなくなってしまったので、さすがに焦りました。しよう......その2秒後に契約しているサーバー側からFTPソフト的なあれでphp関数を編集できることを思い出して、急いで追加した関数を削除。なんとか元の状態に戻ることができました。九死に一生を得るとはこのこと。全体的にざっくばらんすぎる。みんなphpいじるときはマジでバックアップをとっておけ。あとネットで神カスタマイザーたちが公開してくれているカスタマイズを実装するときも、ちゃんとバックアップとって、自己責任で実装すること。更新日が古いカスタマイズはよく注意したほうがいいぞ。ワードプレスの仕様が変わってたり、使ってる新しめのテーマと競合することもあるからな。高度な検索機能は有料で提供される意味がよくわかったそんなこんなでカスタムタクソノミーも断念。ユーザビリティーの良い高度な検索機能が有料で提供される意味がわかった次第です。私は諦めない!お、おう。良い作品に触れてもらうためには是が非でももうちょっと良い感じの検索を実装したい。来訪者がもうちょっと受動的に作品を探せる機能を『やあ、葵です。視点を変えて『タグ』を活用することにこうなると新しい定義づけをするのは難しい。カテゴリーはすでに分けているから、カテゴリー以外の分類をより受動的に検索に活用できるようにしたい。そんなとき、ワードプレスのタグ機能を思い出しました。タグで要素を分解するタグは作成するとタグページという記事一覧ページが作られます。このページは固有のパーマリンクを持っているので、内部リンク的につなげれば疑似的な検索結果として使えることに今更気づきました。いうことで、「世界観が良い」や「戦闘が格好良い」などで作品を要素分解して、あらかじめ予想される検索結果として提供することにしました。問題は使いやすさとデザイン私はこの簡易的な検索機能をトップページに実装したいと考えていました。それもできるだけスマートに、幅を取らないように。いうのも、すでにトップページには「新着記事」や「おすすめ記事」があって、これらの邪魔をするようでは意味がないと思ったのです。付属的なツールとして実装したい。神カスタマイズを発見するそんなこんなで他の人のブログを見ていると、ふとこんな記事を発見しました。行を削除することで縦幅を最小限にできるこのぽんひろさんのカスタマイズ記事を見たときにピンと来たのです。\ここにボタンぶち込めないかな!/発想がわりと大胆だな!スクロールテーブルにボタンをぶち込んでみたできたわ。スマホのファーストビューで下に「新着記事」の文字が見える状態で、一番上にツール的に独自検索機能を追加することができました。使用しているテーマ『JIN』のデフォルトボタンだと枠線がかぶってしまったので、ボタンは別のCSSを使って設定。ちなみにみんな大好きサルワカさんのCSSを使わせていただきました。CSSで作る!押したくなるボタンデザイン100(Web用)(出典:サルワカ)スクロール表示もちゃんと出る二行にすると「スクロールできるよ」表示が見切れてしまうので、行は三行を維持。特集ページは今後いろいろ作っていくつもりなので、ひとまず仮置きにしました。デザイン的にもなかなか良いし、なにより縦幅を取らずにスクロールで横幅を自在に使えるのが最高。ちなみにスマホビュー時にヘッダー画像が追尾するのもぽんひろさんのカスタマイズだよ。まとめ:絞り込み検索の代わりに独自検索機能を実装できたおそらく、このスクロールテーブルの使い方はかなり特殊な使い方だと思います。ほかの方は普通に比較表などで使っていると思うので、テーブルの中にボタンを無理やりぶち込んだのは私が初めてではないでしょうか。視点を変えることで、応用が利くカスタマイズ。すばらしいんだ......。このぽんひろさんのテーブルカスタマイズは、スマホビュー時の空間を拡張してくれる非常に優れたカスタマイズなので、みなさんも活用してみてはいかがでしょうか。コメントをキャンセルメールアドレスが公開されることはありません。サラリーマンしながら小説書いたりブログ書いたりしている。