CSSの背景画像置換と印刷について

このQ&Aのポイント
  • CSSの背景画像置換と印刷についての質問です。
  • テキストのみでHTMLを書いて、設定に関わらず印刷されるように画像を配置する方法について教えてください。
  • また、テキストのみと普通の画像を置いた場合、SEOの効果に差があるのでしょうか?
回答を見る
  • ベストアンサー

cssの背景画像置換と印刷について

htmlの項目に質問すべきなのかもしれませんが、 目的がSEOなのでこちらに。 例えば<h1>タイトル</h1> のように書いたタイトルをtext-indent:-9999px;として画面の外に逃がし、 背景画像を指定して表示させるのはよくある手法だと思いますが、 これだと印刷時に背景を表示しない設定にしていると、当然ですが印刷されません。 このようにテキストのみでhtmlを書いて、 設定に関わらず印刷されるように画像を配置するのに何かいい方法はありませんか? http://www.lucky-bag.com/archives/2005/12/print-background-image.html ここで目的に近いものを見つけましたが、1バイト文字しか使えないようで、実用向きではありません。 何かいいものがあれば教えていただけると助かります。 それともう一点質問なのですが、上記のようにテキストのみを書いたものと、 普通に画像を置いてaltを付けたものではやはりSEOの効果としてはかなり差が出てきますでしょうか? ほとんど変わりないのなら、方法がなければ普通に画像を置くようにしようかな、とも思っているのですが。

  • tkmojo
  • お礼率62% (116/186)
  • SEO
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

text-indent:-9999pxは、昔からどうなの? と話題が尽きませんし、皆さんも返答も避けているようですが まだまだ、この手法は誰も何とも言えないと思います。 正式発表があれば助かりますが・・・ ちらほらスパム認定の説も出ています。真意は全くわかりません。

tkmojo
質問者

お礼

回答ありがとうございます。 今までに検索エンジンがこれをスパムと判断したという話は聞きませんので 個人的にはこれからも大丈夫ではないかと思っています。 逆に画像のaltを読まなかったりというのは過去Googleであったらしいですが。 とりあえずこの手法自体に対しての良し悪しは置いといて、 こういう単純なソースで印刷可能な画像を問題なく配置できるかという事についてご回答を頂けたら、と思います。 javascriptを使ってhtmlを置き換えると出来ますが、 これだと若干重い上にさすがに無理やりな感じが否めないので もっとスマートな手法があれば…と思っています。

