【CSS】サイトのロゴ画像に対してテキストを隠し要素にする方法と注意

Webサイトの名前をHTML内にテキストで記述する事はSEO的にも優れていますし、SEOが発展している現在ではサイト内に自社ページの名前をテキストで書いていないという事は滅多にないと思います。

サーチエンジン（クローラ）に正しくサイトタイトルを認識してもらうためには<h1>タグなど適切なタグを用いてそのタイトルをテキストに埋め込む必要があります。

では、ロゴの画像のみをサイトトップに持ってきたい場合はどうすればよいのでしょうか。そんな時はちょっとしたCSSの技法を使って、HTML内にテキストを埋め込みつつそのテキストを隠すことが出来る方法があります。いわゆる「隠しテキスト」と呼ばれる技法ですが、今回はそのやり方と使用上の注意について簡単に説明しておこうと思います。

テキストを埋め込みつつ画像だけを表示させたい時

実はめちゃくちゃ簡単です。

<h1 class="logo">
  <a href="url">Site Title</a>
</h1>

こちらのHTMLに対して以下の様なCSSを記述していきます。

.logo {
  width: 〇〇;
  height: 〇〇;
  background: url('画像のパスを記述') no-repeat;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

何をやっているか一行ずつ説明していきます。まず、セレクタにクラス名であるlogoをとり、それに対してCSSを記述しています。

backgroundプロパティは、background-関連のプロパティに対するショートハンドプロパティで、必要なスタイルを簡潔に記述できます。今回の例では背景に画像をとって、繰り返しをなし（no-repeat）に設定しています。

そして「text-indent: 100%;」では、テキスト部分にインデントを要素のwidth分だけ入れています。このままでは文字が折り返して下の行に表示されてしまうので、「white-space: nowrap;」で折り返しの禁止をしています。

「overflow: hidden;」でインデントが入ったはみ出したテキストを非表示にしています。これら3つのプロパティを設定する事によって、テキストをあたかも無いかのように設定できるのです。

これを「隠しテキスト」と呼びます。実際にはHTML上にテキストが存在していますが、ブラウザ上ではロゴの画像のみ表示されている「テキストが見えない」状態になっているわけです。

不用意に隠しテキストを使用しない

隠しテキストはブラウザから見えないので、大量に見えないキーワードを入れてSEO対策をしようとする「ブラックSEO」的なやり方が可能になります。しかし、これは多くの場合検索エンジンの違反対象となり得る行為です。

特に関係ない画像やテキストを組み合わせた隠しテキストはペナルティの対象となるので、悪用しない方が良いです。

しかしながら隠しテキスト自体はペナルティの対象ではなく、適切な場面で適切な使い方をすれば問題ありません。例えば今回の様にサイトタイトルとサイトロゴを隠しテキストと画像で組み合わせる場合は全く問題ありません。

不用意に隠しテキストを使用するとペナルティの対象となるということは頭の片隅に置いておきましょう。

こういったWeb系のスキル及びプログラミングは覚えることが非常に多いです。効率よくプログラミングを学習したいのであれば「tech boostオンライン」をオススメします。オンラインでどこにいても聞き放題です。無料カウンセリングも行なっているので一度話を聞きに行ってみるというのもアリだと思いますよ！

スポンサードリンク