カスタムタクソノミーとタームで条件分岐
CPT UIで設定できるカスタムタクソノミーを使って、ターム毎の条件分岐の方法についてご紹介します。 目次一致するタームで条件分岐して出力条件分岐の記述方法や設定方法ターム名の出力や記事一覧の出力 一致するタームで条件分 …
JavaScriptのstyle.displayでモーダル
JavaScriptの style.display で、要素のdisplayプロパティを変更できます。この記事では、そのプロパティでモーダルを作ります。 目次style.displaystyle.displayを使ったモ …
JavaScriptの.classList.toggle()でアコーディオン
JavaScriptの .classList.toggle() を使ってアコーディオンを作ります。 目次.classList.toggle().classList.toggle()を使ったアコーディオンサンプルアコーディ …
JavaScriptの.replaceで文字列の置換
.replace メソッドで、指定した文字列を任意の文字列で置換します。 目次.replace.replaceを使ったサンプル.replaceを使ったコード .replace .replaceメソッドは、指定した文字列を …
JavaScriptの.addEventListenerのスクロールでclassの追加と削除
マウスクリックや画面をスクロールした時に、.addEventListener で状態を取得してDOM操作をします。 目次.addEventListener.addEventListenerスクロールを使ったサンプル.ad …
JavaScriptの.classListを使ったclassの削除や追加
.classList で、要素のclassを削除したり、追加したりすることが可能です。 目次.classList.classList.toggle()を使ったサンプル.classList.toggle()を使ったコード …
JavaScriptの.remove()で要素の削除
.remove() を使うことで要素の削除が可能です。ここでは、JavaScriptの.remove() を使ったサンプルと合わせて解説します。 目次.remove()を使ったサンプル.remove()を使ったコード.q …
スライダーの超定番ライブラリSwiper.jsの基本と使い方
スライダー・カルーセルは、複数の選択肢やコンテンツを列で表示させるUIで、限られたスペースにたくさん表示させたい時によく使われます。 この記事は、スライダー・カルーセルUIの超定番とも言えるSwiper.jsについて解説 …
jQueryのコピペでヘッダーにアニメーションをつけて固定表示させるスニペット
ヘッダーは、主にページの上部に位置するコンポーネントで、サイトやブログなら各メニューを表示したり、どのページが開かれても常に共通して表示されます。 この記事は、そんなヘッダーを少しカスタマイズするスニペットで、特にブログ …
プラグインなしで記事毎のbody閉じタグ前にJavaScriptのコードを出力させるフィールドを作るスニペット
JavaScript（以降JSと省略します）を記述する場所は、<body>〜〜</body>タグの最後(クロージングタグ前)に書くことが推奨されています。 この記事で紹介するスニペットは、コピペするだけで記事 …
