<?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>趣味ネット副業～月100万稼ぐ趣味サイト作りby上海のむてつ &#187; CSS</title>
	<atom:link href="http://www.intactmotor.com/tag/css/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.intactmotor.com</link>
	<description>上海在住の私、のむてつは、自分の中国生活をネタに、インターネットで月100万円以上稼ぐようになりました。自分の趣味・好きな分野で稼ぐ。その方法を、在宅の副業でもできるやり方で紹介します。</description>
	<lastBuildDate>Thu, 09 Jun 2011 09:50:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</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.intactmotor.com/tag/css/feed/" />
		<item>
		<title>画像のポップアップをスタイルシートで</title>
		<link>http://www.intactmotor.com/hobby-interest/css-popup/</link>
		<comments>http://www.intactmotor.com/hobby-interest/css-popup/#comments</comments>
		<pubDate>Tue, 29 Sep 2009 04:45:02 +0000</pubDate>
		<dc:creator>のむてつ</dc:creator>
				<category><![CDATA[趣味サイトを充実させる方法]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[スタイルシート]]></category>
		<category><![CDATA[ポップアップ]]></category>
		<category><![CDATA[画像]]></category>

		<guid isPermaLink="false">http://www.intactmotor.com/?p=369</guid>
		<description><![CDATA[画像のポップアップをしたいな、と思っていまして、
(マウスのカーソルを持っていくと、色が変わったりするやつ)
でも、JavaScriptなどで、HTMLソースが重くなるのは嫌だなー
と思っていたんです。
で、先日こちらの [...]]]></description>
			<content:encoded><![CDATA[<p>画像のポップアップをしたいな、と思っていまして、<br />
(マウスのカーソルを持っていくと、色が変わったりするやつ)<br />
でも、JavaScriptなどで、HTMLソースが重くなるのは嫌だなー<br />
と思っていたんです。</p>
<p>で、先日こちらの記事を見つけまして。</p>
<p>【参考記事】<br />
CSSでポップアップを実現する<br />
<a href="http://garage.mods.jp/ex/css-popup/" target="blank">http://garage.mods.jp/ex/css-popup/</a></p>
<p>これなら、自分でもできるかもしれない！<br />
と思い、やってみました♪</p>
<p>【続きを読む】の隣の、【押しちゃダメ】に<br />
カーソルを当ててみてください！(クククッ、笑)<span id="more-369"></span></p>
<p><s>(↑【押しちゃダメ】は、個別記事ページには出ませんので、<br />
　<a href="http://www.intactmotor.com/">トップページ</a>や<a href="http://www.intactmotor.com/category/hobby-interest/">カテゴリページ</a>で見てみてくださいね♪)</s><br />
サンプルとして置いておきます。お楽しみください(笑)。→<span class="popup"><span class="read-more"><a href="http://www.intactmotor.com/out/ranking-more1" target="_blank" >(押しちゃダメ)<img src="http://www.intactmotor.com/wp-content/uploads/2009/09/osuna.gif" width="280" height="180" /></a></span></span></p>
<p>わりとすんなりできて、<br />
ビックリです。</p>
<p>いやー、これ、面白いので、<br />
いろんな使い方のアイデアが出てきますよね。</p>
<p>(ブログランキングへのクリックが増えるかは、さておき。笑)</p>
<p>やり方ですが、<br />
画像をアップして、あと、<br />
書き加えたのは、こんな感じ。</p>
<p>HTMLのほうは、</p>
<blockquote><p>&lt;span class=&#8221;popup&#8221;&gt;<br />
&lt;a href=&#8221;http://www.intactmotor.com/out/ranking-more1&#8243; target=&#8221;_blank&#8221;&gt;(押しちゃダメ)&lt;img src=&#8221;http://www.intactmotor.com/wp-content/uploads/2009/09/osuna.gif&#8221; width=&#8221;280&#8243; height=&#8221;180&#8243; /&gt;&lt;/a&gt;</p></blockquote>
<p>CSS(スタイルシート)のほうは、</p>
<blockquote><p>.popup img {<br />
display:block;<br />
top:-10000px;<br />
left:-10000px;<br />
position:absolute;<br />
}</p>
<p>.popup a:hover {<br />
position:relative;<br />
}</p>
<p>.popup a:hover img{<br />
top:-190px;<br />
left:-280px;<br />
}</p></blockquote>
<p>という感じです。</p>
<p>HTMLとスタイルシート、ちょっとわかるよ、という方は<br />
やってみてください。面白いですよ。</p>
<h3>スタイルシート初心者におすすめ無料レポートその１</h3>
<p>スタイルシート、ちょっと勉強してみようかな～、<br />
という方には、こちらの無料レポートをおすすめします。</p>
<p>『<a href="http://mailzou.com/get.php?R=8133&#038;M=16413" target="_blank" rel="nofollow">ブラウザ上でブログを表示させながら、スタイルシートをカスタマイズできる方法</a>』<br />
<span class="aqua">ブラウザ上で、ブログを表示させたままスタイルシート（CSS）が変更できてタイトル画像や、背景色・文字の色・大きさなど、変更後のブログの状態を確認しながら作業ができる機能のインストールから使い方までを解説しています。</span></p>
<p>(のむてつ感想)全17ページ。<br />
スタイルシート<b class="red">初心者に、イチオシ</b>の無料レポートです。<br />
インターネットビジネスをするなら必須のブラウザ、Firefoxを使って、<br />
スタイルシートをいじるのを簡単にしよう、という無料レポートです。<br />
中を見てみましたが、これ、いいかも♪</p>
<p>左に、スタイルシートの文字列、右に自分のブログのデザイン、という<br />
感じで、左右を見比べて作業できるので、スタイルシート初心者の方には、<br />
非常に良い方法だと思います。直感的にわかりますからね。</p>
<p>17ページと短い無料レポートですが、内容は◎です♪</p>
<h3>スタイルシート初心者におすすめ無料レポートその２</h3>
<p>『<a href="http://mailzou.com/get.php?R=16908&#038;M=16413" target="_blank" rel="nofollow">【光塾】スタイルシート完全攻略～ブログカスタマイズ</a>』<br />
<span class="aqua">ブログを自由にカスタマイズするには、スタイルシートを理解していると便利です。スタイルシートの基本から応用までブログでよく出てくる項目についてまとめました。seesaaブログでのカスタマイズ方法を基準に記載していますが、スタイルシートは、どのブログでもHPでも同じですので、 FC2ブログやライブドアブログ、MT利用者でも応用できます。合計112ページ：しおり付</span></p>
<p>(のむてつ感想)スタイルシートを<b class="red">しっかりやりたい人には、<br />
イチオシ</b>の無料レポート。</p>
<p>Seesaaブログを例として挙げているのが、いいですね。<br />
スタイルシート初心者の方で、シーサーブログ利用者には、<br />
わかりやすいと思います。特に、実際のスタイルシートに、</p>
<p>/*文字の表示位置*/</p>
<p>というように、どんどんコメント(説明)を入れていく形で<br />
進めていくので、あとで見てもわかるようになると思います。</p>
<p>ブログを実際に、文字色を変えたり、サイドバーの幅を変えたり、<br />
文字列の幅を変えたり、など、カスタマイズ方法が載っていますので<br />
実際にやってみると、楽しいと思います。</p>
<p>ただ、説明は非常にわかりやすいんですが・・・<br />
ページ数が多いので、一気に読もうとすると途中で嫌になるかも(笑)。<br />
実際にやりながら、章ごとにちょっとずつ進めるといいかもしれません。<br />
(このレポート、目次がないのが、イタイです)</p>
<p>あと、スタイルシートカスタマイズのときに役立つ<br />
おススメフリーソフトの紹介なんかも、あります。</p>
<hr />
<p>もっとスタイルシートを勉強したい！という方は、こちらに<br />
まとめてみましたので、ご覧ください。<br />
⇒<a href ="http://www.intactmotor.com/hobby-interest/css-repo/">CSS(スタイルシート)入門用　無料レポート一覧</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.intactmotor.com/hobby-interest/css-popup/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.intactmotor.com/hobby-interest/css-popup/" />
	</item>
	</channel>
</rss>

