JavaScriptの.addEventListener でフローティングバナーの表示・非表示
主に広告で使いそうで、日常的な実用性がなくCSSメインの為JavaScriptなのかは微妙なところですが、ごく簡単なコードで実装できるフローティングバナーです。 簡単なコードでできているスニペットなので、JavaScri …
JavaScriptの.addEventListenerクリックで検索フォームのモーダル
ユーザーが検索フォームに検索条件を入力して「検索」ボタンを押すと、一覧画面に表示される。Webサイトのどのシーンでも当たり前に活用されている「検索フォーム」ですが、この記事では、そんな検索フォームをボタンクリックで「モー …
GA4とGoogle Search Consoleの連携方法
既に、「2023 年 7 月 1 日より、ユニバーサル アナリティクスでは標準プロパティで新しいデータの処理ができなくなります。」と、Google Analyticsのヘッダーにデカデカ表示されています。 「そろそろGA …
JavaScriptの.lastModifiedでページの最終更新日を表示
JavaScriptの .lastModified プロパティを使用して「そのページが、最後に更新された日時＝最終更新日時」を表示します。 簡単なので、参考にしてみてください。 目次.lastModifiedページの最終 …
JavaScriptのライブラリSwiperでタブのメニューに連動したスライダー・カルーセル
JavaScriptライブラリの「Swiper」は、スライダーを簡単に設置できるライブラリです。これをベースに、ほんの少しコードを書けば「タブ」のUIと絡めたスライダーを実装することができます。 そんなUIを、Swip …
JavaScriptの.querySelectorAll()でアクティブになったタブメニューの背景が左右に動いて表示
タブの切り替えに動きを少し付けたいと思っている方は、是非参考にしてみてください。 目次.querySelectorAll()アクティブになったタブメニューの背景が動くサンプル実装の手順と方法ざっくりとしたコードの解説HT …
JavaScriptのlocation.hrefで現在のページURLを取得してヘッダーの一致した要素に下線を表示
JavaScriptの location.href を使って、ヘッダーのメニューでURLが一致した要素にclass名を付けて、表示を切り替えます。 備忘録的な内容ですが、ぜひ参考にしてみてください。 目次location …
ページネーションの出力
WordPressのバージョン 4.1.0 から導入された the_post_navigation() を使うと、分割されたページへのリンクを出力するページャーやページネーションを簡単に出力できます。 目次ページネーショ …
プラグインなしでMicrodata形式のパンくずリストを表示
WordPressのテーマなら、大抵の場合パンくずリストの表示させるものがもともと入っているので、あえて設置するなどは不要ですが、フルスクラッチでテーマを作る場合には、カスタマイズが必要です。 そんな時、静的に一個一個書 …
functions.phpに外部ファイルの組み込み
WordPressをカスタマイズしていく際、テーマのfunctions.phpが見やすいよう、部分部分で各コードを外部ファイルにして、functions.phpにインクル（含ませる）させておくと便利です。 目次funct …
