JavaScriptのstyle.displayでスライドショーっぽいカルーセル
JavaScriptのstyle.display で「display:block」と「display:none」のプロパティの切り替えを行った、スライドショーのようなカルーセルです。 目次style.displaysty …
JavaScriptのsetTimeout()でフェードさせながら画像の切り替え
JavaScriptの setTimeout() メソッドを使って、複数の画像をフェードイン・フェードアウトさせながら切り替えるスニペットを作ってみました。 目次setTimeout()フェードさせながら画像の切り替えの …
プラグインなしでもっと見るをクリックで表示される記事リストのサンプル
最近のことで言うとWordPressのバージョンアップデートで、できることがさらに拡充されており、ノーコードで色々できることが増えているのは嬉しいところです。 そんなアップデートでできることが増えている今日この頃ですが、 …
プラグインなしでアイコンをクリックすると WordPressの検索フォームが拡大されて 表示されるスニペット
検索フォームは、WordPressにも標準で付いていますがデフォルトの状態はベタでそのまま表示されます。 この検索フォームを、多少のアニメーションを使い「虫眼鏡アイコンをクリックすると、フォームがヒョイっと拡大されて現れ …
JavaScriptの.querySelectorAll()で複数のタブ
タブは、ページのコンテンツを切り替える場合に使われるUIで、画面の切り替えも容易でにできます。 CSSだけで実装することも可能ですが、JavaScriptを使うと記述がシンプルで分かりやすいのでおすすめです。 そんなタブ …
JavaScriptのlocation.hrefでドロップダウンメニューのリンク
JavaScriptの location.href を使って、リンク一覧のドロップダウンメニューを作ってみました。 目次location.hreflocationで取得できる情報location.hrefでドロップダウン …
JavaScriptの.querySelectorAll()で複数のモーダル
モーダルウィンドウを、同一ページで複数表示させる場合に .querySelectorAll() を使うとモーダルの数の追加や修正が簡単です。 そんな「複数のモーダル」を作る際のJavaScriptのネイティブなスニペット …
JavaScriptの.querySelectorAll()でマルチレベルのアコーディオン
マルチレベルのアコーディオンとは、例えば「アコーディオンxアコーディオン」のように、各レベルをクリックすると、徐々にそれぞれの新しいレベルが表示されるアコーディオンです。 そんなマルチレベルのアコーディオンを、ネイティブ …
【コピペで簡単】プラグインなしでできるWordPressのカスタマイズまとめ
WordPressでブログやサイトを作成していく時、デザインはもちろんのこと、機能を追加してWordPressをカスタマイズしたくなったことはないでしょうか？ この記事は、WordPressのカスタマイズを「プラグインな …
プラグインなしでカテゴリの親子階層をアコーディオンで出力
ブログで記事が増えてくると、カテゴリーもそれに比例して深くなりがちで、それらを全て表示するとかなりの長さになってしまいます。 以前、以下の記事でそんなカテゴリの表示カスタマイズをjQueryで行いました。 打って変わって …
