ドンさん、こんにちは。
まず、このテーマは本当に素晴らしいです！最近、地元の教育コミュニティ Jiwa.now 向けに FKB Pro をデプロイしたのですが、カードベースの UI は美しく、非常にプロフェッショナルな仕上がりです。
モバイル環境でテストしている際、トピックカードのクリック領域に関する UX の問題に気づきました。現在、クリック可能な領域が一貫していません。例えば、カードの端をクリックするとトピックに遷移しますが、アバターの右側の空白部分やフッターの中央部分など、他の空白部分をクリックしても何も反応しません。
この「当たるか外れるか」のような操作感はユーザーを混乱させ、単にフィードをスワイプしてスクロールしようとした際に誤クリックを引き起こす原因にもなります。
今後のアップデートへの提案： もしテーマ側でデフォルトとしてこれを改善できれば、UX が向上するでしょう。具体的には、トピックに遷移するクリックを「タイトル」「画像」「抜粋」といった核心コンテンツのみに絞り込み、カードの背景自体はクリック無効化することで、スワイプ時の誤クリックを防ぐことです。
それまでの間、私のユーザーにとってモバイルのタッチ操作を 100% 確実なものにするため、pointer-events を使った「ホワイトリスト方式」の CSS スニペットを作成しました。これはカードの背景へのクリックを完全に無効化し、実際のインタラクティブな要素にのみクリックを再有効化するものです。
タッチターゲットの改善を検討されている方の参考になればと思い、また開発者の方々にとって役立つリファレンスになるかもしれないと思い、ここに共有させていただきます。
/* モバイルのカードクリック/タッチ競合の修正（スマートなホワイトリスト方式） */
/* 1. スワイプ時の誤クリックを防ぐため、カード全体の背景を無効化 */
.topic-list-item {
pointer-events: none !important;
}
/* 2. 全てのネイティブリンクとボタン（アバター、タグ、タイトル）を再有効化 */
.topic-list-item a,
.topic-list-item button {
pointer-events: auto !important;
}
/* 3. 画像クリックを再有効化 */
.topic-list-item .topic-image,
.topic-list-item .topic-thumbnail,
.topic-list-item img {
pointer-events: auto !important;
cursor: pointer !important;
}
/* 4. フッターの統計情報エリア全体を再有効化 */
.topic-list-item .topic-item-stats,
.topic-list-item .topic-footer,
.topic-list-item .post-activity,
.topic-list-item .activity,
.topic-list-item .num,
.topic-list-item .topic-meta-data {
pointer-events: auto !important;
}
/* 5. 重なっている stretched-link 疑似要素を無効化 */
.topic-list-item .main-link::before,
.topic-list-item .main-link::after {
pointer-events: none !important;
display: none !important;
}
ありがとうございます！
レオ