css スパムにならない画像をテキストに置換する方法

2014年10月12日更新 view: 86 view
photoBy: http://www.shoshinsha.com/hp/tools/img/sub1.gif
スポンサードリンク

画像をテキストに置換しよう

cssで、画像をテキストに置換するには色んな方法がある。

  • 画像置換:-9999px textindent
  • z-index
  • css3

など。

でも、本当に上記方法で良いのだろうか。 中にはSEOスパムになる方法もあるみたい。

そこで、絶対にSEOスパムにならない、素晴らしいテキスト置換方法を紹介。

今回はテキストロゴを画像にします

CSS

<style type="text/css">
h1.logo {
  display:inline-block;
  vertical-align:bottom;
  background:url(/app/webroot/img/logo.png) no-repeat 0px 0px;
  border:0;
  margin:10px;
  padding:0;
}

h1.logo a{
  display:block;
  cursor:pointer;
}
h1.logo a span{
  position:absolute;
  overflow:hidden;
  width:0;
  height:0;
}

h1.logo a{
  width:150px;
  height:44px;
}

</style>

HTML

<div align="center">
<h1 class="logo"><a href="http://www.matomater.com"><span>まとめーたー</span></a></h1>
</div>

たったこれだけで、テキストだったのが画像になります。

lessの場合は?

上記とコードが違いますが、lessの場合はこんな感じでいけます。

h1 {

&.logo {
    display:inline-block;
    vertical-align:bottom;
    background:url(/img/logo/logo.png) no-repeat 0px 0px;
    border:0;
    margin-top:10px;
    padding:0;

    a {
     display:block;
     cursor:pointer;

     width:150px;
     height:44px;

     span {
        position:absolute;
        overflow:hidden;
        width:0;
        height:0;
     }

    }

}

}
スポンサードリンク

関連記事

関連カテゴリ

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月16日 ( 月 ) にアクセスが多かった記事はこちら!