ネットワークの有り難みをメモしています
ワードプレスのWP MW FORMは、独自にvalidateができるのだけど、訳があってでこちらのvalidationを使わずに、独自のvalidateをつけることになった。そうなると、候補としては「jquery.validate.js」がワタシの中では筆頭。設置も簡単で、カスタマイズも豊富。ただ、ラジオボタンの値によって条件分岐を入れる必要があって、WEBで検索して独自に設置してみたが、送信機能 […]
クライアント案件でワードプレスの注文フォームを作成することになり『Caluculated Fields Form』を利用しました。無料でも計算部分は利用できますが、メール送信するには有料版が必要です。ただ、買い切りタイプで価格も良心的。2023年現在は、サイト数も制限なしのようなので、購入して損はないと思います。 基本的な使い方は直感的で分かりやすいのですが、サンクスページに送信内容を表示する方法 […]
ちょっと珍しい事象に遭遇しまして、解決に少し手間取りました。 ワードプレスのメニュープラグイン（max-mega-menu）で、ボタンのhoverの処理をしていました。メニューの中に2つほど外部リンクがあったのですが、クリック後クリック元の画面内でマウスを動かすまで、hoverの効果が消えません。これを修正して欲しいとの依頼。max-mega-menuの設定は一旦解除し、自作のCSSを適用させて色 […]
ワードプレスの会員制サイト制作用のプラグインには、フリーでも十分使えるものがいくつかありますが、今回は「WP-Members」を利用した案件です。他のプラグインでも使える方法ではないかと思います。 クライアントの希望は「ユーザー名に日本語を使いたい」ということだったのですが、ワードプレスの仕組み上これが出来ないことを説明し、さらにニックネームをつけて、表示名に選ぶことが出来ると伝えたところ、「登録 […]
データ属性で、一覧の記事を絞り込むサンプルです。属性を選ぶボタン（category-btn）と絞り込まれる要素（flex-one）の一覧になっています。is-animateクラスは、自分で作成したクラスです。若干不要な記述が入っていますが・・・ キーワード A B 要素 要素 要素 .category-btn{ list-style:none; display:flex; margin:40px […]
ページを移動せずに特定の投稿記事を読み込みしたい、と言われたら、Ajax通信ですよね。ということで、初めてワードプレスでAjax通信で記事を読み込んでみました。類似のケースの依頼が見込まれるので、メモしておきます。 以下のサイト等を参考にしています。https://engineering.dn-voice.info/blogwordpress/ajax/https://pinkmonky.net/ […]
jQueryのプラグインなどで非表示にして、アニメーションで表示させるような処理をしているのに、サイトを開いた時一瞬要素が全部見えてしまうことがあります。クライアントはこういうのを結構指摘してきますし、私自身もなんかな、と思うので良い対処法を探したところ、様々な場面で使いやすい方法をアップしてくれている記事を見つけました。https://myscreate.com/textillate-fix/ […]
使い所によって楽しい効果が簡単に出せるstickyですが、親要素にoverflow-x:hiddenを設定しているとうまく動かないことがあります。個別に親要素を指定するのは大変なので、jQueryのparentsでoverflow-x:visibleを使うと動くのですが、スマホの画面の左右が動いてしまう。というわけで、PCやタブレットのときだけ、親要素をvisibleにするときのメモです。
昨今流行りの「ペライチ」（別に昨日今日の流行りではないのですが、クライアントでさえ、この言葉を注文時に使う今日この頃です）では、アンカーリンクが必要になる場面がほとんどですが、アンカーに対して、ぬるっとスクロールさせるJavascriptをかませると、必ずといっていいほど問題が2〜３出てきます。毎度悩まされて、似たような解決策をなんとなく使っているので、定義づけしておこう！ 原因は、jQueryの […]
cssアニメーションはとても便利なのですが、アニメーションをいつ発動させるかは、CSSだけでは操作できません。そこで要素が画面内に入ったことをシンプルに判定したい。そんな時は「inview.js」の出番です。 使用方法の基本も簡単です。（1）CSSの@keyframesでアニメーションをつくる。（2）(1)のアニメーションを適用するCSSクラスをつくる。（2）inview.jsで、可視領域に入った […]
