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 …
JavaScriptの.querySelectorAll()でページのhタグを取得してモーダルに目次を生成
JavaScriptの.querySelectorAll() を使って、よくブログの記事の冒頭に設置される「目次」をネイティブなJavaScriptで生成して、それをモーダルの中に表示させてみます。 jQueryのライブ …
JavaScriptの.createElement()で要素を追加して.insertBefore()で挿入
.createElement()は、JavaScript だけで DOM を生成して描画するメソッドです。 このメソッドを使って要素を生成しただけでは何も描画されないので、.insertBefore() のメソッドと併用 …
JavaScriptの.toLocaleString()で数字の桁数を3桁カンマ区切り
金額を表記して桁数が多かった場合、その数字の3桁毎にカンマをポチポチ目視で打つのは地味に大変です。 そんな時、JavaScriptの .toLocaleString() という便利なメソッドで「3桁カンマ区切り」を一瞬で …
JavaScriptのwindow.alert()にdocument.titleでページのタイトルをアラート表示
JavaScriptの window.alert() を使って、ウィンドウのアラート表示にページのタイトルを表示させてみます。 このスニペットについて解説していきます。 目次window.alert()とdocument …
