第2階層から探すウェブデザインギャラリー「2nds」を公開しました!

トップページではなく、第2階層のウェブデザインのみ集めたウェブギャラリーサイト2ndsを公開しました♫
http://2nds.watapopo.com/

ウェブ制作に携わる方の力になれればという思いで制作しました。
2ndSでは運営に協力していただける方も募集中ですのでお気軽にお問い合わせください!

…とはいえ私はエンジニアなのでここでは少しエンジニアっぽい話をしようと思います。

mouseoverで挙動が思い通りにならない時はmouseenter+ mouseleaveを使おう

今回PC版のメニューをコーディングした際に、

マウスオーバーでメニューの開閉、左上の×クリックでマウスオーバー時のメニューを閉じる

といった依頼があったので、当初はjQueryのmouseoverイベントを使って、メニューの動きを制御しようとしたのですが、マウスオーバー後に×をクリックしても、マウスを少しでもメニュー内に滑らすと再びメニューが開いてしまうという動きになってしまいました。
本来してほしい動きは、

  1. マウスオーバーでメニューの開閉
  2. ×クリックで、マウスオーバーで開いてたメニューを閉じる
  3. メニューの外をマウスが出るまではメニューは閉じたまま
  4. メニューの領域を出て、再度マウスオーバーでメニューの開閉を行う

といった流れですので、mouseoverイベントではなく、mouseenter+mouseleaveイベントを代わりに用いたところ、上記の動き通りの挙動をしてくれるようになりました。

JavaScript 日本語リファレンスの.mouseenter() ページのサイトによると

mouseoverは対象要素とその子要素に対してマウスが要素上に乗る度にイベントが発生しますが、 mouseenterは対象要素のみでしかイベントを発生させません。

という記載があるので、クリック後に再び要素出るまで他のイベントを起こしたく無い場合はぜひmouseenter+mouseleaveイベントを使ってみてください。

WordPressで無限スクロールを取り入れたい時はinfinity-scrollがおすすめ

こちらは割とたくさん取り上げられている有名なjsのプラグインですが、使いやすい(わかりやすかった)のでオススメしておきます。下記サイトにデモがあるのでよければみてみてください。
https://infinite-scroll.com/

ただ導入するにあたって一つだけ注意事項があるのでそれだけ記載しておきます。

cssが効かない場合がある。
横並びのコンテンツで右スペースを入れる際「nth-child(4n)」っていう4の倍数の要素だけ右のスペースを無くしてくれる便利な擬似要素がありますが、なぜかその状態でinfinity-scrollを導入すると謎の動きをします 笑
まだまだjsは勉強中なので原因は解明できていないのですが、今のところinfinity-scrollを使う際は、全てのリスト要素のスタイルを揃えておいた方がいいかもしれません…他に得策を知ってる方がいればぜひ教えてください♡

 

以上2ndsをコーディングするにあたり思ったことでした!

今後もKFNOちゃんと色々なサイトを作っていく予定ですので、ぜひお楽しみにしててください!!