JavaScriptのwindow.pageYOffsetでスクロール量に応じてパララックスエフェクト
パララックスエフェクトは、通常のウェブページと比べて動的な印象を与えることができます。 中でも、背景画像を用いたパララックスエフェクトは、コンテンツの重要性を強調して、ウェブページの視覚的な魅力を高めることができます。 …
JavaScriptの.includes()で指定URLが部分一致した場合にnoindex,nofollowを付与
noindex,nofollowを正しく設定して、検索結果での表示の仕方や、クローラー（検索エンジンのロボット）の動きを制御します。 今回は、デザインリニューアル時や、テストと本サイトのコンテンツが一致してしまう時に使え …
JavaScriptの.addEventListenerクリックでページ下部にsnackbarを表示
Googleのマテリアルデザインでも登場する「snackbar」は、1つだけアクションを持つことができるUIで、インタラクションなUI設計で、自分も使ったりします。 似たようなUIに「toast」がありますが、「toas …
プラグイン無しでWordPressの投稿ページ・固定ページを個別に複製できるスニペット
WordPressで記事の複製は、プラグインの「Yoast Duplicate Post 」や、「Duplicate Post」が有名で、公開済みの記事や下書きとして保存してあるページを元に、複製した記事を作成できます。 …
JavaScriptのsetInterval()でページ上部にプログレスバーを表示
プログレスバーは、ユーザーが長い時間を要するタスクの進行状況を視覚的に把握でき、邪魔にもならずユーザーの体験を向上することができます。また、待ち時間のストレスも軽減できます。 今回は、そんなプログレスバーをsetInte …
JavaScriptのscreenでモニターのサイズを取得してアラート表示
今回は、Javascriptの screen プロパティで、使用しているモニターのサイズを取得して、ブラウザの上部にアラートで上部に表示させます。 目次screenモニターのサイズを取得してアラート表示するサンプル実装の …
JavaScriptの.sessionStorageで初回アクセス時にローディングアニメーション
今回は、初回アクセス時にローディングアニメーションを表示させます。 この記事は、以前jQueryで書いたコードをネイティブなJavaScriptに書き直しているものなので、上記の記事のjQueryのコードも一緒に参考にし …
Google ポリシーオフィスアワー 2023.1.26
2023年1月26日に、Googleポリシーオフィスアワーが開催されました。 今回のポリシーオフィスアワーは、ログインが必要なページのコンテンツの話や、URLを変更した際の対処法についてなど、盛り沢山の内容です。 目次ド …
JavaScriptの.setTimeout()でページ上部にtoastを表示
モーダルのように、ユーザーに「開く・閉じる」行動を矯正させることなく、もっとライトにメッセージを表示させたい時は toast（トースト）があります。 この記事ではそんな toast UIをJavaScriptの .set …
メインクエリ
WordPressで簡単に記事一覧を表示できる query_posts() のメインクエリ。 query_posts()のメインクエリは現在非推奨となっていますが、メインクエリのカスタマイズについて解説します。 メインク …
