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

Question

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

Answer

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

Answer

田中様

ご回答ありがとうございます。
h1の画像も表示されないのですが、何が問題でしょうか。

こちらのurlのページです。
http://www.morinoen.com/html/page50.html

htmlは以下のように組み立てております。
ちなみにですが、左側メニューとのスペースが
空かないために、marginを設定しているのと背景を白にしたかったため
設定しております。







ほうじ茶のおいしい淹れ方



お手数をお掛けいたしますが、ご回答お願いいたします。

Answer

ECマスターズの田中です。

最初に、いただいたタグの中で、
.base{ の後ろにあるべき } が記入されていないため、
その後ろにあるh1に対する規則が全て無効になっていますので、
.baseに対する指定の終わりに、 } を追記していただきますようお願いします。

上記とは別で、ページに適用されている
http://www.morinoen.com/design/morinoen/m_sys_common.css?1460042450
上記CSSの242行目で、

h1 { text-indent: -9999px;}

という指定がされております。
この場合、h1タグの中に入っているテキストが表示されなくなってしまいますので、
目的のh1タグにclass指定を行い、そのclassに対して規則を指定し、text-indent:initial;を指定するなどして
回避していただきますようお願いします。
（いただいたタグの、h1{ を h1.contitle{text-indent:initial; に、をに変更する、など）

なお、m_sys_common.cssに記述されている
h1タグのテキストを表示させない（正確には、ページの左の見えない領域に移動させている）規則ですが、
本来であればページの2行目に表示されるはずである

ほうじ茶 焙じ茶 番茶 日本茶 通販 日本茶専門店 森乃園

上記、検索キーワードが含まれた文字列を隠す目的で導入されております。

このような検索キーワードを隠す行為は、Googleのウェブマスターガイドラインに違反しており、
Google検索から除外される要因となります。
詳しくは、下記URLをご参照ください。
https://support.google.com/webmasters/answer/66353?hl=ja

h1タグは本来、ページ内の一番最初の見出しを示すタグですので、
見出しに相応しい文字列（自家焙煎ほうじ茶の店 森乃園、など）に修正していただき、
h1 { text-indent: -9999px;} の指定を外して、文字が表示されるよう修正していただきますようお願いします。

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

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