中級 フロントエンド学習の基本

実務寄りの中級レベル課題集です。WordPressテーマ開発(テンプレート階層・カスタム投稿)、GA4/GTM計測、FLOCSS・CSSネスト・Tailwind CSS v4移行といったモダンCSS、PHPMailerによるメール送信、Electron・3Dカルーセルなど、案件で必要になるテーマを扱います。模写コーディング全体は 模写コーディング練習サイト も参照してください。

全150件の記事中、61-90件を表示

WordPressカテゴリ・タグにSEOタイトル/メタを追加する方法|termmeta実装

WordPressカテゴリ・⁠タグにSEOタイトル/メタを追加する方法|termmeta実装

WordPressの termmeta(タームメタ)は、カテゴリやタグなどのターム(taxonomy...
続きを読む
WordPress投稿にSEOタイトル・メタ欄を自作する方法|カスタムフィールド実装

WordPress投稿にSEOタイトル・⁠メタ欄を自作する方法|カスタムフィールド実装

WordPress投稿のSEOカスタムフィールドとは、各記事ごとのSEOタイトル・メタディスクリプシ...
続きを読む
WordPressのSEOを自作するメリット・デメリット|AIOSEO・Yoastを使わない選択肢

WordPressのSEOを自作するメリット・⁠デメリット|AIOSEO・⁠Yoastを使わな...

WordPressのSEO自作とは、AIOSEOやYoast SEOなどのSEOプラグインを使わず、...
続きを読む
GA4直接埋め込み vs GTM経由|メリット・デメリット比較と判断基準

GA4直接埋め込み vs GTM経由|メリット・⁠デメリット比較と判断基準

GA4を直接埋め込む方式とGTM経由で計測する方式を、導入コスト・運用負荷・パフォーマンスで比較。それぞれが向いているケースと判断フレームワークを実例ベースで解説。
続きを読む
GTMタグをhead上部に設置するべき理由とパフォーマンス影響

GTMタグをhead上部に設置するべき理由とパフォーマンス影響

Google Tag Manager(GTM)のコンテナタグを上部に設置すべき理由と、設置位置3パターンの比較、パフォーマンスへの影響、WordPressでの実装ポイントを解説。
続きを読む
WordPressでGA4をGTM経由に移行する方法

WordPressでGA4をGTM経由に移行する方法

WordPressで運用中のGA4をGoogle Tag Manager(GTM)経由に移行する具体的な手順を、コンテナ作成から疎通確認まで5ステップで解説。実体験ベースの落とし穴とFAQ付き。
続きを読む
WordPressカスタム投稿タイプの作り方|register_post_typeの設定と実装

WordPressカスタム投稿タイプの作り方|register_post_typeの設定と...

カスタム投稿タイプとは、WordPressの標準の「投稿」や「固定ページ」とは別に、独自のコンテンツ...
続きを読む
WordPressループの仕組みを徹底解説|have_posts・the_postの使い方

WordPressループの仕組みを徹底解説|have_posts・⁠the_postの使い方

WordPressループとは、データベースから取得した投稿データを1件ずつ処理し、ページに表示するた...
続きを読む
WordPress header.phpとfooter.phpの作り方|テーマの共通パーツを実装する

WordPress header.phpとfooter.phpの作り方|テーマの共通パーツ...

WordPress の header.php と footer.php は、サイト全ページで共通して...
続きを読む
WordPress single.phpの使い方とカスタマイズ|個別投稿ページのテンプレート作成

WordPress single.phpの使い方とカスタマイズ|個別投稿ページのテンプレー...

single.phpとは、WordPressで個別の投稿記事を表示するためのテンプレートファイルです...
続きを読む
WordPress archive.phpの使い方とカスタマイズ|functions.phpとの連携も解説

WordPress archive.phpの使い方とカスタマイズ|functions.ph...

archive.phpとは、WordPressのテンプレート階層においてカテゴリ・タグ・日付・著者な...
続きを読む
Webパーソナライズの実装方法 — JavaScript+localStorageでツール不要

Webパーソナライズの実装方法 — JavaScript+localStorageでツール...

Webパーソナライズとは、ユーザーの属性や行動に基づいて表示内容を動的に変更するCRO施策です。Mc...
続きを読む
ソーシャルプルーフ(社会的証明)でCVRを上げる方法と実装パターン

ソーシャルプルーフ(社会的証明)でCVRを上げる方法と実装パターン

ソーシャルプルーフ(社会的証明)とは、他者の行動や評価を見て自分の判断の参考にする心理効果を活用した...
続きを読む
ページ速度改善の方法 — Core Web Vitals(LCP・INP・CLS)をコードで最適化

ページ速度改善の方法 — Core Web Vitals(LCP・⁠INP・⁠CLS)をコード...

ページ速度改善とは、Webページの表示速度を最適化してユーザー体験とコンバージョン率を向上させるCR...
続きを読む
ファーストビュー改善でCVRを上げる方法 — 構成要素と表示速度の最適化

ファーストビュー改善でCVRを上げる方法 — 構成要素と表示速度の最適化

ファーストビュー改善とは、スクロールせずに見える領域(Above the Fold)を最適化し、ユー...
続きを読む
マイクロコピー改善でCVRを上げる方法 — CTA・フォーム・料金表示の書き方

マイクロコピー改善でCVRを上げる方法 — CTA・⁠フォーム・⁠料金表示の書き方

マイクロコピーとは、CTAボタンの文言、フォームのラベル、エラーメッセージなど、UIに含まれる短いテ...
続きを読む
離脱防止ポップアップをコードで実装する方法【exit-intent対応】

離脱防止ポップアップをコードで実装する方法【exit-intent対応】

離脱防止ポップアップとは、ユーザーがページを閉じようとした瞬間にオファーやメッセージを表示し、離脱を...
続きを読む
EFO(フォーム最適化)とは?離脱率を下げるコード実装ガイド

EFO(フォーム最適化)とは?離脱率を下げるコード実装ガイド

EFO(Entry Form Optimization)とは、問い合わせフォームや申し込みフォームの...
続きを読む
CROとは?コンバージョン率を改善する8つの手法と始め方

CROとは?コンバージョン率を改善する8つの手法と始め方

CRO(Conversion Rate Optimization)とは、Webサイトのコンバージョン...
続きを読む
ABテストのやり方 — 始めるべき判断基準とコード実装方法

ABテストのやり方 — 始めるべき判断基準とコード実装方法

ABテストとは、Webページの要素を2パターン用意し、ユーザーをランダムに振り分けて成果を比較する改...
続きを読む
AWS LightsailでWordPressを構築する手順【初心者向け】

AWS LightsailでWordPressを構築する手順【初心者向け】

AWS Lightsail(ライトセイル)は、AWSが提供するVPSサービスで、月額$3.50からW...
続きを読む
カニバリゼーションとは?自分のサイト同士で検索順位を食い合う現象を解説

カニバリゼーションとは?自分のサイト同士で検索順位を食い合う現象を解説

「同じキーワードで自分のページ同士が検索結果に並んでいる」——そんな経験はありませんか? SEOの世...
続きを読む
有料広告 vs SEO+AEO+LLMO|AI検索時代に「本物」が勝つ理由

有料広告 vs SEO+AEO+LLMO|AI検索時代に「本物」が勝つ理由

AI検索時代に有料広告とSEO+AEO+LLMOのどちらへ寄せるべきかは、AI検索の回答面には検索広...
続きを読む
Claude Code上級編|MCP・Hooks・Skills・サブエージェント実践ガイド

Claude Code上級編|MCP・⁠Hooks・⁠Skills・⁠サブエージェント実践ガイド

Claude Codeの基本コマンドを覚えたら、次はMCPサーバー・Hooks・Skills・サブエ...
続きを読む
Claude Codeコマンド一覧&実践ガイド【2026年版】

Claude Codeコマンド一覧&実践ガイド【2026年版】

Claude Codeは、Anthropic社が提供するAIコーディングアシスタントのCLI(コマン...
続きを読む
Next.js + @react-pdf/renderer 日本語PDF生成|SVGチャート描画の解決策

Next.js + @react-pdf/renderer 日本語PDF生成|SVGチャー...

Next.jsで「診断結果をPDFでダウンロードしたい」「請求書をブラウザから生成したい」という要件...
続きを読む
WordPressプラグインでSEO診断する方法|管理画面からワンクリックで完結

WordPressプラグインでSEO診断する方法|管理画面からワンクリックで完結

WordPressでサイトを運営しているとき、SEO診断のたびに別サービスを開いてURLをコピペして...
続きを読む
AIに自社サイトを正しく認識させる方法|llms.txtとは何か

AIに自社サイトを正しく認識させる方法|llms.txtとは何か

llms.txt(エルエルエムエス テキスト)は、AIにサイトの概要と主要ページを伝えるための案内フ...
続きを読む
ローカルSEOとMEOの違いとは?Webサイト側で必要な5つの対策を解説

ローカルSEOとMEOの違いとは?Webサイト側で必要な5つの対策を解説

ローカルSEOとMEOの違いは、効く場所が違うことです。MEOはGoogleビジネスプロフィール(G...
続きを読む
AI検索で引用されない?対策3つ【llms.txt・構造化データ・robots.txt】

AI検索で引用されない?対策3つ【llms.txt・⁠構造化データ・⁠robots.txt】

「ChatGPTに自社名を聞いてみたら、一切出てこなかった」 Webサイト運営者からよく聞く話です。...
続きを読む