Contact Form 7でサンクスページへ自動で遷移させる方法【Contact Form 7】
Contact Form 7（CF7）では、フォーム送信後に「サンクスページ」へ移動させたいケースがあります。 以前は on_sent_ok を使って送信後の処理を実行する方法が使われていましたが、 この方法は現在の C […]
Contact Form CFDB7 のデータを一気に消去する方法（TRUNCATE対応）
Contact Form 7の送信内容をWordPressのデータベースへ保存できる Database Addon for Contact Form 7 - CFDB7（Contact Form CFDB7）。 長期間運 […]
ワイドCTAの作り方｜WordPressで反応率が上がるデザイン手順
WordPressのページ内に、画面幅いっぱいに広がるCTA（Call To Action）を設置したいことがあります。 たとえば、PCでは「説明文」と「お問い合わせボタン」を横並びにし、スマホでは上下に並べる形です。 […]
経歴タイムラインを美しく表示する方法｜CSSで簡単に作れるデザイン例
プロフィールページや会社案内などで、これまでの経歴を時系列で分かりやすく見せたいことがあります。 普通の箇条書きでも経歴は表示できますが、年月ごとの出来事を縦につないだタイムライン形式にすると、過去から現在までの流れをひ […]
サイトが攻撃で落ちた時に、別サーバーへすぐ切り替える方法【エックスサーバーで簡単運用】
WordPressのサーバー移転やDNS変更、hostsファイルを使った事前確認などでは、現在利用しているレンタルサーバーの「IPアドレス」を確認したいことがあります。 この記事では、エックスサーバー、ConoHa WI […]
フェードインとスライドインの違いについて
WordPressのページで、スクロールしたときに文章や画像をふわっと表示したり、下からスライドさせたりしたいことがあります。 この記事では、JavaScriptの IntersectionObserver を使って、次 […]
Intersection Observerで文字だけフェードインを作る方法｜スクロールアニメの基本解説
WordPressの記事や固定ページで、スクロールしたときに文字をふわっと表示させたいことがあります。 今回は、JavaScriptの IntersectionObserver を使って、画面内に入った文章を下から自然に […]
横並びサービスカード（3列）の作り方｜レスポンシブ完全対応のCSSサンプル付き
横並びのサービスカード（3列）のレスポンシブ完全版 横に3つ並ぶ「サービスカード」は、LP・企業サイト・美容院・整体など多くのサイトで使われる定番デザインです。本記事では、PCでは3列、タブレットでは2列、スマホでは1列 […]
Vanilla JS と jQuery の違いを分かりやすく解説｜初心者がどちらを選ぶべきか
JavaScript を使うときによく聞く「Vanilla JS」と「jQuery」。 しかし、両者の違いがわからず混乱している初心者も多いです。 本記事では、初心者でも理解できるようにやさしく比較しつつ、少し専門的な視 […]
jQueryなしでスライダーを実装する方法（Vanilla JS）
jQuery を使わずに、純粋な JavaScript（Vanilla JS）だけで実装できる軽量スライダーの作成方法です。 スライダーのライブラリを追加する必要がなく、WordPress の読み込み速度を落とさずに導入 […]
クリックで要素をトグル表示させる方法｜JavaScriptで簡単に開閉メニューを作る
クリックしたときに任意の要素だけを「ふわっと」表示/非表示にする方法を紹介します。JavaScript を少し追加するだけで、ショートコードの内部や固定ページでも使える便利なUIが作れます。 実装のポイント クリックで要 […]
CSSアニメーションでバウンド・フェード・拡大を作る方法｜すぐ使えるサンプル付き
CSSアニメーションを使うと、ボタン・画像・ボックスなどに「動き」を与えて、ユーザーに直感的で楽しい印象を与えられます。この記事では、バウンド・フェードイン・拡大（ズーム）の3種類のアニメーションを簡単に実装する方法を紹 […]
CSSでsectionごとに背景色を切り替えるデザインの作り方｜読みやすさ向上テクニック
実装のポイント セクションごとに背景色を変えるだけで、読みやすい構成やLP風のデザインが簡単に作れます。HTMLとCSSのみで実装可能です。 <!-- セクションごとに背景色を切り替えるサンプルHTML --> […]
ブログカード風の内部リンクを作る方法｜WordPressでクリック率を上げるデザイン実装
この記事では、内部リンクを「ブログカード」風に表示するデザインを、コードだけで簡単に実装する方法を紹介します。リンクを目立たせたいときに便利な定番UIです。 実装のポイント functions.php に「URL をブロ […]
クリック・ホバーで背景がふわっと変わるCSSの演出の作り方｜CSSトランジションで軽量実装
この記事では、リンクやボックスに「カーソルを乗せると背景がふわっと変わる」ホバー演出をCSSだけで実装する方法を解説します。アニメーションがあるだけで見た目が大きくアップします。 実装のポイント hover時に back […]
CSSで作る「丸いプロフィール画像＋影＋枠」の簡単・綺麗な作り方
WordPress の固定ページやプロフィール欄でよく見かける「丸いプロフィール画像」＋「影」＋「枠」。 実は、CSSだけでとても簡単に作れます。 この記事では、コピペだけですぐ使える最適なコードを紹介します。 丸いプロ […]
iPhoneで画像がズレる・はみ出す時のCSS修正【初心者に多い原因と解決】
WordPressサイトを作っていると、「PCでは正常なのに、スマホで見ると画像がズレる・はみ出す」ということがあります。 特にiPhoneで確認したときに気付くケースも多いですが、多くの場合はiPhone固有の不具合で […]
WordPress 予約投稿が失敗する原因を徹底解説【原因別対策付き】
WordPressには、指定した日時に記事を自動公開できる「予約投稿」機能があります。 あらかじめ記事を書いて公開日時を設定しておけるため、ブログやWebサイトを計画的に運営するうえで非常に便利な機能です。 ところが、と […]
日本国内サーバー × Cloudflare の最速設定ガイド【Xserver / ConoHa 対応】
WordPressサイトの高速化やセキュリティ対策として、XserverやConoHa WINGなどの国内レンタルサーバーとCloudflareを組み合わせる方法があります。 Cloudflareを利用すると、CDNによ […]
Cloudflare Workers で WordPress を高速化する方法【HTMLキャッシュ＋エッジ実行で高速化】
Cloudflare Workersは、Cloudflareのネットワーク上でJavaScriptなどのコードを実行できるサーバーレス環境です。 WordPressと組み合わせることで、WordPressやPHPへリクエ […]
CDNの選び方：Cloudflare / CloudFront / Fastly / Akamai を比較【料金体系・導入難易度・WordPressとの連携・向いている用途】
CDN（Content Delivery Network）は、画像・CSS・JavaScript・HTMLなどのコンテンツを、利用者に近い配信拠点から届けるための仕組みです。 WordPressサイトでもCDNを活用する […]
CDNを入れても速くならない理由10選【WordPress高速化の落とし穴】
CDN（Content Delivery Network）は、Webサイトのコンテンツを利用者に近い拠点から配信し、通信時間やオリジンサーバーへの負荷を減らすための仕組みです。 WordPressでもCloudflare […]
Cloudflareでサイトが遅くなる原因と対処まとめ
Cloudflareは、CDN・キャッシュ・DNS・セキュリティなどを提供するサービスです。 WordPressと組み合わせることで、画像やCSS、JavaScriptなどの配信を効率化し、オリジンサーバーへの負荷を減ら […]
WebP（ウェッピー）とは？メリット・デメリット・編集方法・おすすめ変換ソフトまで徹底解説
WebP（ウェッピー）は Google が開発した 次世代画像フォーマット です。 JPEG や PNG より軽量で、WordPress の高速化（特に LCP 改善）にも大きく貢献します。 この記事では、WebP の特 […]