WordPress 【保存版】Contact Form 7で「送信できない」時の原因と解決チェックリスト
送信ボタンを押しても反応がない、ずっと読み込み中のまま、赤いエラーが表示される、あるいは「送信完了」と出るのにメールが届かない――Contact Form 7（CF7）の「送信できない」問題は、クライアント側（ブラウザ/JS）とサーバー側（...
WordPress 
WordPress 【WordPress】管理画面に独自メニューを追加する方法
WordPressの管理画面に独自メニューを追加すると、設定ページやツールページを一箇所にまとめられ、運用やカスタマイズの効率が大幅に向上します。ここではadd_menu_page / add_submenu_pageの基本から、保存処理（...
WordPress 【WordPress】wp_enqueue_styleの使い方｜CSSを正しく読み込む方法
WordPressでCSSを正しく読み込む方法として推奨されているのがwp_enqueue_style関数です。header.phpに直接<link>タグを書き込むことも可能ですが、テーマやプラグインの競合を防ぎ、依存関係やバージョン管理を...
Editor 【VSCode】便利な拡張機能10選｜開発効率を劇的にアップするツール
Visual Studio Code（VSCode）は豊富な拡張機能を利用できるのが魅力です。開発効率を高めたり、コード品質を向上させたりするためにぜひ導入したい拡張機能は数多くあります。ここでは特に利用頻度が高く、初心者から中級者まで役立...
Docker 【Docker】WordPress環境をDockerで構築する手順
WordPressを開発環境に導入する際、Dockerを利用すると依存関係や環境構築の手間を大幅に削減できます。Docker Composeを使えば、WordPress本体とデータベースをまとめて起動・停止できるため、チーム開発や検証環境に...
Git 【Git】よく使うgitコマンドまとめ｜初心者から中級者向けの実用例
Gitはバージョン管理システムとして最も広く利用されており、開発の効率化に欠かせません。ここでは初心者から中級者が実務でよく使うコマンドをまとめ、実用的な使い方を紹介します。リポジトリの操作新規プロジェクトや既存プロジェクトの開始時に使う基...
JavaScript 【JavaScript】localStorageとsessionStorageの違いと使い分け
Webブラウザにはデータを保存するための仕組みがいくつか用意されています。その中でもlocalStorageとsessionStorageは手軽に利用できる保存先としてよく使われます。どちらもWeb Storage APIに含まれていますが...
HTML/CSS 【CSS】アニメーションでフェードイン・スライドインを実装する方法
Webサイトで動きを加えるときに最もよく使われる表現のひとつがフェードインやスライドインです。CSSアニメーションを使えば、JavaScriptに頼らず軽量に実装できます。ここでは基本の書き方から実用的な応用例までを紹介します。フェードイン...
HTML/CSS 【CSS】grid-template-areasでレイアウトを直感的に設計する方法
CSS Gridを使うと複雑なレイアウトをシンプルに記述できます。その中でもgrid-template-areasは、レイアウトを視覚的に設計できる便利なプロパティです。領域名を文字列で定義し、それを要素に割り当てるだけで、直感的にページ構...
WordPress 【WordPress】wp_enqueue_scriptの使い方｜正しいJS読み込みと依存関係の管理
WordPressでJavaScriptを読み込む際に推奨される方法がwp_enqueue_scriptです。テーマやプラグインで正しくスクリプトを読み込むことで、不要な競合を防ぎ、依存関係を管理しやすくなります。直接header.phpや...
HTML/CSS 【HTML】アクセシビリティを意識したフォームラベルの正しい使い方
Webフォームの入力欄を作成する際、アクセシビリティの観点から必ず意識したいのが「label要素の使い方」です。見た目だけでなく、スクリーンリーダーなど支援技術でも正しく読み上げられるように設計することで、より多くのユーザーが安心して利用で...
HTML/CSS 【CSS】スクロールに応じて背景画像を切り替えるパララックス効果の実装方法
背景画像をスクロールに応じて切り替える「パララックス効果」は、ユーザー体験を大きく向上させる演出のひとつです。従来のbackground-attachment: fixedを使った方法はモバイルSafariでの不具合やパフォーマンス低下が課...
WordPress 【WordPress】functions.phpを分割して管理する方法｜読みやすくメンテナンスしやすいテーマ開発
functions.phpを分割する狙いと全体像テーマの成長に合わせてfunctions.phpが肥大化すると可読性や保守性が急速に落ちます。役割ごとにファイルを分割し、functions.phpには「読み込み管理」だけを残すことで、どこを...
SSH 【SSH】ポート番号を変更してセキュリティを強化する方法
SSH 接続はデフォルトでポート 22 を使用しますが、そのままでは不正アクセスの対象になりやすく、ブルートフォース攻撃を受けるリスクが高まります。ポート番号を変更することでセキュリティを向上させ、攻撃を受けにくくすることが可能です。ここで...
jQuery 【jQuery】要素をフェードイン・フェードアウトさせる方法
Web サイトの演出でよく使われるのが、要素を徐々に表示・非表示にする「フェード効果」です。jQuery には fadeIn()、fadeOut()、fadeToggle() といった便利なメソッドが用意されており、わずかなコードで滑らかな...
HTML/CSS 【CSS】テーブルの先頭行と先頭列を固定してスクロール可能にする方法
表が横にも縦にも長い場合、ヘッダー行や先頭列がスクロールで隠れてしまい見づらくなります。これを解決するには、position: sticky を活用して「先頭行」「先頭列」を固定する方法が便利です。JavaScript を使わなくても純粋な...
HTML/CSS 【解決法】tableをstickyで固定すると罫線が消える問題を直す方法
テーブルの見出し行や左端列を position: sticky で固定すると、ブラウザによっては罫線が消えたり、スクロール中に途切れて見えることがあります。主因は「border-collapse: collapse と sticky の相性...
WordPress 【WordPress】カスタムフィールドでリビジョンを有効化する方法と注意点
WordPress のリビジョン機能は記事本文やタイトルの変更履歴を保存できますが、カスタムフィールド（post meta）はデフォルトでは対象外です。そのため、ACF や独自のカスタムフィールドを利用している場合、誤ってデータを上書きして...
HTML/CSS 【CSS】paddingで高さが変わる原因と対処法｜box-sizingが効かないときの解決策
要素に padding を指定したら、意図せず高さや幅が膨らんでしまった経験はありませんか？これは CSS の「ボックスモデル」の仕組みによるもので、特に box-sizing の指定が効いていないときに起こりやすい現象です。この記事では、...
HTML/CSS 【HTML5】input type=”tel”の使い方｜電話番号入力欄の実装と注意点
HTML5 で導入された <input type="tel"> は、電話番号入力に特化した入力フィールドを作るときに使用します。見た目は通常のテキストボックスと同じですが、スマートフォンでの入力時にテンキーを表示させられるため、ユーザー体験...