CSSのみでアコーディオンメニューを実装する - 実務で使えるのか検証する
今回はJavaScriptを使用せず、アコーディオンメニューをHTMLとCSSだけで実装する方法と実務でも使えるのか検証します。 デモページ 前提条件は以下 HTMLとCSSのみで実装開閉のときにアニ...
ー 新しい記事 一覧
CSSのみでタブの切り替えを実装する - 実務で使えるのか検証する
今回はCSSのみでタブメニューの切り替えを実装する方法と実際の実務で使えるのか検証してみます。 デモサイト 前提条件は以下 CSSのみで実装１ページにタブメニューを複数設置しない 説明環境は以下 ma...
【WordPress】カスタム投稿を使った絞り込み検索をプラグインなしで実装する - ページネーション有り
今回はWordPressでカスタム投稿とタクソノミー、タームを使った絞り込み検索をプラグインなしで実装する方法を紹介します。 サンプルページ 前提条件は以下 １つのカスタム投稿に紐づく複数のタクソノミ...
【JavaScript】「ページ内スクロール」と「トップに戻る」を同時に実装する方法
今回は「ページ内スクロール」と「トップへ戻る」を同時に実装する方法を説明します。 デモで確認する 前提条件は以下 jQueryは使わないリンクが#のみだと画面トップまで戻るリンクが設定されていても、ス...
【JavaScript】Vimeo動画をポップアップで表示させる方法
今回はJavaScriptを使って、Vimeo動画をサイト上でポップアップ表示させる方法について紹介します。 ポップアップを確認 実装内容は以下 テキストをクリックするとVimeo動画をポップアッ...
サブディレクトリに配置したWordPressをメインドメインとして表示させる
今回はサブディレクトリに配置したWordPressをメインドメインとして表示させる方法について説明します。 前提条件は以下 レンタルサーバーにXserverを使用サブディレクトリにWordPress本...
【WordPressとGatsby】headのtitleやmeta情報をページごとに設定する手順
今回はWordPressとGatsbyを連携したサイトを、ページごとにheadのtitleやmeta情報を設定する方法を紹介します。 説明する環境は以下です。 macOS Catalina v10.1...
WordPressとGatsbyを連携して高速なサイトを作る - 環境構築から基本的なページ作成まで
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code...
【React】react-helmet-asyncを使ったheadの設定方法 - URLごとに切り替える
今回はreact-helmet-asyncを使ってheadの設定方法について説明します。 前提条件は以下 VSCode上でcreat react appを使ってReact、TypeScriptの環境で...
【React】React Router v6の使い方 - URLによって表示を切り替える
今回はReact Router v6の基本的な使い方について説明します。URLによって表示を切り替えるときに必要な機能です。 前提条件は以下 VSCode上でcreat react appを使ってRe...
