HTML CSSの記述の仕方について

2023/09/04 19:46

このQ&Aのポイント

FC2のショッピングカートを利用しようと思い、全く疎いのですがテンプレートから色々いじくって思い通りにできてきました。
しかし、mainカラムの最上部に、ショップのコンセプトなどを書いた画像ファイル（GIF）を貼りたいのですが、HTMLに<img src>で貼るといつでもその画像が上部を占めてしまいます。
背景にしてしまうと、コンテンツが画像の上に重なってしまいます。お店のトップページ（ホーム）の時だけ、そのコンセプト画像が表示したいですが、どうすればいいですか?

ベストアンサー

HTML CSSの記述の仕方について

2013/04/08 21:25

FC2のショッピングカートを利用しようと思い、全く疎いのですがテンプレートから色々いじくって思い通りにできてきました。でもどうしてもわからないことがあります。 mainカラムの最上部に、ショップのコンセプトなどを書いた画像ファイル（GIF）を貼りたいのですがＨＴＭＬに<img src>で貼ってしまうと、いつなんどきでも（商品詳細やお問い合わせ画面の時も）その画像が上部を占めてしまいます。背景にしてしまうと、文字通り背景なので、その画像の上に重なるようにコンテンツが表示されてしまいますし・・・要するに、よくあるネットショップさんみたいにお店のトップページ（ホーム）の時だけ、そのコンセプト画像が表示したいんですがどこをどう触ったらいいですか？ＨＴＭＬ内に「パンくずリスト」という場所があって、そこに  {if DSP_USERPAGE}<li>{userpage_title}</li>{/if} という記述があります。これはＦＣ２仕様の「コンセプトなどを記入できる場所」なのですがここ（とＣＳＳ）を触って画像とすりかえるというのはできませんか？（この場所にコンセプトを書いたのですが、どうもデザイン的にイマイチだったので画像にしたいんです）

CoroQ
お礼率82% (187/228)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

naokita
ベストアンサー率57% (1008/1745)

2013/04/09 02:11 回答No.1

例１、 {if TOPPAGE}<p><img ～～ ></p>{/if} 例２、 <h1 {if TOPPAGE}style="background:url(～～.gif); height:～～px; width:～～px;"{/if}><a href="{top_url}">{shop_name}</a></h1> 未検証だけど・・・

質問者

お礼 2013/04/09 12:50

まずは簡単そうな方。と思って、例１で試してみました。できました！！！！！！ありがとうございます。感謝します。

関連するQ&A

