liquid
Shopifyの/collections/allをカスタマイズ｜タイトル・説明文をテーマエディターから変更
Shopifyの/collections/allで表示元のLiquidファイルを特定し、商品一覧のタイトルと説明文をテーマエディターから変更できるようにする方法を解説します。collection.json、section schema、section.settingsの関係も分かります。
ARTICLES
記事一覧
liquid
Shopifyでブログ記事だけCSSを除外する方法｜unlessとrequest.page_typeを解説
ShopifyのカスタムLiquidでunlessとrequest.page_typeを使い、ブログ記事の詳細ページだけCSSを除外する方法を解説します。Horizonへの追加手順、articleとblogの違い、反映されない場合の確認点も分かります。
Shopify基礎
ShopifyのカスタムLiquidとカスタムCSSの使い方｜条件分岐と適用範囲を解説
ShopifyのカスタムLiquidとカスタムCSSの違いを整理し、Horizonのヘッダー・フッターへの追加、request.page_typeとpage.handleによる条件分岐、セクション単位でCSSを適用する仕組みを解説します。
テーマ開発
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や投稿制限を使ったスパム対策まで、実際の構成をもとに解説します。