ホームページの編集画面に料金の数字だけ出てこない原因|装飾用のタグで描いた文字は「文章」と認識されない仕組みと、納品前に確かめる項目
ホームページの編集画面に料金の数字だけ出てこない原因|装飾用のタグで描いた文字は「文章」と認識されない仕組みと、納品前に確かめる項目
納品されたホームページの管理画面を開くと、見出しや本文の欄は並んでいる。写真も差し替えられる。ところが、いちばん変えたい料金の数字だけが、どこを探しても編集欄に出てこない。固定ページの本文を開いても空欄のまま。この状態で「壊れているのでは」「自分の操作が間違っているのでは」と時間を使う人が多いのですが、どちらでもないことがほとんどです。
先に結論を書きます。
編集画面に料金の数字だけ出てこないのは、編集ツールがその数字を「文章」として認識していないからです。 ページの文章を自動で読み取るタイプの編集画面は、「どの種類のタグの中にある文字を編集対象にするか」を決めています。料金の数字は太字や表など装飾用のタグで描かれることが多く、この判定から外れます。さらに、表示後にプログラムで書き足された部分は元の文章データと切り離されていて、元を直しても画面が変わりません。
直すのは制作会社側の作業で、原因が分かっていれば大きな作り直しにはならず、編集画面の読み取り条件を広げる修正で済みます。発注者側でできることは、症状を正確に伝えることと、次の納品では「変えたくなる数字が編集画面に出るか」を受け入れ時に確かめることです。
この記事では、福岡の生活支援サービス事業者のサイトで、3つの料金プランの金額が編集画面に出なかった実例をもとに、編集画面が文章を認識する仕組み、料金の数字だけが落ちる2つの原因、制作側の直し方、納品前に確かめる項目をまとめます。
結論:編集画面には3つの作り方があり、症状の出方が違う
「ホームページの文章を管理画面から変えられる」と一口に言っても、編集画面の作り方は大きく3つに分かれます。どの型かで、料金が出ないときの原因と直し方が変わります。
| 型 | 仕組み | 料金の数字が出ないときの原因 |
|---|---|---|
| 本文型 | 固定ページや投稿の本文欄に文章が入っている | ページビルダー製で本文が空、または別の場所に保存されている |
| 項目定義型 | 「プランA料金」のように編集欄を1つずつ手で定義している | 定義から漏れている。制作側が欄を追加すれば出る |
| 自動走査型 | 表示中のページを読み取り、条件に合う文字を自動で編集欄にする | 読み取りの条件から外れている(本稿の主題) |
本文型で本文が空になる件は、別の記事WordPressの本文を直したのに表示が変わらないときで扱っています。本稿で扱うのは3つ目の自動走査型です。デザインを固定したまま「文章と写真だけ変えられる」納品をするときに採用されることが多く、欄を1つずつ定義しなくてよい代わりに、料金のような「装飾された数字」を落としやすい構造を持っています。
自動走査型の編集画面が「文章」を見つける仕組み
自動走査型の編集画面は、おおむね次の流れで動いています。
- 管理画面の中に、実際のページを枠(iframe)として読み込む
- ページ本体の領域にある文字を、上から順に走査する
- 文字を包んでいるタグの種類を見て、条件に合うものだけを編集欄にする
- 保存時に「ページ内のどこにあった文字か」を示す位置情報(セレクタ)を一緒に記録する
- 表側の表示時に、記録した位置の文字を保存した文章で上書きする
実例のサイトでは、トップページを開くと文章100件・写真19件、会社概要ページで文章81件・写真2件が編集欄として自動で並びました。欄を手で定義していないのにこの件数が出るのが、この型の利点です。
問題は3番目の「条件」です。このサイトの条件は「見出し(h1〜h4)・段落(p)・リスト項目(li)・リンク(a)・ボタン(button)の直下にある文字」でした。文章として書かれるものはほぼこの5種類に収まるので、通常の本文はこれで拾えます。
原因1:料金は「装飾用のタグ」で描かれるので条件から外れる
ところが料金の数字は、文章とは違う描かれ方をします。
- 金額を目立たせるために太字(strong)で描く
- 「月額払い」「一括払い」のようなラベルを、行内の小さな文字(span)で添える
- 時間帯別や曜日別の料金は表の升目(td)に並べる
いずれも「文章の一部を装飾する」「表の升目に入れる」ための部品で、走査の条件にある5種類には入っていません。結果として、同じ料金カードの中でもプラン名(見出し)と説明文(段落)は編集欄に出るのに、金額とラベルだけが抜ける、という見え方になります。発注者から見ると「テキストが入っていない」「料金の欄だけ無い」という症状です。
料金・電話番号・営業時間・住所は、目立たせるために装飾されやすい項目です。つまりサイトの中で最も変えたくなる数字ほど、この条件から外れやすいという逆転が構造的に起きます。ここが、この型の編集画面を納品するときに最初に押さえるべき点です。
原因2:表示後に書き足した部分は、元の文章と切り離されている
もう1つ、見つけにくい原因があります。ページの元データとは別に、表示が終わったあとにプログラムで部品を書き足したり置き換えたりしている場合です。
AI制作ツールで生成したサイトや、既存サイトを改修しながら使い続けているサイトには、こうした「後付けの書き換え処理」が入っていることがあります。実例のサイトも、画面の描画が終わるのを監視して、料金カードの部分をまとめて書き換える処理が後段に入っていました。料金の改定やプランの追加を、元のデータを触らずに済ませられるので、改修の積み重ねでこの形になります。
この構造で起きることは2つあります。
- 書き換え処理は元の段落を丸ごと消して作り直すので、元の文章データを直しても表示は変わらない
- 作り直された部品が太字や行内文字なら、原因1と重なって編集画面にも出ない
「データを直したのに変わらない」と「編集画面に出ない」が同時に起きるので、キャッシュや保存失敗を疑って回り道をしやすいところです。管理画面で保存したはずの値が反映されない件は別の原因で、そちらは管理画面の設定変更が保存されていないことがあるにまとめています。本稿の症状は、保存以前に欄そのものが存在しないのが特徴です。
実例:3プランの料金だけが編集画面に無かったケース
福岡の生活支援サービス事業者のサイトです。元は生成ツールで作ったReact製のサイトで、デザインをそのまま保ち、文章と写真だけを事業者が変えられるようにWordPressのテーマとして納品しました。編集画面は前述の自動走査型で、主要7ページをタブで切り替え、見出し・本文・リスト・ボタン文言のテキスト欄と写真の差し替え、保存ボタンだけを置いた構成です。
納品から約1か月半後、事業者から「サービスの3プランの料金と文章を変えたいが、編集画面にテキストが入っていない」と連絡がありました。編集画面を確かめると、3プランのカードのうちプラン名と説明文は出ているのに、月額と一括の金額、そのラベルだけが無い。固定ページの本文は最初から空で、そこに文章があるわけでもありません。
原因は前述の2つが重なったものでした。
| 確認したこと | 結果 |
|---|---|
| 走査の条件 | 見出し・段落・リスト・リンク・ボタンの5種類のみ |
| 3プランの金額 | 後付けの書き換え処理が太字(strong)で描いていた |
| 月額/一括のラベル | 同じ処理が行内文字(span)で描いていた |
| 同じ穴が他にあるか | 同じページの別の料金カード、他の2ページの料金カード、時間帯別料金の表(td)にも同じ状態 |
つまり、相談を受けた3プランだけでなく、サイト内の料金のほとんどが編集画面から見えない状態でした。相談が来た箇所だけ直しても、次に別ページの料金を変えたいときに同じ連絡が来ます。1件目の相談で全ページを洗うのが正しい対応です。
直し方は3点で、見た目は変えない
制作側で行う修正は次の3点です。
- 走査の条件を広げる。 太字(strong)・表の升目(td・th)を編集対象に加え、さらに「編集対象にしたい」という目印の属性(例:
data-editable="1"。名前は任意)を付けた要素も拾うようにする - 後付け処理で作る部品に目印を付ける。 料金の金額とラベルを描いている9か所に、見た目を変えずに目印の属性だけを足す
- 位置情報の取り方を変える。 従来はページ最上位から要素をたどる長い経路で位置を記録していたが、idや固有の属性を持つ「いちばん近い親要素」を起点にした短い経路に変える。上位の構造が変わっても位置がずれにくくなる
あわせて、テーマのバージョン番号を1つ上げます。管理画面のスクリプトはブラウザに保存されるので、番号を変えないと事業者側の画面で古いスクリプトが動き続けます。
検証は「編集画面の目で本番を読む」
修正の確認は、テスト環境で見た目が変わっていないことを目視したうえで、本番ページに対して編集画面と同じ走査処理を実行し、次の3点を数えました。
- 料金の金額と時間帯別料金が、すべて編集欄として拾われる
- 拾った各欄の位置情報から元の要素に戻れる(往復一致。不一致0件)
- 目印の属性が本番のページに9件出力されている
「編集画面を開いたら欄が増えていた」という確認だけでは、位置情報が正しく元の要素に戻るかまでは分かりません。保存したときに別の場所が書き換わる事故を防ぐには、往復一致を数えるのが確実です。なお、この種の画面描画型サイトは、画面を持たない自動取得ツールで読み込むと固まることがあるので、実際のブラウザで本番ページを開いて走査処理を流すほうが早く済みます。
事業者への案内は「左メニューの編集画面→該当ページのタブ→料金のセクションに、プラン名・月額・金額・一括・金額・条件の欄が出るので書き換えて保存」の1本で済みました。固定ページの本文ではないことも明記しています。
納品前に確かめる項目(発注者向け)
この症状は、納品時の受け入れで防げます。制作会社が「文章100件を認識しました」と説明しても、その100件の中に料金が入っているかは別の話です。確かめるのは件数ではなく、自分が今後変えたくなる数字が、実際の編集画面に出ているかです。
| 確かめる項目 | 見る場所 |
|---|---|
| 料金・プランの金額 | 料金カード、料金表の升目、金額の横のラベル |
| 電話番号・営業時間・住所 | ヘッダー、フッター、会社概要 |
| ボタンの文言 | 問い合わせ・予約ボタン |
| 注記・補足 | 「税込」「別途」「〜円から」などの小さな文字 |
| 表の中身 | 曜日別・時間帯別・オプション料金の表 |
確認の仕方は単純で、納品時の打ち合わせで実際の編集画面を開き、上の項目を1つずつ「ここは出ていますか」と指し示すだけです。1つでも出ていなければ、その場で直してもらうか、直すまでの間の変更依頼の窓口を決めます。納品時に受け取るものの全体像はホームページ納品後に自分でどこまで更新できるかに整理しています。
制作会社に伝えるときの文面
すでに納品済みで、料金が出ないと気づいた場合は、次の4点を伝えると特定が早くなります。
- どのページの、どのセクションか(例:サービス紹介ページの3プランのカード)
- 出ている欄と出ていない欄(例:プラン名と説明文は出る。金額と「月額」「一括」の文字が無い)
- 編集画面のどこを見たか(専用の編集メニューか、固定ページの本文か)
- 他のページの料金も同じか、確認した範囲
特に2点目が効きます。「同じカードの中で出る文字と出ない文字がある」という情報は、装飾タグが原因であることをほぼ示しているので、制作側は走査の条件から直接確認に入れます。
起こりうる失敗と予防
| 起こりうること | 予防 |
|---|---|
| 相談された1か所だけ直し、別ページの料金で同じ連絡が来る | 1件目で全ページの料金・電話・営業時間を走査し、同じ穴をまとめて塞ぐ |
| 修正したのに事業者の画面では古い編集画面が動く | テーマやスクリプトのバージョン番号を上げてブラウザ側の保存を更新する |
| 欄は増えたが、保存すると別の場所が書き換わる | 位置情報から元の要素に戻れるか(往復一致)を件数で確認する |
| 後付け処理で新しい料金を追加したとき、また編集画面に出ない | 後付けで文字を作る部品には必ず目印の属性を付ける運用にする |
| 保存済みの編集内容が、次の保存で丸ごと置き換わる | ページ単位で上書きする仕組みなら、保存前に一度全項目を確認してもらう案内を添える |
| 修正ファイルの上書きで本番と手元の版がずれる | 上書き前に本番ファイルの内容が手元の正本と一致するかを照合し、変更前のバックアップを取る |
下の2点は実例のサイトでも該当する仕組みでした。編集内容の保存はページ単位で丸ごと置き換わる方式で、そのページには136件の保存済み項目がありました。こうした方式では、保存操作の前に全項目を一度見直してもらう案内が要ります。ファイルの上書きは、本番・テストの両方でファイルの内容を手元の正本と照合してから行い、変更前の版を別に保管します。
よくある質問
Q. 編集画面に料金が出ないのは制作会社のミスですか。
編集画面の型としては珍しくない仕様で、欠陥とまでは言えません。ただし、料金は「変えたくなる数字」の代表なので、納品前に編集画面に出るかを制作側が確認しておくべき項目です。納品後に気づいた場合でも、原因が分かっていれば編集画面側の修正で済みます。
Q. 自分で直せますか。
編集画面のスクリプトとページの出力を触る作業なので、制作会社に依頼してください。発注者側でやるのは、前述の4点を伝えることと、直ったあとに実際に料金を書き換えて表側に反映されるかを確認することです。
Q. 「項目定義型」で作り直してもらったほうがよいですか。
料金・電話・営業時間など、変える項目が10個程度に決まっているなら項目定義型のほうが確実です。文章全体を自由に変えたいなら自動走査型の利点が生きます。どちらにしても、納品前に「変えたい項目が編集画面に出るか」を実画面で確かめる手順は同じです。
まとめ
- 編集画面に料金の数字だけ出ないのは、編集ツールがその文字を「文章」と認識していないため。壊れているわけではない
- 原因は2つ。太字・行内文字・表の升目といった装飾用タグが走査条件から外れていること、表示後の後付け処理で作られた部品が元データと切り離されていること
- 直すのは制作側で、走査条件の拡張・目印の属性・位置情報の取り方の3点。相談された1か所ではなく全ページの料金を洗い、往復一致を数えて検証する
- 発注者は納品時に、料金・電話・営業時間・ボタン文言・表の中身が実際の編集画面に出るかを1つずつ確かめる。件数の報告では判断しない
納品済みのサイトで料金が変えられない、編集画面のどこにも欄が無いという場合は、ページ・セクション・出ている欄と出ていない欄を添えてお問い合わせからご相談ください。