カッコいい系や高級感を出したいときなどに余白を大きくとったデザインをしたくなるときがありますが、そんなときに便利なのがスクロールスナップです。ブロック単位でしかスクロールできなくなりますので、こちらが意図したデザインをユーザーに見せることができます。できるだけシンプルに作ってみます。
スクロールと連動して背景画像が拡大するエフェクトを実装してみます。併せてbackground-size:cover; background-attachment:fixed;と同じエフェクトも実装してみます。jQueryで再現しますのでデスクトップとスマートフォンの両方で同じ動作になります。
スクロールと連動させて画像が切り替わるエフェクトを実装してみます。切り替わる際に使用するマスクを平行四辺形にすることで斜めから徐々に画像が切り替わっていくようにします。レスポンシブ対応にするためにwidthやheightなどもjQueryで動的に設定していきます。
SEO対策と言いますとワードプレスの場合は便利なプラグインがいろいろありますが、今回は遅延読み込み対策以外はプラグインを使わずに改善施策を実施しました。遅延読み込み対策もワードプレスプラグインではなくjQueryプラグインを使用しています。実際におこなった施策とその効果をご報告します。
前回はページビューを記録する機能をワードプレスに実装しましたので、今回はその記録されたページビューのデータを使用して記事一覧ページの表示順をページビュー順に変更してみます。併せて、最終更新日順やメニューオーダー順でも並べ替えられるようにし、これらを画面の再読込なしで切り替えられるようAjaxで実装します。
ワードプレスで多言語サイトを制作する場合で言語が日本語を含めて3語以上になりますとインターフェースにも工夫が必要になってきます。将来的に言語を増やす可能性も考慮すると言語が増えても対応できるインターフェースにしておきたいものです。
ワードプレスにはカスタムメニューという機能がありますが、オリジナルでグローバルナビゲーションを作成したり、画像を使用したナビゲーションを一から作る場合に役立つ正規表現の使い方をご紹介します。
複合検索(絞り込み検索)の実装後編ではループ表示とページング機能を作るとともに、JavaScriptとAjax(jQuery)を使用してより使いやすい複合検索(絞り込み検索)フォームにしてみたいと思います。ワードプレスではAjax用のリクエストルートも用意されていますので確認していきます。