HPレイアウトが同じページのヘッダー画像だけ変えたい

ホームページの作成にあたって、ホームページビルダーでレスポンシブルも出来るタイプのテンプレートを利用しました。
おおよその全体の作成が出来たのですが、メインページ以外のページでタイトル画像を入れ替えたいと思ったのですが、うまく行きません。

CSSを見て、メインページ用の「layout01」　と　サブページ用の「layout02」でページのデザインが作られていると分かりました。（私はその程度の素人です…）
この layout02 の中の「title2.jpg」を、ページ２・３・４で titie_2・3・4.jpgとして入れ替えたいのですが、どのようにCSSを変えれば可能でしょうか？

一応、CSSエディターで layout02 が関係していそうなあちこちの箇所を layout03としてコピペして、HTMLのbodyでclassをlayout03に変えてみたのですが、それでは画像すら出なかったり、何とか画像が出てもレスポンシブルではサイズが小さくならなかったりメニューが出なかったりと、うまく行きません…

できれば layout02 を基本としたまま、各ページの画像だけが変わるように出来れば、今後ページが増えても対策しやすいのですが、可能でしょうか？
みなさんは、どのように各ページを作られているのでしょうか…

ネットで検索しても希望のものが見つからず、こちらでアドバイスを頂ければと思い投稿しました。
よろしくお願いいたします。

No.2 ベストアンサー 回答者： Ogre7077 回答日時： 2024/04/14 18:05

ブラウザ表示されたページ上にある画像上で右クリックし、

表示されたメニューより "要素を調査" を選択します。
開発ツールが起動して画像の要素がハイライト表示されるので、
その部分の HTML と CSS ルールの適用状態を調べましょう。

調べた結果、画像ファイルの指定がどこにあるかで対応が変わります。
HTML にある場合 → 単純にページ毎にファイル名を書き換え
CSS ルールにある場合 → 差し替える画像毎に上書きするルールを追加

例)
CSS ルールに画像ファイル指定がある場合の対応

-- HTML
<header><p class=logo><a>タイトル</a></p></header>
-- CSS
header .logo a { background-image: url(title2.jpg); }
↓
-- HTML に3ページ目を表す詳細情報を追加
<header class=p3><p class=logo><a>タイトル</a></p></header>
-- CSS に3ページ目の上書きルールを追加
header .logo a { background-image: url(title2.jpg); }
header.p3 .logo a { background-image: url(title3.jpg); }

"header" より "header.p3" のほうが "CSS ルールの詳細度" が高いため、
HTML が3ページ目であるときに画像ファイル指定が上書きされて、
title2.jpg ではなく title3.jpg に表示が差し替えられます。
4ページ目以降も同様に追加していきましょう。

> layout02 を基本としたまま ... 今後ページが増えても対策しやすい

元のレイアウトと上書きルールを別ファイルに分離すれば、
全体レイアウト変更 → 元のレイアウトの CSS ファイルを修正
個別ページの追加変更 → 上書きルールの CSS ファイルを修正
の様に作業対象が変わるので管理しやすくなるかと思います。

参考)
ブラウザーの開発者ツール
https://developer.mozilla.org/ja/docs/Learn/Comm …
CSS ルールの詳細度
https://developer.mozilla.org/ja/docs/Web/CSS/Sp …
CSS の整理
https://developer.mozilla.org/ja/docs/Learn/CSS/ …

この回答へのお礼

Ogre7077様

回答と参考ページのリンクをありがとうございます。
お陰様で画像の入替が成功しました、ありがとうございます！！
今まで苦戦していましたが、CSS ルールの詳細度を利用して行を追加するだけで変わるとは…

一人目の回答者の方もおっしゃるようにCSSやクラスを活用出来るように、
参考URLは、今の私には分からない事だらけですがブックマークしましたので勉強させていただきます。

今まで頭の中でモヤモヤしていた雲が晴れたような感じですので、
HPの変更も気分を新たにやっていけそうです。
ありがとうございました！！！

お礼日時：2024/04/16 12:18

No.1 回答者： fujillin 回答日時： 2024/04/14 16:57

こんにちは

ご説明が曖昧で、どのような文書構成になっているのかも不明なので、はっきりとは言えませんけれど。

画像を入れ替えるのにCSSを探しているようですが、通常、CSSはページのレイアウトを指定するもので、文書の内容（＝どの画像を表示するか）を指定するものではありません。（後述のケースもありますが）
ごく普通に考えれば、HTMLの文書内で
　<img src="./images/title2.jpg" alt="title画像" >
のような指定で画像を表示しているのではないかと思いますけれど・・
こちらの場合であれば、参照する画像のアドレスをページごとに変えれば済みます。


CSSの指定として行っている可能性としては、その画像を「背景画像」として表示している場合ですが、ご質問の画像って「背景画像」なのでしょうか？
もしも、そのようなケースだとするなら、CSSで
　対象要素のセレクタ { background-image: url("./images/title2.jpg"); }
のような指定を行っていると思いますので、その部分を修正すれば宜しいでしょう。
（ページごとにセレクタ（＝クラスなど）を変えて、ひとつのCSSで処理してしまう方法と、ページごとにそれぞれのページ用のCSSを適用する方法とが考えられます）

この回答へのお礼

fujillin様

回答をありがとうございます。
私の変えたい画像は「背景画像」でした！
普通の画像との違いが分かっていませんでしたので、
これで今後は間違えないと思います。

ひとつのCSSで処理するかページ用のCSSを適用するかは、２番目の方がされた回答と同じ…と思って大丈夫ですよね？
厳密に言えば違うかもしれませんが、大まかにCSSの輪郭が見えた気がしました。

お陰様で画像の入替が出来るようになりました、ありがとうございました！！！

お礼日時：2024/04/16 11:56