<?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>VIVABlog &#187; Web制作の便利ツール</title>
	<atom:link href="http://vivablog.net/category/webtool/feed/" rel="self" type="application/rss+xml" />
	<link>http://vivablog.net</link>
	<description>WordPressやMovableTypeのカスタマイズ、無料ブログやWebサイトの制作・運営に役立つ情報、アイコン、cssテンプレート、ブログパーツ、スクリプトなどを紹介していきます。</description>
	<lastBuildDate>Thu, 02 Feb 2012 02:45:50 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/category/webtool/feed/" />
		<item>
		<title>RSSフィードをTumblrに自動投稿「TumbleRSS」</title>
		<link>http://vivablog.net/seo/kiji649/</link>
		<comments>http://vivablog.net/seo/kiji649/#comments</comments>
		<pubDate>Sun, 15 Jan 2012 13:08:57 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[RSSフィードカスタム]]></category>
		<category><![CDATA[SEO・アクセスアップ]]></category>
		<category><![CDATA[Web制作の便利ツール]]></category>
		<category><![CDATA[RSS]]></category>
		<category><![CDATA[RSS Feed]]></category>
		<category><![CDATA[Tumblr]]></category>
		<category><![CDATA[オンラインツール]]></category>
		<category><![CDATA[リンク]]></category>
		<category><![CDATA[投稿]]></category>
		<category><![CDATA[読み込み]]></category>

		<guid isPermaLink="false">http://vivablog.net/?p=649</guid>
		<description><![CDATA[ミニブログTumblrを宣伝の場として運営したいと考えているユーザーに、とっておきのサービスが「TumblRSS」です。このサービスを利用すれば、WordPress, Movable Type, Tumblr, Blog [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2012/01/tumblrss.png" width="500" height="241" alt="tumblrss.png" /></p>
<p>ミニブログ<a href="http://www.tumblr.com/dashboard" target="_blank">Tumblr</a>を宣伝の場として運営したいと考えているユーザーに、とっておきのサービスが「TumblRSS」です。このサービスを利用すれば、<strong>WordPress</strong>, <strong>Movable Type</strong>, <strong>Tumblr</strong>, <strong>Blogger</strong>といったブログをはじめとする各種RSSフィードから、最新エントリーを抜き出し、Tumblrにリンクもしくはテキストで投稿を自動で行うことができるようになります。</p>
<p><span id="more-649"></span>
<p><img src="http://vivablog.net/wp-content/uploads/2012/01/tumblrss_2.png" width="500" height="229" alt="tumblrss_2.png" /></p>
<p>まず、Tumblrにログインした状態で<a href="http://www.tumblrssapp.com/" target="_blank">TumblRSS</a>を開き、「Get Started」からTumblrでアクセスを許可します。後は、RSS FeedのURLを入力して投稿タイプを指定すれば登録完了。</p>
<p>1つのTumblrに対して複数のRSS Feedを登録することができますが、スパム行為やサーバー負荷を考慮してか、投稿は1日最大100件までに制限されています。</p>
<p>[ <a href="http://www.tumblrssapp.com/" target="_blank">TumblRSS | Import RSS Feeds into Tumblr</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=649&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/seo/kiji649/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/seo/kiji649/" />
	</item>
		<item>
		<title>Mac用のリンクチェックツール「Integrity」</title>
		<link>http://vivablog.net/webtool/kiji629/</link>
		<comments>http://vivablog.net/webtool/kiji629/#comments</comments>
		<pubDate>Wed, 25 May 2011 05:45:27 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[Web制作の便利ツール]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Mac OS X]]></category>
		<category><![CDATA[SEO・アクセスアップ]]></category>
		<category><![CDATA[ツール]]></category>
		<category><![CDATA[バッドリンク]]></category>
		<category><![CDATA[フリーソフト]]></category>
		<category><![CDATA[リンクチェッカー]]></category>
		<category><![CDATA[リンク切れ]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/kiji629/</guid>
		<description><![CDATA[「Integrity」は、Webサイトのバッドリンクのチェックを行うことができるMac OS X用のフリーソフトです。 ブログとなると殆ど行う機会の少ないリンクチェックツールですが、古い記事になるとリンクを貼ったサイトが [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://vivablog.net/wp-content/uploads/2011/05/integrity.png" rel="lightbox[629]"><img src="http://vivablog.net/wp-content/uploads/2011/05/integrity-tm.jpg" width="450" height="267" alt="integrity.png" /></a></p>
<p>「Integrity」は、Webサイトのバッドリンクのチェックを行うことができるMac OS X用のフリーソフトです。</p>
<p>ブログとなると殆ど行う機会の少ないリンクチェックツールですが、古い記事になるとリンクを貼ったサイトが消滅していたりすることもままあり、たまには行いたいものです。</p>
<p>[ <a href="http://peacockmedia.co.uk/integrity/" target="_blank">Integrity</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=629&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/kiji629/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/kiji629/" />
	</item>
		<item>
		<title>類似画像検索エンジン</title>
		<link>http://vivablog.net/webtool/kiji618/</link>
		<comments>http://vivablog.net/webtool/kiji618/#comments</comments>
		<pubDate>Mon, 04 Oct 2010 05:48:50 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[Web制作の便利ツール]]></category>
		<category><![CDATA[アイコン・ロゴ・画像素材]]></category>
		<category><![CDATA[オンラインサービス]]></category>
		<category><![CDATA[検索]]></category>
		<category><![CDATA[類似画像]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/kiji618/</guid>
		<description><![CDATA[[ GazoPa ] 手持ちの画像をアップロードして類似画像検索する他、ドローイングで描いた絵やキーワードでも検索ができる多機能な検索エンジン。画像を元にした検索精度はなかなか。 [ BYO Image Search ] [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2010/10/gazopa.png" width="450" height="276" alt="gazopa.png" /></p>
<p>[ <a href="http://www.gazopa.com/" target="_blank">GazoPa</a> ]</p>
<p>手持ちの画像をアップロードして類似画像検索する他、ドローイングで描いた絵やキーワードでも検索ができる多機能な検索エンジン。画像を元にした検索精度はなかなか。</p>
<p><span id="more-618"></span>
<p><img src="http://vivablog.net/wp-content/uploads/2010/10/ideebyo.png" width="450" height="160" alt="ideebyo.png" /></p>
<p>[ <a href="http://labs.ideeinc.com/upload/" target="_blank">BYO Image Search</a> ]</p>
<p>1MBまでの画像をアップロードして、カラーマッチする類似画像を検索できる。<br />
全く違ったカテゴリの写真などが表示されるので、新たな発見があるかも？</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=618&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/kiji618/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/kiji618/" />
	</item>
		<item>
		<title>WindowsLiveWriterから乗り換え可能なブログエディター「RAVEN」</title>
		<link>http://vivablog.net/webtool/edit/kiji615/</link>
		<comments>http://vivablog.net/webtool/edit/kiji615/#comments</comments>
		<pubDate>Fri, 30 Jul 2010 10:22:40 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[エディター]]></category>
		<category><![CDATA[Blogエディター]]></category>
		<category><![CDATA[RAVEN]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[WindowsLiveWriter]]></category>
		<category><![CDATA[WYSIWYG]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/edit/kiji615/</guid>
		<description><![CDATA[「RAVEN」は、Windows用のブログエディターとして不動の地位を築きつつある「Windows Live Writer」よりも動作がかなり軽く、それでいて機能も殆ど遜色ないフリーのブログエディターです。 複数の画像を [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://vivablog.net/wp-content/uploads/2010/07/raven05.png" rel="lightbox[615]"><img src="http://vivablog.net/wp-content/uploads/2010/07/raven05-tm.jpg" width="400" height="294" alt="raven05.png" /></a></p>
<p>「RAVEN」は、Windows用のブログエディターとして不動の地位を築きつつある「Windows Live Writer」よりも動作がかなり軽く、それでいて機能も殆ど遜色ないフリーのブログエディターです。</p>
<p>複数の画像を一括挿入した際には、&lt;p&gt;で囲われた中に、1枚毎に&lt;br /&gt;が自動挿入される事を除けば、（動作がもっさりしていないので）Windows Live Writerよりも文章が入力し易くてオススメです。</p>
<ul>
<li>多数のブログサービスに対応。</li>
<li>WYSIWYGエディターで記事作成。</li>
<li>複数画像のサムネイル一括出力。</li>
<li>追記にも対応。</li>
</ul>
<p>[ <a href="http://www.zoundryraven.com/index.html" target="_blank">Zoundry Raven</a> ]</p>
<p><span id="more-615"></span>
<p><a href="http://vivablog.net/wp-content/uploads/2010/07/raven01.png" rel="lightbox[615]"><img src="http://vivablog.net/wp-content/uploads/2010/07/raven01-tm.jpg" width="400" height="105" alt="raven01.png" /></a></p>
<p>Windows Live Writerにあるブログアカウントの設定を一括インポートが可能です。<br />
パスワードはインポートされないので再度入力が必要です。</p>
<p><a href="http://vivablog.net/wp-content/uploads/2010/07/raven02.png" rel="lightbox[615]"><img src="http://vivablog.net/wp-content/uploads/2010/07/raven02-tm.jpg" width="400" height="327" alt="raven02.png" /></a></p>
<p>設定画面。</p>
<p><a href="http://vivablog.net/wp-content/uploads/2010/07/raven03.png" rel="lightbox[615]"><img src="http://vivablog.net/wp-content/uploads/2010/07/raven03-tm.jpg" width="400" height="200" alt="raven03.png" /></a></p>
<p>画像挿入時のサムネイルの有無、サイズ、スタイル、位置などの調節ウィンドウ。</p>
<p><a href="http://vivablog.net/wp-content/uploads/2010/07/raven11.png" rel="lightbox[615]"><img src="http://vivablog.net/wp-content/uploads/2010/07/raven11-tm.jpg" width="400" height="199" alt="raven11.png" /></a></p>
<p>記事投稿時の細かい設定は、記事作成ウィンドウの「Configure」から行います。少し気付きにくいですが、下のタブでカテゴリーやPingなども設定できます。</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=615&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/edit/kiji615/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/edit/kiji615/" />
	</item>
		<item>
		<title>スクリーンショット撮影機能の決定版「LightShot」</title>
		<link>http://vivablog.net/webtool/kiji586/</link>
		<comments>http://vivablog.net/webtool/kiji586/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 07:21:09 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[Web制作の便利ツール]]></category>
		<category><![CDATA[画像加工]]></category>
		<category><![CDATA[firefox]]></category>
		<category><![CDATA[Google Chrome]]></category>
		<category><![CDATA[Jing]]></category>
		<category><![CDATA[LightShot]]></category>
		<category><![CDATA[PrintScreen]]></category>
		<category><![CDATA[PrtScn]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[スクリーンショット]]></category>
		<category><![CDATA[フリーソフト]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/kiji586/</guid>
		<description><![CDATA[「LightShot」は、スクリーンショットを撮影してそのまま.png形式でローカルに保存できる他、オンラインにアップロードしたり編集したりといった事も可能なWindows用のフリーソフトです。 Firefoxアドオン、 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://vivasoft.org/wp-content/uploads/2010/06/lightshot_1.png" rel="lightbox[586]"><img src="http://vivasoft.org/wp-content/uploads/2010/06/lightshot_1-tm.jpg" width="400" height="267" alt="lightshot_1.png" /></a></p>
<p>「LightShot」は、スクリーンショットを撮影してそのまま.png形式でローカルに保存できる他、オンラインにアップロードしたり編集したりといった事も可能なWindows用のフリーソフトです。</p>
<p>Firefoxアドオン、IEツールバー、Google Chrome拡張機能なども用意されていますが、安定しているデスクトップアプリケーションをインストールするのが最善でしょう。</p>
<p><span id="more-586"></span>
<p>使い方は、PrintScreenキー（PrtScn）で暗転させて撮影したい部位をマウスでドラッグして選択するだけ。Ctrl+Fで全画面を撮影可能となっています。</p>
<p><img src="http://vivasoft.org/wp-content/uploads/2010/06/lightshot_2.png" width="290" height="62" alt="lightshot_2.png" /></p>
<p>サーバーへのアップロード。<br />
ImageShackを介してEmbedが可能。</p>
<p><a href="http://vivasoft.org/wp-content/uploads/2010/06/lightshot_3.png" rel="lightbox[586]"><img src="http://vivasoft.org/wp-content/uploads/2010/06/lightshot_3-tm.jpg" width="400" height="224" alt="lightshot_3.png" /></a></p>
<p>編集機能はPhotoshopライク。<br />
でも、スクリーンショットの編集にそこまでの機能は必要無かったり・・・。</p>
<p>とはいえ、基本はかなり使いやすいので、<a href="http://jingproject.com/" rel="nofollow" target="_blank">Jing</a>のアイコンが邪魔だったり動画再生に影響が出る人はこちらを使ってみてはいかがでしょうか。面倒なユーザー登録もログインも必要ありませんし、PrtScnキーを最大限に活用できます。</p>
<p>[ <a href="http://lightshot.skillbrains.com/component/content/article/9-download.html" rel="nofollow" target="_blank">LightShot Download</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=586&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/kiji586/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/kiji586/" />
	</item>
		<item>
		<title>Tumblrが公式のバックアップツールを公開</title>
		<link>http://vivablog.net/webtool/kiji579/</link>
		<comments>http://vivablog.net/webtool/kiji579/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 19:17:42 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[Web制作の便利ツール]]></category>
		<category><![CDATA[エディター]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Tumblr]]></category>
		<category><![CDATA[アーカイブ]]></category>
		<category><![CDATA[バックアップ]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/kiji579/</guid>
		<description><![CDATA[Tumblrのコンテンツを丸々バックアップできるMac用のツールが公開されました。 使い方は、Tumblrアカウントにログインして保存先を指定するだけと超簡単。下記のファイルを除き、全てのコンテンツをローカルフォルダに保 [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2010/03/tumblr_backup-1.png" width="340" height="193" alt="tumblr_backup-1.png" /></p>
<p>Tumblrのコンテンツを丸々バックアップできるMac用のツールが公開されました。</p>
<p>使い方は、Tumblrアカウントにログインして保存先を指定するだけと超簡単。下記のファイルを除き、全てのコンテンツをローカルフォルダに保存できます。</p>
<ul>
<li>Private tumblelogs</li>
<li>Submissions</li>
<li>Notes</li>
<li>Feed-imported posts</li>
<li>Audio files from reblogged posts</li>
</ul>
<p><span id="more-579"></span>
<p>バックアップはhtml形式で取られるので、index.htmlを開けばそのままローカル環境でもコンテンツを楽しめます。</p>
<p>また、ファイルパスを書き換えたりといった手を加えることなく、このまま別のWebサーバーにアップロードする事もできるので、引っ越しツールとしても使えます。（独自ドメインでも運用できるTumblrから、わざわざ他のサーバーに引っ越すのはあまり実用的とは言えませんが。）</p>
<p>[ <a href="http://staff.tumblr.com/post/286303145/tumblr-backup-mac-beta" rel="nofollow" target="_blank">The Tumblr Backup app is ready for beta testing! ... | Tumblr Staff</a> ]</p>
<p><img src="http://vivablog.net/wp-content/uploads/2010/03/tumblr_backup-2.png" width="187" height="220" alt="tumblr_backup-2.png" /></p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=579&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/kiji579/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/kiji579/" />
	</item>
		<item>
		<title>iPhoneのメモ帳をモチーフにしたWordPressテーマ</title>
		<link>http://vivablog.net/wordpresscust/kiji568/</link>
		<comments>http://vivablog.net/wordpresscust/kiji568/#comments</comments>
		<pubDate>Fri, 19 Feb 2010 16:07:38 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[WordPressカスタマイズ]]></category>
		<category><![CDATA[テンプレート・CSS]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[n.design]]></category>
		<category><![CDATA[theme]]></category>
		<category><![CDATA[テーマ]]></category>
		<category><![CDATA[メモ帳]]></category>

		<guid isPermaLink="false">http://vivablog.net/wordpresscust/kiji568/</guid>
		<description><![CDATA[n.designから、iPhoneのメモ帳をモチーフにしたデザインのWordPressテーマ「Notepad」がリリースされました。今までの最高傑作といっても良い程の素晴らしい出来となっていて、この先しばらくは至る所で目 [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://vivablog.net/wp-content/uploads/2010/02/notepadtheme.png" rel="lightbox[568]"><img src="http://vivablog.net/wp-content/uploads/2010/02/notepadtheme-tm.jpg" width="450" height="230" alt="notepadtheme.png" /></a></p>
<p>n.designから、iPhoneのメモ帳をモチーフにしたデザインのWordPressテーマ「Notepad」がリリースされました。今までの最高傑作といっても良い程の素晴らしい出来となっていて、この先しばらくは至る所で目にすることになりそうです。</p>
<p>[ <a href="http://www.ndesign-studio.com/wp-themes/notepad" rel="nofollow" target="_blank">Notepad</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=568&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/wordpresscust/kiji568/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/wordpresscust/kiji568/" />
	</item>
		<item>
		<title>WIndows用のカラーピッカー「ColorMania」</title>
		<link>http://vivablog.net/webtool/color/kiji565/</link>
		<comments>http://vivablog.net/webtool/color/kiji565/#comments</comments>
		<pubDate>Sat, 13 Feb 2010 16:00:51 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[サイトの配色・色彩]]></category>
		<category><![CDATA[Win]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[オススメ]]></category>
		<category><![CDATA[カラーピッカー]]></category>
		<category><![CDATA[スポイト]]></category>
		<category><![CDATA[ツール]]></category>
		<category><![CDATA[フリーウェア]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/color/kiji565/</guid>
		<description><![CDATA[Windowsで使えるカラーピッカー「ColorMania」は、フリーソフトでありながらもなかなか多機能で、カラーの生成、生成したカラーパレットの保存、カラーでのフォントの見え方チェック等が行え、デザインもまとまっていて [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2010/02/colormania.png" width="420" height="265" alt="colormania.png" /></p>
<p>Windowsで使えるカラーピッカー「ColorMania」は、フリーソフトでありながらもなかなか多機能で、カラーの生成、生成したカラーパレットの保存、カラーでのフォントの見え方チェック等が行え、デザインもまとまっていて使いやすくてオススメです。</p>
<p>スポイトツールは、クリックしたままで対象までドラッグして使います。</p>
<p>[ <a href="http://www.blacksunsoftware.com/colormania.html" rel="nofollow" target="_blank">ColorMania</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=565&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/color/kiji565/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/color/kiji565/" />
	</item>
		<item>
		<title>CSS3のグラデーション生成ツール</title>
		<link>http://vivablog.net/webtool/basetemplate/kiji563/</link>
		<comments>http://vivablog.net/webtool/basetemplate/kiji563/#comments</comments>
		<pubDate>Sat, 13 Feb 2010 14:58:03 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[テンプレート・CSS]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[gradient]]></category>
		<category><![CDATA[グラデーション]]></category>
		<category><![CDATA[ジェネレーター]]></category>
		<category><![CDATA[生成]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/basetemplate/kiji563/</guid>
		<description><![CDATA[CSS3で可能になったグラデーション。 角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。 グラデーションは手動でやるにはやや面倒なので、こういったジェネレータ [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2010/02/css3gradientgenerator.png" width="450" height="241" alt="css3gradientgenerator.png" /></p>
<p>CSS3で可能になったグラデーション。<br />
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。</p>
<p>グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。<span class="hilite">-webkit-gradient</span> と <span class="hilite">-moz-linear-gradient</span> のどちらにも対応しています。</p>
<p>適応する際は、<span class="hilite">background: -moz-linear-gradient ();</span> <span class="hilite">background: -webkit-gradient ();</span> とします。</p>
<p>[ <a href="http://gradients.glrzad.com/" rel="nofollow" target="_blank">CSS3 Gradient Generator</a> ]</p>
<img src="http://vivablog.net/?ak_action=api_record_view&id=563&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/basetemplate/kiji563/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/basetemplate/kiji563/" />
	</item>
		<item>
		<title>text-shadowで文字を立体的に、または陥没させる</title>
		<link>http://vivablog.net/webtool/basetemplate/kiji553/</link>
		<comments>http://vivablog.net/webtool/basetemplate/kiji553/#comments</comments>
		<pubDate>Thu, 04 Feb 2010 04:05:06 +0000</pubDate>
		<dc:creator>vivablog</dc:creator>
				<category><![CDATA[テンプレート・CSS]]></category>
		<category><![CDATA[フォント]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[text-shadow]]></category>
		<category><![CDATA[影]]></category>
		<category><![CDATA[文字]]></category>
		<category><![CDATA[立体感]]></category>
		<category><![CDATA[陰影]]></category>

		<guid isPermaLink="false">http://vivablog.net/webtool/basetemplate/kiji553/</guid>
		<description><![CDATA[（text-shadowを使用した例） フォントの上下左右に影を作って、立体感や陥没を作り出すCSSプロパティ「text-shadow」。 昔はダサめのサイトでしか使われていなかったのに、ここ最近は、デザインに凝ったセン [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://vivablog.net/wp-content/uploads/2010/02/textshadownorei.png" width="483" height="211" alt="textshadownorei.png" /></p>
<p>（text-shadowを<a href="http://www.tweetcc.com/" rel="nofollow" target="_blank">使用した例</a>）</p>
<p>フォントの上下左右に<strong>影</strong>を作って、立体感や陥没を作り出すCSSプロパティ「text-shadow」。</p>
<p>昔はダサめのサイトでしか使われていなかったのに、ここ最近は、デザインに凝ったセンスの良いサイトでは必ずといって良いほど使われるようになりました。</p>
<p>いきなりtext-shadowを見掛けるようになった理由としては、ぼかしが値が指定できるようになった事、IE以外のブラウザ（Firefox, Google Chrome, Safari, Opera）でサポートされた事、マシンパワーの飛躍的な向上とブログの普及に伴って、重いサイトへの耐性が出来た事などが考えられますが、ただ単に「流行」というのもあるでしょう。</p>
<p>どちらにしても、今が使い時なのは確かです。</p>
<p><span id="more-553"></span>
<p><code>text-shadow: Xpx Ypx Zpx #000 ;</code></p>
<ul>
<li><strong>X</strong>=左右の陰影。プラスで右、マイナスで左方向へ。</li>
<li><strong>Y</strong>=上下の陰影。プラスで下、マイナスで上方向へ。</li>
<li><strong>Z</strong>=ぼかしの大きさ。</li>
</ul>
<p>値は何がよいのか分からないという人は、まずは、全て1pxでやってみて、値を変更しつつ自分のサイトに合わせるのが良いでしょう。このプロパティは、特に平面で単一なカラーの背景よりも、グラデーションやグラフィカルな背景で使うとより効果的です。</p>
<p><code>text-shadow: 1px 1px 2px #999 ;</code></p>
<h4 style="text-shadow: 1px 1px 2px #999 ; background-color: #eee; padding: 10px; font-size: 20px; color: #555;">text-shadowプロパティ</h4>
<p><code>text-shadow: 0px 1px 1px #fff ;</code></p>
<h4 style="text-shadow: 0px 1px 1px #fff ; background-color: #eee; padding: 10px; font-size: 20px; color: #555;">text-shadowプロパティ</h4>
<p><code>text-shadow: 0px 0px 2px #000 ;</code></p>
<h4 style="text-shadow: 0px 0px 2px #000 ; background-color: #eee; padding: 10px; font-size: 20px; color: #fff;">text-shadowプロパティ</h4>
<img src="http://vivablog.net/?ak_action=api_record_view&id=553&type=feed" alt="" />]]></content:encoded>
			<wfw:commentRss>http://vivablog.net/webtool/basetemplate/kiji553/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://vivablog.net/webtool/basetemplate/kiji553/" />
	</item>
	</channel>
</rss>

