Shopify基礎
ShopifyのカスタムLiquidとカスタムCSSの使い方｜条件分岐と適用範囲を解説
ShopifyのカスタムLiquidとカスタムCSSの違いを整理し、Horizonのヘッダー・フッターへの追加、request.page_typeとpage.handleによる条件分岐、セクション単位でCSSを適用する仕組みを解説します。
ARTICLES
記事一覧
テーマ開発
WordPressでメニュー順にトップページのカテゴリーセクションを並べる方法
WordPressのヘッダーメニューに登録した親カテゴリーの順番を取得し、トップページのカテゴリーセクションと記事カードを同じ順に表示する方法を、WebCantaの実装コードで解説します。
DOM・イベント
JavaScriptでスクロール連動する目次を実装する方法｜現在の見出しを色で表示
JavaScriptで記事本文のh2・h3から目次を生成し、スクロール位置に応じてis-currentを付け替える方法をWebCantaの実装コードで解説します。requestAnimationFrame、aria-current、position: stickyまで確認できます。
テーマ開発
WordPressのパスを理解する｜絶対パス・相対パスとCSSのurl()を解説
WordPressテーマ制作で迷いやすい絶対パス・相対パスを、静的HTML、CSSのurl()、PHPテンプレートで比較。画像が表示されない理由とget_theme_file_uri()の使い方を初心者向けに解説します。
テーマ開発
WordPressで長い目次とハンバーガーメニューをスクロールさせる方法
WordPressテーマで、長い追従目次とスマホのハンバーガーメニューを内部スクロールさせる方法を、PHP・CSS・JavaScriptに分けて解説します。
エディター・Git
VS CodeでGitをResetする方法｜(neo) Git GraphとCodexのAGENTS.mdを解説
VS Code標準機能では扱いにくい任意コミットへのResetを、(neo) Git Graphで実行する方法を解説します。Soft・Mixed・Hardの違い、戻りたいコミットの選び方、Codexで修正からコミットまで進め、AGENTS.mdへGitルールを保存する方法が分かります。
レイアウト
Flexboxでサイドバーを自然に止める方法｜align-items: stretchとstickyを解説
Flexboxのalign-items: stretchでmainとサイドバーの高さを揃え、子要素へposition: stickyを指定して自然に止める方法を解説します。効かないときに祖先要素のoverflowを確認するポイントも紹介します。
フォーム
WordPressでログインユーザー限定コメントを実装する方法｜標準機能と会員プラグイン連携
WordPress標準コメントの基本実装から、Simple Membershipによる会員認証、Turnstileや投稿制限を使ったスパム対策まで、実際の構成をもとに解説します。
Shopify基礎
Shopifyとは？WordPressとの違いとLiquid・テーマ開発の基礎
ShopifyでできることをWordPressと比較し、Liquid、テーマ構造、Shopify CLIの役割を整理します。実装前に確認した内容と、今後検証・アウトプットするテーマ開発の流れをまとめました。
