WordPressで制作されたWebサイトでは、公開後にサービス内容や料金プランが変更されることがあります。その際、文章や金額を修正するだけでなく、新しいサービスを追加したり、ページ全体のレイアウトを見直したりする必要が出てくる場合もあります。

今回は、既存のWordPressサイトに掲載されている料金プランの案内ページについて、掲載内容の追加とデザイン変更を行うためのHTML・CSSを調整した事例をご紹介します。既存のページ構成や他のページへの影響を考慮しながら、新しいデザインに合わせて表示を組み直す対応です。

今回のご相談内容

今回ご相談いただいたのは、WordPressサイト内にあるサービスプランの案内ページのリニューアルについてです。

もともとのページでは、2種類のプランを横並びで掲載していましたが、サービス内容の見直しに伴い、新たなプランを追加して3種類の構成に変更することになりました。
また、プランの追加だけでなく、各プランの特徴や料金、サービス内容が分かりやすく伝わるよう、ページ全体のデザインも変更する必要がありました。

新しいデザインでは、各プランを縦に並べ、画像と説明文を左右に配置する構成が指定されていました。さらに、特におすすめしたいプランを目立たせる装飾や、各プランに共通する注意事項の追加なども含まれていました。

既存のWordPressサイトを活かしながら、指定されたデザインに合わせてHTMLとCSSを調整することが今回の対応内容です。

発生していた症状・エラー内容

今回の対応は、Webサイトに不具合やエラーが発生したものではなく、掲載内容とデザインの変更に伴う改修作業です。

変更前のページでは、2つのプランを横並びで表示するレイアウトが採用されていました。そのため、新たにプランを追加して同じ構成のまま表示すると、掲載する情報量が増え、内容を比較しにくくなることが考えられました。

また、既存のHTMLを確認したところ、研修期間を表示する表の一部に、HTMLの構造として適切ではない記述が含まれていました。
このような記述は、ブラウザ側で補正されて表示される場合もありますが、レイアウト変更時に意図しない表示崩れにつながる可能性があります。

そのため、単純にプランを追加するのではなく、既存のHTML構造も確認しながら、新しいデザインに合わせて整理する必要がありました。

原因の特定ポイント

今回の改修で重要だったのは、既存ページのレイアウトがどのようなHTMLとCSSによって構成されているかを確認することでした。

WordPressサイトでは、同じCSSの指定が複数のページで使用されていることがあります。例えば、カード型のレイアウトや見出し、表などのデザインが共通化されている場合、既存のCSSを直接変更すると、今回の対象ページ以外にも影響が及ぶ可能性があります。

今回のページでも、既存の2カラム表示に使用されているクラスがありました。そのため、単純に横並びの指定を縦並びに変更するだけでは、他のページで同じクラスが使用されていた場合に、意図しないレイアウト変更が発生するおそれがあります。

また、新しいデザインでは、画像と説明文の配置だけでなく、見出しの帯や枠線、プランごとの装飾など、従来とは異なる要素が必要でした。

そこで、既存の共通CSSを大きく変更するのではなく、今回のプラン案内部分に専用のCSSを用意する方針としました。
これにより、変更対象を限定しながら、新しいデザインに必要な調整を行いやすくなります。

実際に行った対応内容

まず、既存のHTMLを確認し、プラン案内部分と、それ以外のコンテンツを整理しました。
今回変更するのは料金プランの案内部分が中心だったため、ページ下部にある説明コンテンツやお問い合わせ案内については、既存の構成を維持する方針としました。

次に、従来の2プラン構成を3プラン構成に変更し、それぞれのプランを縦に並べるHTMLを作成しました。
各プランには、対象となる利用者の説明、プラン名、画像、サービス内容、期間、料金、提供内容、注意事項を配置しています。

