WEB

カスタム投稿で他の投稿を取り込みつつページャーもうまく動く環境作り

業務でWordPressを構築していると様々なニーズがあります、タイトルの様な変化球もよくある要望の1つです。 今回、備忘録として記事に残していますが憶測がやや含まれますので、もし記事中に間違いがあるようでしたらコメントやTwitterでお...
WEB

GSAPのScrollTriggerを使ったスクロールアニメーションの動作を一度きりにするプロパティ

最近積みそうになったのでメモ書き。上記について調べると大体は下記のプロパティに対する解説が主な印象があります。 toggleActions 値形式:文字列デフォルト値:play none none none左から順番にonEnter、onL...
WEB

Next.js(TailwindCSS入り)プロジェクトを最速で立ち上げる手法

サクッと用意出来てコーディングに集中出来るように現時点での最速構築方法をまとめています。各バージョンによってはインストール方法が変わる可能性がありますので要注意してください。 環境バージョンmacOSv12.3.1Node.jsv14.18...
WEB

WordPressのテーマ内でショートコードを呼び出す方法

WordPressプラグインでショートコードを投稿や固定ページ本文に貼り付けるのが基本のようだが、開発としては自身のテーマ内に書くのが殆ど。作業するときにいつも忘れるのでメモ。
WEB

JavaScriptをCSSのメディアクエリのような感覚で処理を分ける

CSSのメディアクエリのようにJavaScriptの処理を分けたいという要件は割とよく出てきます。そんなときによく使うコードは以下。 window.matchMedia
WEB

WooCommerce利用サイトでユーザーページにログイン・パスワード変更後にログインできなくなった場合の対処方法

WooCommerceではユーザー登録機能を追加するわけでは無くWordPress本来の機能を使いますので、原因はSiteGuardなどセキュリティ向上用途でログイン方法に変更が加わっている場合であることが多いです。 要はSiteGuard...
WEB

ウィンドウの高さを取得後に要素へ代入する

よく使うメモ。 スマートフォン用に高さ 100vh とか使いたいところですが、CSSによっては適切に高さが設定されずに 0 となってしまうのでJavascriptで対応してしまうと考える手間が省けるのでお薦め。
WEB

ウィンドウサイズで画像の表示をJavascriptで切り替える

最近よく利用するのでメモがてら。 以下コード入れて、imgにクラス .js-resp 付与すると画面サイズで切り替えます。 画像にはファイル名の後ろに _pc と _sp と命名すればOK、HTMLに記述する場合には _pc の方のみを記述...
WEB

フルスクリーン表示からスクロール後にナビなど表示させたい場合のTip

ファーストビューがフルスクリーン表示されていて、スクロール後に固定ナビなどを表示したい際などを想定。 スクリプトは主にスマートフォンサイトを想定していますが、PC表示でも問題は無いはず。 用途に応じて適宜調整すれば良いと思います。 更に、ト...
WEB

Slick.js スマートフォン表示時だけ適応させたい。

丁度使う機会があったのでメモ。