JavaScriptの.createElement()でhタグを取得して目次を作成
ブログには使われることが多い「目次」を、ページ内の h タグを取得して表示させます。この動的なものを、ネイティブのJavaScriptで実装してみます。 .createElement() JavaScriptの.crea …
JavaScriptの.getBoundingClientRect()で蛍光マーカー風の下線
ブログの記事内で、強調をしたい箇所によく使われる「蛍光マーカー風の下線」を、スクロールして表示領域に入ったら表示されるスニペットをネイティブなJavaScriptで作ってみました。 色の変更や、カスタマイズも比較的簡単な …
JavaScriptのwindow.alert()でアラート表示
JavaScriptの window.alert() を使って、ボタンクリックでダイアログを表示します。 あまり使うことはないかもしれませんが、そんなアラート表示について解説していきます。 window.alert() …
JavaScriptの厳密等価演算子 ( === )で指定した文字列を持つタグにclassを付与
WordPressでも、同じ処理を何回か繰り返したい場面によく使う「ループ」は、JavaScriptでもforなどの構文で、あります。 この記事では、JavaScriptの厳密等価演算子 ( === )と、そんなループを …
JavaScriptのstyle.displayでスライドショーっぽいカルーセル
JavaScriptのstyle.display で「display:block」と「display:none」のプロパティの切り替えを行った、スライドショーのようなカルーセルです。 style.display Java …
JavaScriptのsetTimeout()でフェードさせながら画像の切り替え
JavaScriptの setTimeout() メソッドを使って、複数の画像をフェードイン・フェードアウトさせながら切り替えるスニペットを作ってみました。 setTimeout() JavaScriptの setTim …
プラグインなしでもっと見るをクリックで表示される記事リストのサンプル
最近のことで言うとWordPressのバージョンアップデートで、できることがさらに拡充されており、ノーコードで色々できることが増えているのは嬉しいところです。 そんなアップデートでできることが増えている今日この頃ですが、 …
プラグインなしでアイコンをクリックすると WordPressの検索フォームが拡大されて 表示されるスニペット
検索フォームは、WordPressにも標準で付いていますがデフォルトの状態はベタでそのまま表示されます。 この検索フォームを、多少のアニメーションを使い「虫眼鏡アイコンをクリックすると、フォームがヒョイっと拡大されて現れ …
JavaScriptの.querySelectorAll()で複数のタブ
タブは、ページのコンテンツを切り替える場合に使われるUIで、画面の切り替えも容易でにできます。 CSSだけで実装することも可能ですが、JavaScriptを使うと記述がシンプルで分かりやすいのでおすすめです。 そんなタブ …
JavaScriptのlocation.hrefでドロップダウンメニューのリンク
JavaScriptの location.href を使って、リンク一覧のドロップダウンメニューを作ってみました。 location.href locationで取得できる情報は複数ありますが、location.href …
