まずはこちらから、
こんにちは！えんぺ太郎です。
３月の終わりに近づき、急に暑くなってきましたね。
やはり日本には冬と夏しかなくなったのでしょうか…？
さて、今回はちょっと力を入れて取り組んだ制作についてご紹介します。
みなさんは上の３枚の画像にかかるエフェクト、見たことがありますか？
マウスをのせたり、スマホでタップすると、ふわっと画像にオーバーレイがかかるエフェクト、一見するとよくある演出ですよね。
ただ、これをWordPressの投稿（ブログ）のアイキャッチに設定するには、思った以上に時間と手間がかかりました。
🔶試行錯誤の過程
令和7年の年末年始には、「投稿のアイキャッチにこのエフェクトをつけるには、どうしたらいいだろう」とずっとやってました。
最初は以下のような流れで取り組みました。
- プラグインでは、ちょうどよいものが見つからなかった。
- ライブラリーも試したが、希望の挙動には合わなかった。
- 結果的に、コードでの自作に踏み切ることに
HTMLとCSSを使って単独のボックスを作成するだけなら、それほど難しくありませんでした。
それなら「なんが難しかったの？」と思う方がいらっしゃるかもしれませんが、
これをWordPressのブロックテーマに組み込むのが非常に大変でした。
🔶ブロックテーマ特有の課題
ブロックテーマでは、ブロックを選んで配置するだけでページが作成できますが、
その裏側では予想しないHTMLやCSSのコードが自動生成されます。
そのため、以下の手順で対応しました。
- 自動生成されるコードを把握する
WordPressの編集画面ではなく、実際に表示されたページのHTMLをブラウザの開発ツールで確認 - CSSで調整
取得したコードをもとに、カスタムCSSを適用してデザインを修正
この作業を何度も繰り返し、ようやく完成させることができました。
🔶小さな工夫が、SEOにも影響する？
ちなみに、こういったオーバーレイやホバーエフェクトは、見た目の演出だけでなく、
ユーザー体験（UX）を高めることでSEOにも間接的に良い影響を与えることがあります。
たとえば：
- ページの滞在時間が伸びる
- 内部リンクのクリック率が上がる
- モバイルでも快適に閲覧できる設計が評価される
ただし、エフェクトが重すぎるとページ速度に影響するため、軽さとバランスを意識することが大切です。
🔶今後について
実は、アイキャッチを横に並べ、スクロール時に遅延をつけて表示させるような演出も考えているのですが、
以前紹介したOtterなどのプラグインでも対応が難しく、こちらもコードでの実装になりそうです。
少し時間がかかりそうなので、また完成したらご紹介したいと思います。
今日はここまで！
本日も最後までお読みいただきありがとうございました。