JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー
ヘッダーなどのメニューによく使われるドロワー。このUIも数行のJavaScriptのコードで実装できます。 この記事では、ボタンクリックで画面を覆い隠す形のドロワーの作り方について解説します。 目次.style.widt …
JavaScriptのfor文を使ったループでボタンクリックの絞り込み検索
繰り返しの処理を行う場合、JavaScriptの for文 を使います。 今回は、比較的要素が多いシチュエーションで、この for文 を使った「絞り込み検索」のスニペットを紹介します。 目次for文のループボタンで絞り込 …
JavaScriptのsessionStorageでそのページへ初回アクセス時にモーダルを表示
あまりユーザーライクなものではありませんが、初回閲覧時に「モーダル」を表示するスニペットです。 既にこの記事をご覧の方はモーダルが表示されたと思いますが、そのサンプルについてのコードを交え解説していきます。 目次sess …
CSSのFlexboxで作るWordPressの記事一覧レイアウト6選
記事一覧に表示される記事のリンクには、投稿日や記事タイトルだけでなく、アイキャッチ画像や、概要文を載せているものがあります。 これらは、WordPressのテーマによってデザインやレイアウトがそれぞれ異なり、当サイトでも …
JavaScriptの.classList.toggleでクリックしたボタンを識別して表示の切り替え
複数のボタンを設置して、どれかのボタンクリックで表示を切り替える時に、そのボタンを「ON」にする表示をネイティブのJavaScriptで書いてみます。 目次.classList.toggle()と.classList.r …
JavaScriptの.previousElementSiblingでボタンをクリックしてコンテンツを展開
ブログでよく見る「もっと見る」で記事を全展開するオブジェクトを、JavaScriptで作ります。 サンプルも交え解説していくので、是非参考にしてみてください。 目次.previousElementSiblingボタンクリ …
JavaScriptの.addEventListener()でhoverした時ツールチップを表示
ツールチップは、要素の上にhoverすると表示される吹き出しで、CSSだけでも作ることはできますがJavaScriptならコード量少なめで簡単に作ることができます。 そんなJavaScriptのツールチップの作り方につい …
JavaScriptの.addEventListener()のスクロールで閲覧中の見出しタグを取得して目次の色を変える
WordPressには、インストールするだけで h タグから目次を生成するプラグインがあります。これを静的なページで同じようなことをしようと思うと、プラグインはもちろん使えないので、何か動的なコードを仕込む必要があります …
JavaScriptの.addEventListener()のスクロールで左から右に背景色が伸びてテキスト表示
JavaScriptの .addEventListener() のスクロールで、その要素に到達した時にアニメーションでテキストの上を背景色が覆うスニペットを作りました。 ごくシンプルな動きで、そこまで主張が強くないアニメ …
WP REST APIで取得した記事をカテゴリー別にタブで分けて表示
WP REST APIは、WordPressの4.7から使えるようになった「外部からWordPressにアクセスすることができる」便利な機能です。 このWP REST APIとタブを、ネイティブなJavaScriptで、 …