パソコンでは画像を左側、説明文を右側に配置し、スマートフォンでは画面幅に合わせて縦並びになるよう、CSSで表示を切り替える構成としました。
また、特定のプランを目立たせるための装飾については、画像を別途用意するのではなく、CSSで表現する方法を採用しました。
CSSによる装飾であれば、文字や色、表示位置などの調整がしやすく、画像ファイルを増やさずに済むという利点があります。

さらに、既存HTMLに含まれていた表の不適切な記述についても、見出しと内容が正しく対応するように構造を整理しました。

新たに追加するプランの画像については、作業時点でWordPressへのアップロードが完了していなかったため、仮の画像ファイル名を設定し、後から差し替えられる形としました。

対応後の結果・改善点

今回の対応では、新しいデザインに合わせたHTMLとCSSを作成し、既存ページを置き換えるためのコードを準備しました。
従来の横並びの2プラン構成から、縦並びの3プラン構成へ変更することで、各プランの説明や料金、提供内容を個別に整理できる構成となっています。

また、プランごとに画像と説明をまとめることで、利用者がそれぞれの特徴を確認しやすいレイアウトを目指しました。
既存の共通CSSへの影響を抑えるため、専用のクラスを使用する構成としたことも、今回の改善点の一つです。

なお、コード作成時点では、実際のWordPressサイトへの反映後の表示確認までは完了していません。そのため、既存テーマのCSSとの競合や、パソコン・スマートフォンでの細かな余白などについては、実際の表示を確認したうえで最終調整する必要があります。

今回の対応から分かったこと

今回のように、既存のWordPressページに新しいサービスや料金プランを追加する場合、単純に掲載項目を増やすだけでは対応できないことがあります。

特に、もともと少ない情報量を前提として作られたレイアウトでは、掲載内容が増えることで、見た目のバランスや情報の分かりやすさが変わってしまいます。
そのため、サービス内容の変更に合わせて、ページの構成そのものを見直すことも大切です。

また、既存サイトの改修では、変更したい部分だけを見るのではなく、他のページや共通デザインへの影響も考える必要があります。
WordPressでは、テーマ内で同じHTMLのクラスやCSSを使い回していることもあるため、一部分の修正が別のページの表示に影響する可能性があります。

今回のように、変更対象を明確にしたうえで専用のスタイルを用意することは、既存サイトを安全に改修するための一つの方法です。

同様のトラブルを防ぐために

WordPressサイトで料金プランやサービス案内を変更する際は、掲載する文章や画像だけでなく、現在のページ構成も確認しておくことをおすすめします。
例えば、プランの数が増える場合には、従来のレイアウトのままで見やすさを維持できるか、スマートフォンでも無理なく閲覧できるかを検討する必要があります。

また、既存のCSSを変更する場合は、同じ指定が他のページでも使用されていないか確認することが重要です。

一見すると対象ページだけの変更に見えても、共通のデザイン設定を修正したことで、別のページの表示が崩れてしまうケースも考えられます。
そのため、改修前には現在のHTMLとCSSの構造を把握し、必要に応じてバックアップを取得しておくことが大切です。

変更後は、パソコンだけでなくスマートフォンでの表示も確認し、文字の折り返しや画像の大きさ、表の表示などに問題がないかをチェックすることで、公開後のトラブルを防ぎやすくなります。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、WordPressサイトの保守・運用だけでなく、既存ページのレイアウト変更や掲載内容の追加などにも対応しています。

Webサイトは公開して終わりではなく、事業内容やサービスの変化に合わせて、情報を更新していくものです。
その際、既存のページ構成やテーマの仕様によっては、単純な文章の差し替えだけでは対応できない場合もあります。

私たちは、現在のサイトの構造や変更による影響を確認しながら、必要な範囲での改修方法を検討しています。

WordPressサイトの掲載内容を変更したい、既存ページのデザインを見直したいといった場合も、まずは現在の状況を確認することが大切です。
今後も、日々の保守・制作業務で実際に取り組んだ事例をもとに、WordPressサイトを運用するうえで役立つ情報をお届けしていきます。