背景色を変更するボタンを設置し、色を変更したらブラウザを閉じても一定期間は変更内容を反映させたままにする方法をご紹介いたします。 簡単なデモページも用意しましたので、挙動については以下デモページをご参照ください。 デモペ…
jQueryとjquery.cookie.jsを使って背景色の変更を一定期間保持させる方法

背景色を変更するボタンを設置し、色を変更したらブラウザを閉じても一定期間は変更内容を反映させたままにする方法をご紹介いたします。 簡単なデモページも用意しましたので、挙動については以下デモページをご参照ください。 デモペ…
Don’t Close This Tabは、サイト訪問者が別のタブに移動した時に「戻ってきて!」と伝えることができるようになるスクリプトです。タブのタイトルが点滅して「Hey, com back!」とメッセージが表示され…
30 seconds of codeは、JavaScriptのコードスニペットがまとめられているサイトです。それぞれのコードは、30秒ほどで理解できる内容になっていて、役立つコードスニペットとしてまとめられています。 3…
全画面の背景動画としてYouTubeの動画を使う方法をご紹介いたします。動画ファイルをサーバーに設置せず、YouTubeから読み込むので、レスポンスも良くなります。 以下に簡単なデモも用意しました。 デモページを見る Y…
ボタンをクリックした際に全画面に表示される、モーダルウインドウ風のメニューを実装する方法をご紹介いたします。 簡単なデモページを用意したので、挙動についてはデモページをご確認いただければと思います。 デモページを見る ボ…
「よくあるご質問」などのページでよく見かける、クリックで開閉するコンテンツを実装する方法をご紹介いたします。 簡単なデモページを作成したので、挙動については以下よりご確認ください。質問部分をクリックすると、回答が開きます…
縦長のページでページ内リンクのナビゲーションを設置している場合に、スクロール位置によって現在位置をカレント表示させる方法をご紹介いたします。 言葉にするといまいちわかりにくいですが、以下に簡単なデモを用意しましたので、ご…
PHPとjQueryを使って、外部サイトのRSSフィードを取得・表示する方法をご紹介いたします。RSSフィードのURL以外は、コピペで実装することができます。 PHPとjQueryを使って外部サイトのRSSフィードを取得…
ページ内リンクをスムーススクロールさせる方法については、以前「jQueryを使ってページ内リンクをスムーススクロールさせる方法」という記事でご紹介いたしました。 こちらの記事では、同じページ内のアンカーリンクをスムースス…
ヘッダー部分を「position:fixed;」で固定してスクロールに追尾させていると、アンカーリンク(ページ内リンク)への移動時に、固定したヘッダー部分の高さ分、移動先の位置がずれてしまいます。 正確には、位置がずれる…