width・heightを0にしてロゴを画像にする方法

ここ最近、html5のアウトラインをちゃんとしようと色んなサイトのソースを覗き見しているのですが、nanapiのロゴを画像に置換する手法が面白かったのでご紹介。

定番のロゴを画像にする手法

ロゴを画像にする主流な手法としては、background-imageにロゴ画像を指定し、テキストをtext-indent:-9999px;で遥か彼方に飛ばすという方法が有ります。

ただ、この方法はGoogleにSEOスパムだと認識される恐れが有るという話も有る。が、僕は実際ちょいちょい使ってますがペナルティくらった事は無いので、個人的には使用頻度によるか特にペナルティ対象では無いかと思われる。

width・heightを0にしてロゴを画像にする方法

nanapiで使われていたロゴを画像にする方法というのは、h1タグの中にimgでロゴ画像を置き、ロゴテキストをspanで包んでwidth・heightを0にしてoverflow:hidden;で消すという手法。

See the Pen ZYdNVv by yogawa (@yogawa) on CodePen.

にしてもwidth・heightを0にするのってちょっと大丈夫なんかなって思ってしまいますが、nanapiがやっているという事は今のとこ大丈夫なんでしょうな。

僕もこの方法でロゴを画像に置換しよ〜っと。