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