HTMLとCSSを使い、
HTMLとCSSを使い、メニューボタンを作成しました。しかしIE８やgooglchromeではきちんと表示されるのに対して Firefoxではメニューボタンの背景に設定した画像が表示されません。以下にコーディングを記します。 ************************************************************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="outline"> <ul id="ul"> <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> </ul> </div> </body> </html> ************************************************************** メニュー背景ボタンはPhotoshop、色はRGBで作成しました。ちなみに、 <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <a href="#" class="menu"><li>ホーム</li></a> <a href="#" class="menu"><li>トップ</li></a> に変更すると画像は表示されるようになりますが、本来ホームとトップの裏に１つづつ表示されるはずの画像がテキストの無い所でもう１つづつ表示されてしまいます。計４つです。かといって <a href="#"><li class="menu">ホーム</li></a> <a href="#"><li class="menu">トップ</li></a> を <li class="menu"><a href="#">ホーム</a></li> ><li class="menu"><a href="#">トップ</a></li> に変更しても、 a:hoverで色違いの同じ画像を背景にせっとするときにサイズなどがうまくいきません。ボタンを全て画像にして、ビヘイビアでイメージをスワップさせるという手もありますが、それは避けたいと思います。 Firefoxでもきちんと表示される正しいコーディングを教えてください。
- ベストアンサー
- HTML
menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？以下がHTMLタグとCSSになります。アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
ＨＴＭＬ？ＣＳＳ？どこにどう入れたらいいかわかりません。
下記のような記述のあるホームページにページにバナーリンクを貼りたいのですが、どこになにをどのようにいれたらいいのか分かりません。プロの先輩方教えてください。ちなみにバナーの画像のアップロードはしてます。宜しくお願いします。 <ul> {foreach link} <li &align> <a href="{link.url}" target="{link.blank}"> {if link.banner_url}<img src="{link.banner_url}" border='0' alt="{link.title}" width="{link.banner_width}" height="{link.banner_height}">{/if} {!if link.banner_url}{link.title}{/!if} </a> </li> {/foreach link} </ul>
- 締切済み
- HTML
ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP">  <div id="page">  <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div>  <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div>  <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div>  <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
HTML　CSS　編集　助けてください。・
すみません、どうしても分かりません。忙しいけど見てあげてもいいよって方、よろしくお願いします。問題が発生しているのは、FC２カート（http://cart.fc2.com/）です。ショップをつくったのですが、巧く表示されません。問題は２点です。 FC２カート（無料）を登録し、ここで、デザイン設定→デザイン表示の設定→PC用テンプレートの設定→公式テンプレートの追加→basic_whiteを選び、編集へ何か適当に画像を商品として入れてカートをプレビューすれば全商品リスト・カタログ（商品詳細ページでない）の画像が映るんですが、まずここで、一番目の問題、このリストに並ぶ商品画像が、小さくて困っています。この画像を、画像下に出る値段の文末の部分と揃えるようにサイズを調整するにはどうしたらいいでしょうか？編集ページからCSSが開示できますが、探ってみましたが全く見つかりません。２番目も同じような問題です。全商品リスト・カタログの各商品のレイアウトが定まらず、文字数や画像の大きさで勝手に変わるため、一行がきっちり並びそろいません。たての長さを均一にするにはどこをいじったらいいでしょうか。以上、面倒だったり分かりにくい説明だったりしますが、どうかお願いします。＿（＞＜）＿
- ベストアンサー
- CSS
css
プリント時のCSS設定についておたずねします。現在index.htmlとindex.cssがあります。 index.htmlに ----------------------------------------------------------- <link href="index.css" rel="stylesheet" type="text/css" media="all" /> ----------------------------------------------------------- としてindex.cssを読み込み index.css内では ----------------------------------------------------------- body{ background:url("../images/bg_body.gif") repeat-x; } ----------------------------------------------------------- として、bodyの背景に画像を貼り付けています。これを印刷時にはbodyに指定している背景画像を非表示にして印刷させたいのです。 ※ブラウザの詳細設定「背景の色とイメージを印刷する」にはチェックを入れたまま。別途cssを用意しhtml側で ----------------------------------------------------------- <link href="print.css" rel="stylesheet" type="text/css" media="print" /> ----------------------------------------------------------- とすれば出来そうなのですが、ちょっと答えが出ません・・・そもそもなぜこのような事がやりたいのかというとコンテンツ内容が長くなった時、印刷すると複数ページに渡りますが、 <body>に指定した画像が、2ページ目、3ページ目にも表示される為です。背景にしている画像は高さを十分に確保しており横32px×縦3000px位で、一番上（0pxの高さ）から150px位の高さまで単純なグラデーションをかけたものです。 151px以降は1色のベタ塗りという感じです。ブラウザ閲覧上はコンテンツ内容が長くても背景画像のグラデはページ上部のみ表示されるのですが、印刷時に2ページ目、3ページの上部にグラデが表示されてしまうという事です。
- 締切済み
- ホームページ作成ソフト
HTML画像を崩さないようにするためについて
HPのHTMLの画像がブラウザを小さくすると崩れます。崩れない良い方法などありますでしょうか？ http://gachapaso.web.fc2.com/の上部の画像ですがご教授お願いいたします。
- 締切済み
- ホームページ作成ソフト
ＣＳＳについての質問です。
WEBサイト製作で使うCSSについての質問です。結論からいうと「background」での背景画像が表示できません。 HTMLバージョンは「HTML4.01 Transitional」です。形式は div#menu li { width: 180px; height: 40px; ⇒background: #555 url(img/ooo.png) no-repeat; margin: 0px; padding: 3px 0px 0px 0px; } です。この命令の１こ前と１こ後はちゃんと正常に反映されているのですが、この背景画像だけが表示できません。ボックスと背景画像の大きさは合わせています。色々直してみたりしたのですがさっぱりです。回答お待ちしています。よろしくお願いします。
- 締切済み
- その他([技術者向] コンピューター)
cssで背景を重ねることができるのでしょうか？
CSSでナビゲーションバーを作っていますが、ナビゲーションバーのボタンの一つ一つを背景画像であらわしています。ナビゲーションバー全体の背景にまた違う画像を表示させたい（ボタンが途切れた後ろにも画像があるように）のですが、そういうことは可能なのでしょうか？ちなみにＨＴＭＬは <body> <div id="navigation"> <div> <ul> <li class="linkhome"><a href="/"><span>Home</span></a></li> <li class="linkkaisha"><a href="/"><span>kaisha</span></a></li> <li class="linkdoituriq"><a href="/"><span>doituriq</span></a></li> <li class="linkwine"><a href="/"><span>wine</span></a></li> <li class="linkchugoku"><a href="/"><span>chugoku</span></a></li> <li class="linkotoiawase"><a href="/"><span>otoiawase</span></a></li> </ul> </div> </div> </body> </html> という感じで、最初のdivにz-index2を次のdivにz-index1を指定したらできると思ったのですが、表示はナビゲーションバーの後ろに表示させたい画像がまず表示され、その下にナビゲーションバーが表示されます。重ねて表示するのはどうすればいいのでしょうか？質問が分かりづらくて申し訳ございません。どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
HTMLが変なのでしょうか…。
先程HPを作っていたら、TOPページが変な表示になってしまいました。保存する時に同名で同じHTMLのファイルが既にアップローダーにあったのにもかかわらずそのままアップロードしてしまったのが原因なんでしょうか？背景画像を入れなおそうと上記の通り再びアップロードしたらこのようになってしまいました。 http://betty.jp/sinsoku/top.html ここなんです。文字や画像が二つ分挿入されていたり、\nとか変な文字が入っていたりして困ってます。ちなみに画像や文字のHTMLは一つ分しか入っていないハズなんです。 HTMLに関してはまったく初心者なのでわかりません。どなたか教えてください。困っています。
- ベストアンサー
- レンタルサーバ・ASP