黒田こうすけ｜Webコーダー

【💬案件でよくある既存サイトの部分改修】 　 Web制作のお仕事をいただく中で、公開済みサイトの一部を直す依頼を受けることがあります。 ゼロから作る案件だけでなく、他の人が書いたコードに手を入れる仕事は珍しくありません。 　 部分改修では直した箇所以外を壊さないことが前提になります。 直したい見た目は分かる。分からないのは、その変更が他に影響を与えないかどうか。 自分が書いていないCSSを触るときに、特に気をつけている2点を共有します。 ＊＊＊ ✅ 既存クラス名で検索して影響範囲を把握 クラス名で検索して出てこない＝使われていない、ではありません。 検索でヒットしないのに画面には当たっている。 これは文字列がどこかで切れているためで、切れた場所によって見る場所が変わります。 ①CSS側で切れている Sassの &__title はソースに完成形の文字列が無い → ビルド後の出力CSSを検索する ②HTML側で組み立てられている JSの classList.add、テンプレートの文字列連結、WordPressの body_class() など → ブラウザに出力されたHTMLを見る（DevToolsのSearchパネル） ③ビルドで別名になっている CSS Modulesのハッシュ、クラス名の圧縮 → 名前で追うのをやめ、コンポーネント単位で追う ✅ 「触ってはいけないCSS」は2種類ある 触ってはいけないCSSには2種類あり、対処法が異なります。 ①更新で上書きされて消えるもの node_modules/、親テーマ、dist/、.min.css など。パスとファイル形式で機械的に判定できます → 別の場所に書く ②消えないが他に波及するもの common.css の上部、.btn などの共通パーツ、p {} のような型セレクタ、reset.css → 既存の行は書き換えず、スコープを足して分岐させる ＊＊＊ 制作会社経由の依頼では修正方針の指定がある場合もあります。 着手の前に一言確認するのがベターです。 同じように既存サイトの改修を任されている方の手がかりになればと思います！

CSSの詳細度について、これだけは知っておきたいという基礎知識を1枚にまとめました。 セレクタの数え方から、CSSが効かないときの見かたまで。 ご参考ください！

現在、WordPress多言語サイトの新規構築案件に携わらせていただいています。 多言語化の方法をいくつか比較検討の上、プラグインのPolylang無料版を使う方針としました。 　 無料版とProの差は「DeepLによる自動翻訳の有無」が一番有名ですが、それ以外にもサイト構成に影響する違いがいくつか存在します。 無料版でどこまでできるかを実際に構築して確かめたので、その内容を共有します。 ＊＊＊ ✅ 下層ページのURLの違い 無料版は言語間でスラッグを共有できません。 日本語ページのスラッグを /company/ にすると英語ページは /company/ にはできず、連番が付くか既定言語へリダイレクトされます。 原因はPolylangではなくWordPressコア側で、ページの解決に言語という概念がないためです。 無料版で通すなら company-en のような言語サフィックスで対応します。 URLの統一が要件であれば有料版を導入する必要があります。 ✅ テンプレートパーツの翻訳の可否 無料版はサイトエディタのテンプレートパーツを翻訳できません。 投稿や固定ページは無料版でも翻訳できるため、本文は訳せてもテンプレートパーツ側は対象外という状態になります。 ブロックテーマで組むかどうかを着手前に判断しておく必要があります。 ＊＊＊ 無料版で対応可能かどうかは、無料版とProの違いを一つずつ切り分けることで判断できます。 同じように多言語サイトの構築で悩まれている方の手がかりになればと思います！

【💬Web制作実務でのつまずきと対策】 　 同じように悩まれている方の手がかりになればと思い、案件で私が実際につまずいた情報を共有します！ 　 WordPressサイトの改修業務で、先方からいただいたAll-in-One WP Migrationのエクスポートファイルを取り込むもローカル再現ができず…ページ自体は表示されるもDBが読み込まれていない状態に。 既存データを再現できず焦っていたのですが、DBがMySQLではなくSQLiteで動いていたことが原因でした。 　 ＊＊＊＊＊＊ ✅ SQLiteとは — MySQLとの違い DBが「サーバー」か「ファイル」かどうか ・MySQL：DB専用のサーバーを起動して接続する ・SQLite：実体がファイル1個。そのファイルを読み書きするだけで動く MySQLを立てる手数が要らないぶん手軽ですが、WordPress周りのツールはMySQL前提のものが多く、DB管理ツールが使えない、WP-CLIの一部コマンドが通じないといった場面があります。 ✅ SQLiteかどうかの見分け方 着手前にDB種別を見ることで判断できます。 (1) サイトヘルス > 情報 > データベース (2) wp-content/db.php の有無 (3) wp-content/database/.ht.sqlite（隠しファイル） (4) wp-config.php の DB_ENGINE 定数 ただし「無い＝MySQL確定」とは言えません。DB_ENGINE は書かれていないことがあり、ファイルの場所も定数で変えられます。 ✅ SQLiteサイトの移行で取りこぼしてはいけない3点 SQLite製と分かったら、移行ツールを使うよりも「ファイル一式コピー＋URL置換」が確実です。 ただし本番のファイルにFTPやSSHで触れる場合に限られます。 DBがファイル1個で完結する強みをそのまま使う形です。 このとき取りこぼしてはいけないのが次の3点。 ・wp-content/db.php ・wp-content/database/（.ht.sqlite 本体） ・sqlite-database-integration プラグインフォルダ（フォルダ名は変えない） 3つ目がズレると db.php が実装本体を見つけられず、エラーも出さずMySQLに接続しにいって「データベース接続確立エラー」になります。 ＊＊＊＊＊＊ 以降は、ローカル構築に入る前に既存環境を確認する手順を追加することで再発防止としています。 同じ事象に困っているWeb制作者にとどけ！このポスト！

第3回 #デイトラチャレンジ AI編 に応募します！ お題は「AIを活用した架空のハウスメーカーLPを1ページ構築」 架空の注文住宅ブランド「間 -MA-」 AIによる作業ワークフローがかなり形になってきたので、その成果として挑戦することにしました！ 「動きの質」と「実装の品質」に特にこだわりました。 実務と同じ工程・流儀でそのまま使えるようにAIを組みこむことを意識しています。 要件定義からWF、デザイン、実装までのAI活用の概要は以下の通りです。今回実際にかかった工数も記載しています。 ◆要件定義／WF（約2h） Claude Codeで世界観を壁打ちし、その結果をプロンプト化してClaudeDesignでワイヤーフレーム作成 ◆デザイン（約3h） WFをClaude Codeに渡してフォント・色・行間・使うアニメを壁打ち → プロンプト化してClaudeDesignでデザイン出力 ◆画像（約2h） 確定した画像ごとにClaude Codeでプロンプトを作りGoogleFlow（nanobanana2）で生成 ◆実装（約3h） 実案件でも使うLP生成用テンプレートをベースにClaude Codeで実装。CSS記法や内部SEOも整えて品質を担保 実際に触れます（架空のデモサイトです） demo-lp.kurodafolio.com/ma-h… ※Basic認証あり ID: demo / Pass: demo #デイトラ