プラグインなしで会員のみが閲覧可能なWordPressを構築するスニペット
WordPressで会員限定のサイトを作る場合、プラグインを入れるだけで構築できてしまいますが、今回は、会員限定のサイトをプラグインなしで作ってみます。 当サイトでも使っているWordPressテーマ「SANGO」をベー …
楽天市場商品検索APIで任意のキーワードの商品一覧を表示
楽天市場もAPIを提供しています。そんな楽天市場のAPIを「KOKONIARUKOTO.」さんのブログを参考にして色々いじってみました。 サンプルもあるので参考にしてみてください。 目次楽天市場商品検索APIとは？「ウル …
Google Books APIsでGoogleブックスから本を検索
Google Books APIsを、JavaScriptを使ってGoogleブックスから本を検索できるスニペットを作ってみました。 目次Google Books APIsとは？Google Books APIsを使った …
JavaScriptの.addEventListenerクリックで左に小さいドロワメニュー
比較的スマホ向けのUIですが、JavaScriptもコードも簡単な記述でできる左から小さめのドロワメニューです。 目次.addEventListenerのクリックドロワメニューのサンプルサンプルのコードHTMLJavaS …
期間限定で条件分岐
期間限定で何か出したい時、条件分岐を使って表示を出し分けします。 目次終了の年・月・日・時刻を指定して表示する終了の年・月・日・時刻を指定して表示の出し分け開始と終了の日時を指定して表示の出し分け 終了の年・月・日・時刻 …
JavaScriptの.addEventListenerのchangeイベントでチェックが付いたら送信可能になるボタン
問い合わせや会員登録、資料請求などなどWebサイトで使われているフォーム。 そんなフォームで規約を同意してもらいたい場合に、「規約同意」のチェックが入ってはじめて送信が可能になるフォームを、JavaScriptを使い作っ …
JavaScriptのsetTimeout()でスケルトンローディング
よくカードUIで見かけるスケルトンローディングを、JavaScriptのsetTimeout()を使って作ってみました。 スケルトンローディングは、ページのローディング時に各要素をローディング中であることが分かるようにす …
JavaScriptの.scrollTopでスクロールしたらヘッダーの高さ・大きさを可変
当サイトでも実装されている「スクロールでヘッダー可変」を、改めてネイティブなJavaScriptで作りました。 と言っても、「可変をするヘッダー」の実装はかなり簡単なコードで可能なので、参考にしてみてください。 Samp …
HTMLとCSSのコピペでビックリマンのキラキラシール風のスニペット
一世を風靡していたビックリマンも、最近では鬼滅の刃やキン肉マンのコラボなど、最近でもコンビニでビックリマンが置かれているのを見かけます。 この記事は、そんなビックリマンのシールをHTMLとCSSで作ってみようと始めた「思 …
JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー
ヘッダーなどのメニューによく使われるドロワー。このUIも数行のJavaScriptのコードで実装できます。 この記事では、ボタンクリックで画面を覆い隠す形のドロワーの作り方について解説します。 目次.style.widt …
