背景

今回はサイトに「ちょっとしたユニークさ」を足すための、装飾系プラグインを作ってみました。

きっかけは、「サイトにペットのような癒しを足したい」という思いつきです。ただ、演出系のプラグインには、重い、文字が読みにくくなる、クリックの邪魔になる、といった心配がつきものです。そこで、軽さと読みやすさ、操作性を最優先にして作ることにしました。

何を作ったか

「あしあとカーソル（FootprintCursor）」という名前で、以下の機能を持たせています。

  • カーソルの移動に合わせて、足跡が左右交互に歩くように並ぶ
  • 足跡はカーソルの進行方向に合わせて回転し、約2秒でフェードアウトして消える
  • 足跡は6種類（猫の肉球・犬・靴・鳥・恐竜・ランダム）
  • サイズ、色、不透明度、歩幅などを管理画面から調整できる
  • 画面右下の切り替えスイッチで、閲覧者がその場で表示のオン・オフを選べる
  • 遊び要素を3つ搭載（スピード連動・クリックでスタンプ・放置イベント）

遊び要素は、すべて初期設定ではオフです。

  • スピード連動：速く動かすと足跡が大きく、歩幅も広くなります
  • クリックでスタンプ：クリックした場所に大きな足跡をぽんと押します
  • 放置イベント：カーソルを10秒動かさないと、猫の足跡が丸く並んで「zzz」が出ます。猫が寝ているイメージです

こだわったポイント

1. 管理者は導入するだけ

プラグインを有効化するだけで、猫の肉球の足跡が表示されます。ショートコードの設置も、ページごとの指定も必要ありません。初期値は、文字が読みにくくならない控えめなサイズと濃さにしてあるので、設定を触らなくてもそのまま使えます。

2. 難しい設定は極力減らす

調整項目は、足跡の種類、サイズ、色などの見た目に関わるものに絞りました。サイズは「小・中・大」から選ぶだけでも指定できます。数値を入力する項目は、範囲外の値を入れても保存時に自動で範囲内へ収めるので、設定ミスで表示が崩れる心配はありません。遊び要素もすべてオフで始まるので、使いたいものだけオンにすれば大丈夫です。

3. シンプル設計

表示は全ページ共通にして、ページ別の指定・除外といった細かい設定は、あえて入れていません。足跡はクリックを透過し、標準のマウスカーソルも隠さないので、サイトの操作性を損ないません。苦手な人のために、画面右下に小さな表示・非表示のスイッチを置き、「視差効果を減らす」設定が有効な方には自動で非表示にしています。

使ってみたい方へ

導入方法や設定画面の操作手順は、使い方マニュアルにまとめています。設置してみたい方はあわせてご覧ください。