blog » WordPress / 软硬一本 » 如何正确使用h1标签以图片表示你的博客标题
如何正确使用h1标签以图片表示你的博客标题
当然，需要说明的是这是通用法则（我理解的），不仅限于WordPress的主题。
在G7v1之后（现在看起来其实这个主题很粗糙），我不再使用图片形式表现blog的标题，也就是我们通常使用的“<h1>我的博客</h1>”，因为那是错的，来看一下错误的写法（所谓错误是概念的错误，不是逻辑错误）：
<a title="我的博客" href="http://www.myblog.com"> <img src="http://www.myblog.com/image/logo.gif" alt="" /></a>
这是很通常的写法，就是在需要插入图片的地方用<img>标签插入图片，然后用<a>标签加上链接。这个方法对搜索引擎十分不友好，如果<h1>作为博客标题也就是全站唯一的名称标签的话，搜索引擎抓取的是张图，而不是文字，对吧。
于是之后，我发布的theme都没有使用图片形式作为博客标题，但是依然有人会问我想和我自己使用的theme一样使用图片作为标题，该怎么做。这里用G7v5举例说明合理的方式：
<h1><a href="<?php echo get_option('home'); ?>/" title="<?php bloginfo('name'); ?>"><?php bloginfo('name'); ?></a></h1>
这个h1在div #menu中，看起来就是很简单的插入了博客标题，再加上链接，再来看css是怎么写的：
#menu h1 a {
height: 30px;
width: 165px;
float: left;
text-indent: -9999px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
display: block;
}
height: 30px;
width: 165px;
float: left;
text-indent: -9999px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
display: block;
}
很好理解吧？把h1作为一个块来显示（display: block;），指定长宽（和图片一样大小），然后指定h1的背景图片，也就是将我们需要的图片作为h1这个标签的背景。而h1标签中插入的，仍然是作为字符形式出现的博客标题，然后用text-indent: -9999px;将文字甩到屏幕看不到的地方，9999px应该是足够了，谁的屏幕也没那么大吧：）
于是乎，搜索引擎抓到的h1仍然是文字，看起来却是图片显示，对吧。我觉得这样的方式是合理的。
Popularity: 35%
延展阅读
RSS 2.0 | leave a response | trackback
不错，学习了！
正解！
且全文只能存在一个H1
Good!
Nice!
原来是这样，好深奥的说。
对，用文字计较好，不过Image几个Alt也不错的！
se估计很生气，呵呵。
se?
第二快代码中
和有点小错
'<'与'?'之间不应有个空格。
老大，我已经成功，www.88ali.com
@edger
是错了啊。。奇怪。。粘贴是对的，一生成就出空格。。。莫非coolcode出错了。。
知道了。。。wp-admin的
Writing Settings--Formatting
WordPress should correct invalidly nested XHTML automatically
要关掉。。
@underone 汗~
我习惯使用1像素
好像和这篇文章方式一样，呵呵。
http://www.headsetoptions.org/2008/05/12/seo-friendly-images-to-replace-text-in-navigation-menus/
学习了
@bssn
就我这英文。。。。。
终于得知此法，困扰许久，太谢谢了
一直不会用编辑wordpress 你有msn吗，可以直接指教一下吗？
什么叫编辑。。。wordpress.....
呵呵，关于text-indent，
我还喜欢用在那种切换图片的按钮上，a:hover+bg-position触发~
请问你以前那个两栏的风格还有吗？
V2V3不都是2栏的么？
不错，谢谢了，意外发现，这样也有图片的alt提示和链接，不知道是哪定义的http://cofan.cn/blog
知道了，是超链接的title，呵呵
请问是直接填图片url，是不是还有什么符号？....我试了几次都没搞好
哦~搞定了..~so thx
我的MSN：oooooooo@263.net
css隐藏文字，对搜索引擎不友好的说，会被认为是作弊，当然这样的用户体验不错了。善意提醒下
啊？是这样？
搜索引擎如何知道文字偏出10px和9999px有什么区别？
搜索引擎有时候也会搜索CSS文件的。
我觉得可以有两种方式，一个是给图片加alt说明属性；第二个文字图片并存，如下：
html:
underone
css:
h1{width:90px;height:27px;overflow:hidden;position:relative;}
h1 img{position:absolute;top:0;left:0;border:none;background:#fff;}
这样没有隐藏文字，只是用图片把文字给覆盖了，应该就没事了吧。不过没有试验，对搜索引擎友不友好也不知道。
另：
我很喜欢你的这个博客模板风格，但我用的是bo-blog，所以直接在论坛里下了别人做的G7模板，也不知道模板有没有经过你的同意，希望不要介意：）
bob么，应该有朋友移植的，好像还不止一个……
好文，留个记号！
[...] 如何正确使用h1标签以图片表示你的博客标题 [...]
丸子 我还是不太明白你的方法 能不能教教我？ 很着急啊
是，哪里不明白呢？
看到你的回复就过来看了，看完，点头，修改了下颜色搞定。
加你的链接了，希望能加上我哈，谢谢！
这个方法现在会被搜索引擎当做作弊而遭到惩罚的
为什么
老大
G7V4final的Yskin's wp-statistics 插件已经安装
但是侧边栏就是不显示怎么办呢？
搜索教程无果？
拜求老大解决
呵呵 详细点呗！
@0.23stars:
你在侧边栏加入
< ?php ShowStatistics(false); ?>
老大我又来了
统计问题已经解决 谢谢您的答复
现在我想请教您一个关于Neversay的INsay的问题
呵呵 给你添麻烦了
具体如下：
1.边栏的Recent work要怎么才能弄出他那样的效果呢？
具体要修改哪些文件？
我刚刚接触WP，有很多地方还不明白。我在sidebar里面加了代码.但是错位咯。
2.我也安装了Recent Comments的插件，但是不会用即显示头像又显示评论的效果。正文的评论有效果.但是侧边栏却只显示文字，不能显示很小的那个头像。这又该怎么设置呢？还有要修改哪些文件呢？
(据说这个插件要是不支持Widget.那该怎么修改呢)
给您添麻烦了
期待您的解决 ….
谢谢您… …
出错的博客是：http://wp.vmey.net
你那个地方应该有类似“中文工具箱”之类的插件没装吧，导致的随机文章的调用代码出错？
至于mg12的那个插件，你得去他的插件页面上去仔细看，有调用头像的参数，具体我不记得了...包括头像的显示与否，大小什么的。。。
这个插件在各个主题上效果都不完全一样的...