h1の背景を画像にして、その上に文字を重ねたい

Question

お世話になっております。h1の背景に画像を設定し、その上に文字を重ねたいです。以下のように組み立てているのですが、文字が表示されません。どのようにすればよいでしょうか。よろしくお願いいたします。

ほうじ茶のおいしい淹れ方

Answer

ECマスターズの田中です。

タグに対する規則（h1{ から } の間）に、text-align:center;という属性を加えていただきますと、文字が画像の中央に対して、中央揃えで表示されるようになります。その際、特に他の目的がなければ、
および
は必要ありません。

Answer

田中様ご回答ありがとうございます。h1の画像も表示されないのですが、何が問題でしょうか。こちらのurlのページです。http://www.morinoen.com/html/page50.htmlhtmlは以下のように組み立てております。ちなみに

ですが、左側メニューとのスペースが空かないために、marginを設定しているのと背景を白にしたかったため設定しております。

ほうじ茶のおいしい淹れ方

お手数をお掛けいたしますが、ご回答お願いいたします。

Answer

ECマスターズの田中です。最初に、いただいた

Answer

田中様ご回答ありがとうございます。早速修正させて頂いましたが、text-indent:-9999pxを解除することで「ほうじ茶のおいしい淹れ方」というh1の文字は出たのですが背景画像が表示されません。なぜでしょうか。こちらのページです。http://www.morinoen.com/html/page50.htmlまた、text-indent:-9999pxを解除して、教えて頂いたinitialを指定しましたが、initialとはどういうときに使うのでしょうか。よくわからず、指定したのですが。。。また、text-indent:-9999pxを解除したことにより、h1の文字がでかでかと表示され邪魔です。h1の文字をstyle="font-size:50%;"等で小さくすることは問題ないですか？また、h1の文字は表示させるようにしなくてはグーグルのガイドラインの違反になり意味がないということでよろしいでしょうか。何度も申し訳ありませんがよろしくお願いいたします。

Answer

ECマスターズの田中です。＞背景画像が表示されません。なぜでしょうか。改めてCSSを確認したところ、h1に対する規則のbackground-image属性の中に、no-repeat が記載されていることが原因でした。background-image属性には、背景画像のURLだけしか記載できず、no-repeat は別途で、background-repeat属性に指定する必要があります。また、background属性でしたら、背景に関するURLとno-repeatをまとめて指定できますので、h1{background-image:url(http://gigaplus.makeshop.jp/morinoen/category/irekata3.jpg) no-repeat;となっているところを、h1{background-image:url(http://gigaplus.makeshop.jp/morinoen/category/irekata3.jpg); background-repeat:no-repeat;もしくはh1{background:url(http://gigaplus.makeshop.jp/morinoen/category/irekata3.jpg) no-repeat;に、修正をお願いします。＞text-indent:-9999pxを解除して、教えて頂いたinitialを指定しましたが、initialとはどういうときに使うのでしょうか。initialは「初期値」という意味ですので、指定すると、何も指定していない時と同じ状態になります。複数のタグに一律で設定したうち、一部だけを何も指定しない状態に戻したい場合に使います。実際の事例は、下記URLをご参照ください。http://www.tohoho-web.com/css/value/initial.htm今回の場合、h1タグ全体にtext-indent:-9999px;が指定されている中で、一部のh1タグに対して初期値に戻すことを想定しておりましたので、text-indent:-9999px; の指定自体を削除し、どこにもない場合はtext-indent:initial; をご記載いただく必要はありません。＞h1の文字をstyle="font-size:50%;"等で小さくすることは問題ないですか？問題ありません。h1タグ本来の書式が問題であれば、divタグなど、他のタグにご変更いただいても結構です。＞h1の文字は表示させるようにしなくてはグーグルのガイドラインの違反になり意味がないということでよろしいでしょうか。「h1の文字を表示させない」ことが、必ずしもグーグルのガイドライン違反にはなりません。正確には、h1タグでも、h1以外のタグでも、検索順位を上げるためのキーワードの羅列を記入し、スタイルシートなどを駆使して隠す行為がガイドライン違反となります。

Answer

田中様無事設定ができました。ありがとうございます！今、以下のurlにhttp://www.morinoen.com/html/page50.htmlメイクショップを使っていますが上段管理メニューにh1を1回、そして、独自ページに1回使っています。１つのページで１回しか使用していなければh1を複数回使用しても問題ないと思っていましたが、上記urlは、ヘッダーとページにh1を1回ずつ使用しておりh1が1つの画面に同時に表示されているので問題があるのではないかと疑問に思いました。いかがでしょうか。h1は同じドメインに1個の使用が望ましいのでしょうか。それとも記載する場所がヘッダーと独自ページと分かれていれば問題ないのでしょうか。どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。h1タグが１つのページに複数入っていても、表示上では特に問題はありません。厳密に、文書としての構造を考えると、一番大きい見出しであるh1タグが先頭にあり、その下にh2やh3が複数存在する、という形が本来の形ではありますが、（ガイドライン違反のような例外を除き）見出しタグが本来の意味で使われていなくても、検索順位を下げることはない、というGoogleスタッフによるコメントがあります。下記URLの動画、および下の和訳をご参照ください。https://www.allegro-inc.com/seo/h1-tag-google

Answer

田中様詳しくご回答ありがとうございます。理解いたしました。

h1の背景を画像にして、その上に文字を重ねたい

カテゴリーから探す