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で、 …
JavaScriptの.classList.add()でローディングアニメーション
ページ切り替え時のローディングアニメーションは、CSSでアニメーションの見た目を整えて、JavaScriptで発火のタイミングを指定します。 これらは結構簡単な記述でできます。 そんなローディングアニメーションの作り方に …
WP REST APIでACFのカスタムフィールドを取得して表示
「ACF | Advanced Custom Fields」は、簡単にカスタムフィールドを作ることができるWordPressの定番とも言えるプラグインです。 そんなACFを使っているサイトから、WP REST APIで情 …
JavaScriptのSwiperを使ってWP REST APIで出力した記事一覧をスライダー表示
とても便利なWP REST APIに、JavaScriptライブラリ「Swiper.js」を絡めて記事一覧をスライダーにしてみます。 コード量は多いですが、分解していくと簡単です。これらを実際のサンプルと絡めて解説してい …
WP REST APIで特定の記事を指定してその記事の本文を表示
WordPressにもWP REST APIというAPIが標準で搭載されており、これを活用することでいろんなことができます。 この記事では、そんなWP REST APIで特定の記事を指定してその記事の本文を表示する方法に …
WP REST APIで記事一覧を表示
以前、WP REST APIを使った記事を書きましたが、jQueryだったので、この記事ではネイティブなJavaScriptとWP REST APIを使って記事一覧を出力できるスニペットです。 簡単な記述でできる内容です …
JavaScriptの.createElement()で目次を生成して.nextElementSiblingでその目次をアコーディオン
JavaScriptで記事内の h タグから目次を作り、それをアコーディオンにして開閉させます。 コード量が多めですが、順に解説していきます。 目次.createElement()と.nextElementSibling …
