ホームページの作成にあたって、ホームページビルダーでレスポンシブルも出来るタイプのテンプレートを利用しました。
おおよその全体の作成が出来たのですが、メインページ以外のページでタイトル画像を入れ替えたいと思ったのですが、うまく行きません。
CSSを見て、メインページ用の「layout01」 と サブページ用の「layout02」でページのデザインが作られていると分かりました。(私はその程度の素人です…)
この layout02 の中の「title2.jpg」を、ページ2・3・4で titie_2・3・4.jpgとして入れ替えたいのですが、どのようにCSSを変えれば可能でしょうか?
一応、CSSエディターで layout02 が関係していそうなあちこちの箇所を layout03としてコピペして、HTMLのbodyでclassをlayout03に変えてみたのですが、それでは画像すら出なかったり、何とか画像が出てもレスポンシブルではサイズが小さくならなかったりメニューが出なかったりと、うまく行きません…
できれば layout02 を基本としたまま、各ページの画像だけが変わるように出来れば、今後ページが増えても対策しやすいのですが、可能でしょうか?
みなさんは、どのように各ページを作られているのでしょうか…
ネットで検索しても希望のものが見つからず、こちらでアドバイスを頂ければと思い投稿しました。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
ブラウザ表示されたページ上にある画像上で右クリックし、
表示されたメニューより "要素を調査" を選択します。
開発ツールが起動して画像の要素がハイライト表示されるので、
その部分の 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の変更も気分を新たにやっていけそうです。
ありがとうございました!!!
No.1
- 回答日時:
こんにちは
ご説明が曖昧で、どのような文書構成になっているのかも不明なので、はっきりとは言えませんけれど。
画像を入れ替えるのにCSSを探しているようですが、通常、CSSはページのレイアウトを指定するもので、文書の内容(=どの画像を表示するか)を指定するものではありません。(後述のケースもありますが)
ごく普通に考えれば、HTMLの文書内で
<img src="./images/title2.jpg" alt="title画像" >
のような指定で画像を表示しているのではないかと思いますけれど・・
こちらの場合であれば、参照する画像のアドレスをページごとに変えれば済みます。
CSSの指定として行っている可能性としては、その画像を「背景画像」として表示している場合ですが、ご質問の画像って「背景画像」なのでしょうか?
もしも、そのようなケースだとするなら、CSSで
対象要素のセレクタ { background-image: url("./images/title2.jpg"); }
のような指定を行っていると思いますので、その部分を修正すれば宜しいでしょう。
(ページごとにセレクタ(=クラスなど)を変えて、ひとつのCSSで処理してしまう方法と、ページごとにそれぞれのページ用のCSSを適用する方法とが考えられます)
fujillin様
回答をありがとうございます。
私の変えたい画像は「背景画像」でした!
普通の画像との違いが分かっていませんでしたので、
これで今後は間違えないと思います。
ひとつのCSSで処理するかページ用のCSSを適用するかは、2番目の方がされた回答と同じ…と思って大丈夫ですよね?
厳密に言えば違うかもしれませんが、大まかにCSSの輪郭が見えた気がしました。
お陰様で画像の入替が出来るようになりました、ありがとうございました!!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- SEO 地味なページはnofollowにする? 1 2024/02/26 08:08
- HTML・CSS ホームページをちょっと加工する程度の無料または古くて安く購入できる作成ソフトを教えてください 5 2022/12/16 12:17
- HTML・CSS かっこいいウェブを作るテク 5 2023/12/14 19:19
- HTML・CSS CSSデータの作成方法について(FTP内) 5 2024/03/26 15:55
- Excel(エクセル) Excel 在庫管理について 3 2023/02/09 10:00
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- Android(アンドロイド) いま3台のAndroidを使っています。 AndroidってiPhoneには無いmicroSDXCが 1 2022/05/06 11:42
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- ホームページ作成・プログラミング ホームページビルダーおすすめ? 3 2024/02/02 10:22
- 教えて!goo 質問ページがエラーになるサイト 1 2022/05/29 20:12
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教える店舗&オフィスのセキュリティ対策術
中・小規模の店舗やオフィスのセキュリティセキュリティ対策について、プロにどう対策すべきか 何を注意すべきかを教えていただきました!
-
プログラミング ソースコード
その他(プログラミング・Web制作)
-
コードを書いて下さい( ; ; )写真有り
HTML・CSS
-
windowsでテキストファイルの各行に書かれているパスのファイルを一斉にコピーしたい
その他(プログラミング・Web制作)
-
-
4
index.phpって何ですか? 具体的に教えてください
PHP
-
5
プログラミング
その他(プログラミング・Web制作)
-
6
ブラウザ自体の事じゃなくてJavaScriptで書かれたブラウザ上で動作するアプリのことをなんといい
JavaScript
-
7
今さらですがHPを作成するに当たって初歩の初歩を教えてください
ホームページ作成・プログラミング
-
8
テーブルの行を折りたたみたいのですが、detailsタグとsummaryタグを使ってもうまくいきませ
HTML・CSS
-
9
テキストファイルのファイル名を抽出してBAT処理する方法はありますか。
その他(プログラミング・Web制作)
-
10
CSSデータの作成方法について(FTP内)
HTML・CSS
-
11
CSS、Bootstrapについて containerはなんのためにあるのですか?単にレイアウトする
HTML・CSS
-
12
Pythonって何を意識した言語なんですか?コマンドライン?
その他(プログラミング・Web制作)
-
13
テーブルのセルデータを自動改行させずに、はみ出た部分は切り捨てたい
HTML・CSS
-
14
小学1年生の子です。塾に行かせるのは難しいので、自宅で学べたらと思うのですが、子供にプログラミングを
その他(プログラミング・Web制作)
-
15
index.phpに入るには、どうすればいいですか?
PHP
-
16
オンラインアプリとオフラインアプリを同時に使う方法
Windows 10
-
17
CSSについて教えてください。 こちらのサイトを参考にしているのですが、ナンバーを自動で付けているの
HTML・CSS
-
18
ITの見積もりってなんであんなに高いんですか? 原価がかからないのに
その他(ソフトウェア)
-
19
ぱいソン
Ruby
-
20
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ホームページ・ビルダー 背景画...
-
すぐムラムラするのを抑えたい2...
-
緊急 XVIDEOSを久しぶりに検索...
-
キーワード検索だけでアクセス...
-
bingで、マイナス検索ってでき...
-
skypeでメールアドレスを変更し...
-
A重油の単価
-
VB.NET DataGridView 縦スクロ...
-
ANAマイレージクラブにだけつな...
-
検索について教えてください
-
グーグル検索の「0.21秒」って...
-
百度に繋がってしまいます;;;
-
YouTube 日本支社は存在するの...
-
YouTubeのアカウントを取得した...
-
ログインするにはCookieを有効...
-
google検索で地図にABCなどで出...
-
midomiがずっと検索中...と表示...
-
10000立方メートルは何キロリッ...
-
グーグル検索してキャッシュに...
-
グーグル超える新たな検索ツー...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HPレイアウトが同じページのヘ...
-
画像を差し替えたはずなのに変...
-
リンクボタンを3種類に変化させ...
-
FC2ホームページでアップロード...
-
画像が表示されなくなった
-
IEの”ソースの表示”の無効化
-
スライドショーが動かなくなり...
-
HTMLはあっているのに違う画像...
-
ホームページ・ビルダー 背景画...
-
アップロードした画像が見えない
-
jimdoの独自レイアウトについて
-
faviconが表示されません
-
thview.jsを使って360度パノラ...
-
HP管理画面の作り方
-
すぐムラムラするのを抑えたい2...
-
緊急 XVIDEOSを久しぶりに検索...
-
グーグル検索の「0.21秒」って...
-
bingで、マイナス検索ってでき...
-
VB.NET DataGridView 縦スクロ...
-
YouTube 日本支社は存在するの...
おすすめ情報