【Amazon】今日のタイムセール商品!

絞り込み検索をスクロールテーブルを代用して実装してみた【ブログデザイン】

検索サーチ機能

やあ、(百魔の主を書いている兼業作家の)葵です。(@Aoi_Yamato_100

ブログの記事数が増えてくると、どうしても埋もれる記事が出てきてしまうものです。

特に雑記ブログだとカテゴリーはとっ散らかってしまうし、まとめ記事や内部リンクでまとめるのもちょっと大変。

ユーザビリティ的にはトップページから3クリックでたどり着けない記事は遠すぎる、なんて話もあります。

私の場合は漫画のレビュー記事が増えてくるにあたって、まとめ記事や内部リンクだけでは整理しきれなくなってきました。

  • 来た人がなんとなく面白そうな作品を探せるようにしたい

漫画やアニメのレビュー記事(タイトルに対するレビュー)というのは、基本的に『すでにその作品を知っている人』が検索から訪れます。

しかし、私としては、『まだその作品を知らない人』に「こんな面白い作品あるんだよ!」というのを伝えたいのです。

そうなると、現状のサイト構成はそういう人にあまり優しくない作りになっています。

一応似たような作品があれば内部リンクとかで紹介できるようにはしているけどさ。
サイト内検索も『名前を知ってないと使えない』もんな。

もうちょっとうまいこと面白い作品を紹介できないか。

私は当然自分の作品も読んでほしいですが、私が読んで「面白い」と思った作品もいろんな人に読んでもらいたいと思っています。

そこで、いろいろ悩みながら、なんとか来訪者がサイトを使いやすいようにできないかな、と試行錯誤してみることにしました。

プラグインで絞り込み検索を実装しようとするも挫折する

まず最初に考えたのは『絞り込み検索』です。

絞り込み検索というのは要するに、

  1. カテゴリーで絞り込み
  2. タグで絞り込み
  3. 結果表示

みたいなことができる機能のことを指します。

絞り込み検索機能を付けられる無料プラグインSearch & Filter

とりあえず最初はワードプレスのプラグインを探しました。

こういった絞り込み検索やカスタム検索は、良いものだと会社が有料で提供していたりするみたいで、いくつか有料のものと、そして無料のワードプレスプラグインを発見しました。

それが『Search & Filter』というプラグインです。

Search & Filterは機能は良いがデザインが微妙

一度これを使ってみたのですが、元機能は良いもののデザインがあまりよくなくて、最終的にはCSSをいじろうとして断念しました。

私のCSSの技術は、基本的に、

  • 人が書いてくれたものをなんとなく理解して
  • なんとなくいじれる

くらいのもので、一からコードを書けるような力はありません。

自分でCSSいじれるよーって人はこれを元にカスタムすると結構便利だと思います。

カスタムタクソノミーで絞り込み検索を実装しようとするも挫折する

ほかのプラグインも似たようなものだったので、プラグインは諦めます。

次に、いろいろ絞り込み検索について調べている中で見かけた『カスタムタクソノミー』という文言を調べてみました。

まあぶっちゃけ意味はよくわからなかったんですが、

  1. 記事に新しい定義を付け加えることで
  2. その定義を元に絞り込み検索とかできるようになるよ

的な機能のことを指すのだと思われます。

めっちゃ適当な認識!

これはプラグインを使わなくても、functions.phpなどをいじることで出来るみたいです。

ということでやってみました。

functions.phpをいじった結果、見事ブログが壊れる

ふぅ、焦ったZE☆

functions.phpというのは、カスタマイズを提供してくれている人がよく注意喚起をするファイルのことで、要するに、ワードプレスのテーマ機能の根幹を指すファイルです。

phpというのはなんかサーバーとの連携を定義してるうんちゃらかんちゃららしく、下手にいじるとブログがマジ真っ白になります。

私はテーマ機能から直接phpをいじるのですが、更新の直後に管理画面へアクセスできなくなってしまったので、さすがに焦りました。

どうしよう……

その2秒後に契約しているサーバー側からFTPソフト的なあれでphp関数を編集できることを思い出して、急いで追加した関数を削除。

なんとか元の状態に戻ることができました。

九死に一生を得るとはこのこと。

全体的にざっくばらんすぎる。

みんなphpいじるときはマジでバックアップをとっておけ。

あとネットで神カスタマイザーたちが公開してくれているカスタマイズを実装するときも、ちゃんとバックアップとって、自己責任で実装すること。

特に更新日が古いカスタマイズはよく注意したほうがいいぞ。ワードプレスの仕様が変わってたり、使ってる新しめのテーマと競合することもあるからな。

高度な検索機能は有料で提供される意味がよくわかった

そんなこんなでカスタムタクソノミーも断念。

ユーザビリティーの良い高度な検索機能が有料で提供される意味がわかった次第です。

でも私は諦めない!
お、おう。

良い作品に触れてもらうためには是が非でももうちょっと良い感じの検索を実装したい。

来訪者がもうちょっと受動的に作品を探せる機能を『やあ、葵です。』に追加したい。

視点を変えて『タグ』を活用することに

こうなると新しい定義づけをするのは難しい。

カテゴリーはすでに分けているから、カテゴリー以外の分類をより受動的に検索に活用できるようにしたい。

そんなとき、ワードプレスのタグ機能を思い出しました。

タグで要素を分解する

タグは作成するとタグページという記事一覧ページが作られます。

このページは固有のパーマリンクを持っているので、内部リンク的につなげれば疑似的な検索結果として使えることに今更気づきました。

ということで、「世界観が良い」や「戦闘が格好良い」などで作品を要素分解して、あらかじめ予想される検索結果として提供することにしました。

問題は使いやすさとデザイン

私はこの簡易的な検索機能をトップページに実装したいと考えていました。

それもできるだけスマートに、幅を取らないように。

というのも、すでにトップページには「新着記事」や「おすすめ記事」があって、これらの邪魔をするようでは意味がないと思ったのです。

あくまで付属的なツールとして実装したい。
欲張りなやつめ。

神カスタマイズを発見する

そんなこんなで他の人のブログを見ていると、ふとこんな記事を発見しました。

  • 横にスクロールできるテーブル(表)
  • スクロールできることを視覚的に説明
  • 行を削除することで縦幅を最小限にできる

このぽんひろさんのカスタマイズ記事を見たときにピンと来たのです。

\ここにボタンぶち込めないかな!/

発想がわりと大胆だな!

スクロールテーブルにボタンをぶち込んでみた

独自検索実装

できたわ。

スマホのファーストビューで下に「新着記事」の文字が見える状態で、一番上にツール的に独自検索機能を追加することができました。

使用しているテーマ『JIN』のデフォルトボタンだと枠線がかぶってしまったので、ボタンは別のCSSを使って設定。

ちなみにみんな大好きサルワカさんのCSSを使わせていただきました。

スクロール表示もちゃんと出る

二行にすると「スクロールできるよ」表示が見切れてしまうので、行は三行を維持。

特集ページは今後いろいろ作っていくつもりなので、ひとまず仮置きにしました。

デザイン的にもなかなか良いし、なにより縦幅を取らずにスクロールで横幅を自在に使えるのが最高。

さすがはぽんひろ神。

ちなみにスマホビュー時にヘッダー画像が追尾するのもぽんひろさんのカスタマイズだよ。

まとめ:絞り込み検索の代わりに独自検索機能を実装できた

おそらく、このスクロールテーブルの使い方はかなり特殊な使い方だと思います。

ほかの方は普通に比較表などで使っていると思うので、テーブルの中にボタンを無理やりぶち込んだのは私が初めてではないでしょうか。

ともあれ、視点を変えることで、応用が利くカスタマイズ。

なんてすばらしいんだ……。

このぽんひろさんのテーブルカスタマイズは、スマホビュー時の空間を拡張してくれる非常に優れたカスタマイズなので、みなさんも活用してみてはいかがでしょうか。