JavaScriptの.preventDefault()でaタグのリンククリックで離脱防止のモーダルを出してOKでページ遷移
今回は、BtoBの申し込みフォーム・資料ダウンロードフォームでよく見る「離脱防止」で表示されるモーダルをJavaScriptで作ってみます。 関連記事 モーダルの基本的な使い方とデザイン モーダルは、強制力が強くユーザー …
WP REST APIでキーワード検索をしたら非同期で検索結果を表示
「外部からWordPressにアクセスすることができる」WP REST APIを使って、この記事では検索を作ってみます。 デフォルトで使える「WordPress検索の代替え」にも使えるので、最後までご覧いただけると嬉しい …
プラグイン無しでシナリオ型のチャットボットを表示するスニペット
シナリオ型のチャットボットは、ユーザーの選んだ質問の選択肢に対して、あらかじめ決められた回答を返してくれるボットで、よくECサイトで見かけます。 今回の記事では、そんなシナリオ型のチャットボットの作り方とコピペ用コードに …
プラグイン無しで送信された質問に自動応答する辞書型のチャットボットを表示するスニペット
簡単にWordPressへチャットボットを導入できる「Chatbot with IBM Watson」のようなプラグインがあります。今回の記事では、そんなプラグインを使わずに、WordPressへ「チャットボット」を導入 …
JavaScriptのwindow.pageYOffsetでスクロール量に応じてパララックスエフェクト
パララックスエフェクトは、通常のウェブページと比べて動的な印象を与えることができます。 中でも、背景画像を用いたパララックスエフェクトは、コンテンツの重要性を強調して、ウェブページの視覚的な魅力を高めることができます。 …
JavaScriptの.includes()で指定URLが部分一致した場合にnoindex,nofollowを付与
noindex,nofollowを正しく設定して、検索結果での表示の仕方や、クローラー（検索エンジンのロボット）の動きを制御します。 今回は、デザインリニューアル時や、テストと本サイトのコンテンツが一致してしまう時に使え …
JavaScriptの.addEventListenerクリックでページ下部にsnackbarを表示
Googleのマテリアルデザインでも登場する「snackbar」は、1つだけアクションを持つことができるUIで、インタラクションなUI設計で、自分も使ったりします。 似たようなUIに「toast」がありますが、「toas …
プラグイン無しでWordPressの投稿ページ・固定ページを個別に複製できるスニペット
WordPressで記事の複製は、プラグインの「Yoast Duplicate Post 」や、「Duplicate Post」が有名で、公開済みの記事や下書きとして保存してあるページを元に、複製した記事を作成できます。 …
JavaScriptのsetInterval()でページ上部にプログレスバーを表示
プログレスバーは、ユーザーが長い時間を要するタスクの進行状況を視覚的に把握でき、邪魔にもならずユーザーの体験を向上することができます。また、待ち時間のストレスも軽減できます。 今回は、そんなプログレスバーをsetInte …
JavaScriptのscreenでモニターのサイズを取得してアラート表示
今回は、Javascriptの screen プロパティで、使用しているモニターのサイズを取得して、ブラウザの上部にアラートで上部に表示させます。 目次screenモニターのサイズを取得してアラート表示するサンプル実装の …
