プラグインなしでカスタムタクソノミーをプルダウンで掛け合わせたWordPressの絞り込み検索
前提として、通常の投稿タイプに、追加でカスタム投稿を追加。そして、カスタム投稿をカスタムタクソノミーで分類。 そして、「検索キーワード」と「カスタムタクソノミー」を必要に応じて掛け合わせて検索ができるスニペットをこの記事 …
JavaScriptのlocation.reload()でページの更新
ブラウザの再読み込み（更新）を行うボタンを、JavaScriptのコードで作ってみました。 目次location.reload()location.reload()を使ったページ更新のサンプルページ更新のコードもっと簡単 …
JavaScriptのwindow.openでウィンドウのサイズを指定して表示
少し古い挙動で、そこまで使用頻度の高いものではありませんが、JavaScriptのwindow.open のウィンドウ表示をするスニペットを作りました。 目次window.openwindow.openの詳しい解説記事w …
JavaScriptの.scrollIntoView()のクリックでスムーススクロール
JavaScriptの.scrollIntoView() メソッドを使って、コード量少なめでできるスムーススクロールを作ってみました。 目次.scrollIntoView()スムーススクロールのサンプルスムーススクロール …
JavaScriptのMath.random()で画像をランダム表示
JavaScriptの Math.random() メソッドを使って画像をランダム表示させるスニペットです。 目次Math.random()Math.random()で画像をランダム表示のサンプルランダム表示のコード M …
CSSのanimationプロパティでできるアニメーション20選
マークアップ言語は非常に奥が深く、いろんな表現やアニメーションも簡単な記述でできてしまうので、知識のアップデートは欠かさず行うようにしています。 そこで今回の記事では、よく使うCSSのアニメーションを20個紹介します。 …
JavaScriptの.addEventListenerスクロールでプログレスバー
プログレスバーは、「ユーザーが記事やコンテンツをどの辺りまで読んでいるのか？」が視覚的に分かるUIです。 そんなプログレスバーを、ネイティブのJavaScriptで作ってみました。 目次.addEventListener …
JavaScriptの.toLowerCaseで絞り込みインスタント検索
サイト内検索を作ろうと思うと、データベースとの連携設定が必要だったりと、なかなか苦戦しますが簡易的な絞り込み検索であれば、JavaScriptで実装可能です。 この記事では、そんな絞り込みのインスタント検索をJavaSc …
JavaScriptの.classList.toggle()でよくある質問のアコーディオン
よくある質問は、Google検索でも回答の一覧がリッチリザルトとして表示されたりするので、重要なコンテンツです。 この記事は、.classList.toggle()を使ったネイティブJavaScriptで作った「よくある …
JavaScriptの.addEventListenerのクリックでドロワーメニュー
ドロワーメニューは多く見るUIで、ボタンをクリックすると横からスライドしてメニューなどのコンテンツを出すことができます。 この記事は、.addEventListenerを使ったネイティブJavaScriptのドロワーメニ …