関連するQ&A

  • CSSのリスト 背景画像が表示されません

    横並びのメニューを作成したいと思っています。 text-indent:-999pxを利用して、背景画像のみを表示させようとしているのですが、h1はうまくいくもののリスト(li)についてはまったく表示されません。 ちなみにtext-indentを使用しなければ背景画像は表示されますが、かなり画像が下にずれ込んでしまっています。 よろしくお願いします。 #header h1 { margin: 5px 0 0 20px; padding: 0; width: 248px; height: 143px; float: left; text-indent: -9999px; font-size: 130px; background: url(../images/logo.jpg) no-repeat #FFFFFF; background-position: center; } ul { margin: 0; padding: 0; width: 635px; height: 54px; } li{ float: left; list-style: none; margin: 0; padding: 5px; font-size: 50px; text-indent:-999px; } li#top { background: url(../images/menu/top.jpg) no-repeat; }

    • ベストアンサー
    • HTML
  • CSSで設定した背景画像が印刷されない

    ホームページの製作でCSSを利用して作成をしてみたのですが bodyに設定した背景画像は表示も印刷もされるのですが h1やh2などに設定した背景画像が表示はされるのですが印刷が出来ません。 media="all"にはしたので表示も印刷もされるはずだと思ったのですが。 どのようにすると印刷されますか?

  • CSSで背景画像を設定する

    <html> <head> <title>--------</title> <style type="text/css"> body{background-image:url(image/-----.jpg)} </style> </head> ~~~ 画像を設定しましたが別のファイルではこの設定で表示できましたがこのファイルでは背景画像が設定できません。

    • ベストアンサー
    • HTML
  • CSSでテキストインデントをマイナスにすると背景画像も消えてしまうのです

    こんにちは、ログを探してみましたが似通ったものが見つからなかったので教えてください。 CSSを使ってのページデザインを勉強しています。ナビゲーションバーを、背景を使って画像にしようと思い、テキストインデントをマイナスにして消す方法を本で読みました。やってみたのですが、背景画像も一緒に消えてしまいました。 親ボックスで右寄せにすると、今度はテキストインデントは解除され、テキストと背景画像が重なって右寄せになってしまいます。 横幅700の親ボックスに600の子ボックスを右寄せにしたいので、以下のようなソースにしてみました。 HTML側 <div id="navi"> <ul id="navibar"> <li><a href="***" id="link1" title="リンク1">link1</a></li> <li><a href="***" id="link2" title="リンク2">link2</a></li> ---同様にリンクが続く--- </ul> </div> CSS側 #navi{ width:700px; text-align:right; } #navibar{ width:600px; list-style-type:none; background-color:transparent; } ul#navibar li{ width:120px; float:left; border:none; display:block; } #navibar #link1{ width:106px; height:20px; text-indent:-500em; background-image:url("images/link1bg.gif"); background-repeat:no-repeat; } #navibar #link2{ width:106px; height:20px; text-indent:-1000em; background-image:url("images/link2.gif"); background-repeat:no-repeat; } 以下同様に続く どのように修正すれば背景だけ表示できますでしょうか。アドバイスお待ちしています。

    • ベストアンサー
    • CSS
  • CSSの画像置換

    CSSの画像置換のため、以下の通りに書いています。 PCで見た際には画像が正常に表示されるのですが、 スマホで見た場合、widthが625pxで指定してあるのではみ出してしまうのです。 これを100%等にすると画像が欠けてしまいます。 この場合はどの様にするべきでしょうか? 宜しくお願いします。 .txtint { text-indent: 100%; white-space: nowrap; overflow: hidden; } .txt_btm30 { font-size: 105%; letter-spacing: 0.05em; line-height: 170%; margin: 10px 0 30px; width: 100%; } <p class="txtint txt_btm30" style="background: url('***.gif') no-repeat; width:625px; height:118px">テキスト</p>

    • 締切済み
    • CSS
  • cssで背景画像が貼れない

    background-image: url(××.gif) cssで背景画像を表示させたいのですがこのタグだとどうしても 表示されません。 画像は同じフォルダにあります。 どなたかご教授願えませんでしょうか お願いします。

  • h1,h2タグに背景画像

    よろしくお願いします。 このページでoff-leftというテクニックを知りました。 http://www7.plala.or.jp/zeroxstyle/use_xhtmlandcssoffleft.html h1タグなどに背景画像として文字画像を表示させ、テキストはCSSのtext-indentで画面の外に追いやるというものです。 確かにこれなら見た目も綺麗だし、文章構造もすっきりしたアクセシブルなサイトになりますが、googleからSEOスパムと判定されるのではないか疑問です。 実際にこのテクニックを使っているサイトってあるのでしょうか? 素直にh1タグにalt属性つきの画像を入れたほうが無難でしょうか・・・・?

    • ベストアンサー
    • SEO
  • css画像置換を使ったロールオーバーボタンが表示されない

    ナビゲーションリストを作成しています。 アンカーリンクしたテキストをindentで飛ばして 背景画像を表示させ、マウスオーバーは a:hoverで背景画像を高さぶんずらして対応するタイプ、 いわゆる画像置換式のロールオーバーボタンを作りました。 制作環境はMac OSX DreamWeaverCS3です。 まず気になるのが、DreamWeaverの作成画面で このボタン部分が空白で表示される事です。 これはそんなものなのでしょうか。 Firefox,safari,Operaでうまく表示されていたので、 気にしないで制作を進めてきたのですが、 ネット上のレンダリングサービスでは、windowsXP IE7で DreamWeaverの作成プレビューと同じように空白表示となり、 もしや何か間違っているのではと思いはじめました。 ネット上のレンダリングサービスは不完全という話もあり、 友人のwindowsXP IE7では見えているそうなので 問題があるのかもわかりません。 よろしくお願いします。 a.bt1 { display:block; width:150px; height:50px; text-indent:-9999px; background:url(images/bt1.jpg) no-repeat; margin:10px 0px 0px 0px; float:left; overflow:hidden; } a:hover.bt1 { background-position:0px -50px; }

    • ベストアンサー
    • HTML
  • 背景画像をくりかえさないhtml

     すっごいど基礎な質問ではずかしい限りです。 いま手元にテキストがなく、分からないためみなさん の知恵をおかりしたいと思います。 背景画像をつくったのですが、普通に BODY background="../icon/○○○.jpg" だと、画像をくりかえして表示してしまうのですが これを繰り返さないにするのにはどうするのか?? そのHTMLを教えた下さい!! テキストがないと何もわからない超初心者なので なるべく詳しくお願いします。。。。

    • ベストアンサー
    • CSS
  • h1にタイトル画像を指定しているのですが・・

    h1にテキストでは、ページのタイトルを入れて、CSSで背景を指定しています。 【HTML】 <div id="header><h1>タイトル</h1></div> 【CSS】 #header h1{ text-indent: -9999px; background-image: url(../images/share/title.gif); background-repeat: no-repeat; height: 43px; width: 317px; margin-top: 10px; margin-bottom: 10px; margin-left: 10px; text-align: left; } FirefoxとIEでは表示されているのですが、Operaで見ると表示されていません。Operaで表示させることは難しいのでしょうか?

専門家に質問してみよう