Flexboxで作る！左右非対称の特長セクションデザイン
サイトの特徴紹介セクションを美しく配置するデザイン例です。 左側に半円状の青背景とタイトル、右側に白いカードで内容を表示する構成です。 視覚的なリズムを持たせたいLP（ランディングページ）や企業サイトに最適です。 実装の […]
ul・liタグで美しいリストデザインを作る方法
この記事では、HTMLの<ul>タグ（箇条書きリスト）の使い方をわかりやすく解説します。 例として「柴犬の飼育に関する5つの悩み」を題材にし、リストを美しく装飾するHTMLとCSSの実装方法を紹介します。 実 […]
ステップカードを作って設置する方法
この記事では、Googleアドセンスの審査から運用までの流れを例に「ステップカード」の作り方を紹介します。 WordPressの固定ページやLPにも設置でき、スマホ対応済みのグリッドデザインです。 実装のポイント 9枚の […]
PCのヘッダ画像の下部に少し重なる「白背景＋3列カードレイアウト」の設置方法
この記事では、トップページや固定ページなどで使える「白背景＋3列カードレイアウト」の実装方法を紹介します。 LightningやCocoonテーマにも対応し、スマホでは重なりが解除され、自動的に1列表示になります。 実装 […]
Font Awesome のアイコンを使って、紹介カードを作成する方法
この記事では、Font Awesome のアイコンを使って、紹介カードを作成する方法を紹介します。ここでは、犬・猫・小動物などを紹介するカードをレイアウトしてみましょう。 実装のポイント Flexboxを使って横並びレイ […]
2カラムのカードで並べる「デモ体験」と「資料請求」ボタンを設置する方法
この記事では、CTA（行動喚起）を2カラムのカードで並べる「デモ体験」と「資料請求」ボタンのセクションを、ショートコードで簡単に挿入できるように実装します。 クラシックエディタに貼るだけでOK。HTMLテンプレート／fu […]
説明付きカテゴリー一覧を自動生成（HTML版）する方法
この記事では、WordPressの全カテゴリ一覧（索引ページ）を自動生成する方法を紹介します。 投稿数やカテゴリ説明も同時に表示し、階層構造（親・子・孫カテゴリ）をわかりやすく整理する「まとめ記事」ページを作ります。 実 […]
簡易カテゴリー一覧を自動生成（HTML版）する方法
WordPressサイトで、易カテゴリーサイトマップを親子階層付きで一覧表示したい場合、PHPの関数とショートコードを使うと便利です。ここでは「親カテゴリーは太字」「子カテゴリーはインデント付きで表示」「投稿数も表示」す […]
カテゴリー別の投稿一覧を自動生成（HTML版）する方法
この記事では、WordPressで投稿一覧を作成する方法を解説します。 実装のポイント functions.php にコードを追加してショートコード化 親カテゴリーには子カテゴリーの記事を含めず、重複を防止 CSSで見や […]
固定ページ一覧と投稿一覧を自動生成（HTML版）する方法
このコードでは、固定ページと投稿を自動取得して一覧表示（HTML版）を生成します。投稿が多い場合はページネーションで分割表示し、見やすくカッコよくデザインしています。 実装のポイント 固定ページはすべて表示、投稿はページ […]
LPデザインに自然に溶け込む資料請求フォームを設置する方法（Contact Form 7対応）
この記事では、ランディングページ（LP）に直接資料請求フォームを埋め込む方法を紹介します。 Contact Form 7を利用して、見た目の整ったレイアウトを実装します。 投稿ページ専用で動作し、「お知らせ」や「固定ペー […]
【Service Card Section】ふわっと表示する１カラム用のサービス紹介カードを実装する方法
この記事では、サービス紹介カードをふわっと表示させるアニメーション（Service Card Section）を実装する方法を紹介します。 LPなどの１カラムの固定ページに最適です。 実装のポイント スクロール時にカード […]
スクロールで画像が左上から右下に開くアニメーションを表示する方法
この記事では、投稿ページと固定ページのみで、スクロールして画像が見えた瞬間に「左上から右下へ開く」ように表示されるアニメーションを実装します。 お知らせやアーカイブ・カテゴリ一覧などには影響しません。 functions […]
ショートコードで画像をランダムに表示させる方法
この記事では、WordPress の投稿ページ・固定ページで使えるショートコード形式の「ランダム画像表示」を実装する方法を紹介します。 ショートコードを使えば、記事中の任意の位置にランダム画像を差し込めます。 実装のポイ […]
背景パララックスを設置する方法
この記事では、「背景パララックス（スクロールに合わせて背景画像がゆっくり動く）」の実装方法を紹介します。お知らせ、カテゴリー、アーカイブページなどには一切影響しない安全な方法です。 実装のポイント 背景パララックスとは、 […]
オンラインユーザー数をショートコードで表示する方法
このページでは、「現在オンライン中のユーザー数」を表示できるショートコードを作成します。 実装のポイント アクセス時にユーザーのIPアドレスと時刻を記録します。 一定時間内（例：5分以内）にアクセスしたユーザーを「オンラ […]
CSSで吹き出し会話デザインを作る方法
この記事では、CSSで作る「吹き出し会話デザイン」の作り方を紹介します。 実装のポイント CSSで吹き出しを実装するには、擬似要素（:before / :after）を使って三角形を作り、発言者の向きを左右で切り替えます […]
コメントフォームに「同意チェックボックス」を追加する方法
この記事では、WordPressの投稿ページにだけ「コメント投稿時の同意チェックボックス」を追加する方法を紹介します。 お知らせ・固定ページ・カテゴリー・アーカイブ・関連記事には影響せず、投稿記事（single.php） […]
CSSで作る！かわいい・おしゃれな枠デザイン集【コピペOK】
CSSだけで簡単に作れる枠デザインを紹介します。すべてクラス名を変えて使い分けでき、WordPressのクラシックエディタでもそのまま動作します。 シンプル枠（基本形） シンプルでどんなデザインにも合う基本の枠です。 / […]
【折りたたみFAQボックス】Q&A形式のコンテンツをクリックで展開／折りたたみする方法
このページでは、FAQ（よくある質問）をクリックで展開・折りたたみできるボックスを作る方法を紹介します。WordPressのクラシックエディタでも簡単に貼り付け可能です。 FAQをHTMLに貼り付け <dl cla […]
背景色アニメーションを設置する方法
ウェブサイトのセクションやボタンなどに背景色のアニメーションを付けると、視覚的に目立たせることができます。ここでは、CSSを使って簡単に実装する方法を紹介します。 CSSだけでアニメーションのHTML例 <div […]
記事中の画像をホバーで拡大表示するライトボックスにする方法
WordPressの記事内にある画像を、クリックやホバーで拡大表示（ライトボックス）できるようにする方法をご紹介します。 プラグイン不要で、HTML・CSS・JavaScriptだけで実装可能です。 HTML構造 < […]
ページ内スクロールで要素が横からスライドインする方法
この記事では、ページをスクロールしたときに、要素が左右からスライドインして表示される「スライドインアニメーション」を実装する方法をご紹介します。 JavaScriptとCSSを組み合わせることで、どのテーマでも簡単に使え […]
ページ内スクロールで要素が下からフェードインする方法
この記事では、ページをスクロールしたときに要素がふわっと表示される「フェードイン効果」を簡単に実装する方法をご紹介します。 JavaScriptとCSSを組み合わせて、テーマを問わず動作する仕組みです。 HTML構造 & […]