<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>トイレのうず &#187; 画像置換</title>
	<atom:link href="http://www.1010uzu.com/boyaki/tag/%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b/feed" rel="self" type="application/rss+xml" />
	<link>http://www.1010uzu.com</link>
	<description>水曜どうでしょうと Mac とアンテナな日々</description>
	<lastBuildDate>Sun, 05 Feb 2012 11:12:06 +0900</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.1010uzu.com/boyaki/tag/%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b/feed" />
		<item>
		<title>CSS画像置換失敗</title>
		<link>http://www.1010uzu.com/boyaki/200812-15133407.html</link>
		<comments>http://www.1010uzu.com/boyaki/200812-15133407.html#comments</comments>
		<pubDate>Mon, 15 Dec 2008 13:34:07 +0900</pubDate>
		<dc:creator>あさこん</dc:creator>
				<category><![CDATA[Web & Internet]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[画像置換]]></category>

		<guid isPermaLink="false">http://www.1010uzu.com/?p=1142</guid>
		<description><![CDATA[先日の画像置換IE6にて表示がめちゃめちゃですね。IE6以下で「position:fixed」が使えないから互換モードで表示して、いろいろ小細工しているからだ。
これを直そうとすると、いちからCSSの組み直しか。ちょっと [...]]]></description>
			<content:encoded><![CDATA[<p>先日の画像置換IE6にて表示がめちゃめちゃですね。IE6以下で「position:fixed」が使えないから互換モードで表示して、いろいろ小細工しているからだ。<br />
これを直そうとすると、いちからCSSの組み直しか。ちょっと時間がかかりそうなので、ペンディング。とりあえず、元に戻した。</p>

	タグ：<a href="http://www.1010uzu.com/boyaki/tag/css" title="CSS" rel="tag">CSS</a>, <a href="http://www.1010uzu.com/boyaki/tag/%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b" title="画像置換" rel="tag">画像置換</a>
]]></content:encoded>
			<wfw:commentRss>http://www.1010uzu.com/boyaki/200812-15133407.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.1010uzu.com/boyaki/200812-15133407.html" />
	</item>
		<item>
		<title>【CSS】画像置換の方法を変更してみた</title>
		<link>http://www.1010uzu.com/boyaki/200812-13225026.html</link>
		<comments>http://www.1010uzu.com/boyaki/200812-13225026.html#comments</comments>
		<pubDate>Sat, 13 Dec 2008 22:50:26 +0900</pubDate>
		<dc:creator>あさこん</dc:creator>
				<category><![CDATA[Web & Internet]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[画像置換]]></category>

		<guid isPermaLink="false">http://www.1010uzu.com/?p=1141</guid>
		<description><![CDATA[CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で表示されないとか問題もある。
旅のサイトでは主にbackgroun [...]]]></description>
			<content:encoded><![CDATA[<p>CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で表示されないとか問題もある。</p>
<p>旅のサイトでは主にbackgroundでメニュー画像を表示して、テキストを text-indent:-9999px; で画面の外に飛ばす方法をとっていたのだけれど、どうもこの「text-indent:-9999px;」がスパム判定されてるっぽい気がするんですよね。旅のサイトをGoogleSiteMapに登録したと同じくらいにGoogleからのアクセスが減っているのです。画像置換とスパムについては下記サイトが参考になりました。<br />
→Emotional Web：<a href="http://www.lllcolor.com/web/seo/80.html" target="_blank" class="liexternal">画像置換とSEOスパムの境界線</a></p>
<p>で、代替方法を複数当たってみて、一番よさそうなAppleのサイトで使われている方法に変更してみました。<br />
→fixture.jp/blog：<a href="http://www.fixture.jp/blog/141" target="_blank" class="liexternal">Appleサイトに見るグローバルメニューの画像置換手法</a></p>
<p><span id="more-1141"></span><br />
●旅サイトのメニュー部分の変更箇所<br />
<strong>【変更前】</strong></p>
<pre>#menu1 li {
	float: left;
	width: 63px;
	list-style-type:none;
	text-indent:-9999px;
}
#menu1 a {
	display: block;
	width: 63px;
	height:28px;
	background: url(images/menu.gif) left top;
}</pre>
<p><strong>【変更後】</strong></p>
<pre>#menu1 li {
	display:inline;
	list-style-type:none;
}
#menu1 a {
	float: left;
	width: 63px;
	height: 0;
	padding-top: 28px;
	overflow: hidden;
	background: url(images/menu.gif) left top;
}</pre>
<p>テキストを画面外に飛ばすのではなく、witdh、heightで指定した枠外にはみ出た部分を非表示にするという方法です。テキストのあるaタグに「height:0」を設定することにより、表示設定で文字を大きくしたときはみだして見える対策もとられています。</p>
<p>他にもいろいろと方法があるみたいなのでリンクだけ張っておきます。<br />
・小粋空間：<a href="http://www.koikikukan.com/archives/2007/11/21-010101.php" target="_blank" class="liexternal">CSS の画像置換で画像にリンクを設定する</a><br />
・CSS TPIS：<a href="http://css.webcreativepark.net/tips15">画像置換-z-index<br />
</a></p>
<p>＊追記＊<br />
IE6 にて表示がおかしかったので、現在は上記方法は使っておりません。また機会がありましたら記事にします。</p>

	タグ：<a href="http://www.1010uzu.com/boyaki/tag/css" title="CSS" rel="tag">CSS</a>, <a href="http://www.1010uzu.com/boyaki/tag/%e7%94%bb%e5%83%8f%e7%bd%ae%e6%8f%9b" title="画像置換" rel="tag">画像置換</a>
]]></content:encoded>
			<wfw:commentRss>http://www.1010uzu.com/boyaki/200812-13225026.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.1010uzu.com/boyaki/200812-13225026.html" />
	</item>
	</channel>
</rss>

