<?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:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>ウェブデザイナー的ホームページ制作最適化 &#187; javascript</title>
	<atom:link href="http://www.web-nouhau.com/category/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.web-nouhau.com</link>
	<description>CMSやSEOなどホームページ制作業務で身近に使うことの情報整理</description>
	<pubDate>Sun, 29 Nov 2009 13:56:49 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</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.web-nouhau.com/category/javascript/feed" />
		<item>
		<title>javascriptでブラウザを閉じる</title>
		<link>http://www.web-nouhau.com/archives/187</link>
		<comments>http://www.web-nouhau.com/archives/187#comments</comments>
		<pubDate>Sun, 14 Jun 2009 12:48:06 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/?p=187</guid>
		<description><![CDATA[javascriptでブラウザを閉じるソース。

&#60;form&#62;
&#60;input type=&#34;button&#34; value=&#34; Close &#34; onClick=&#34;opener.winfl=0;window.close()&#34;&#62;
&#60;/form&#62;

ちょこっと使うことがあったので、
メモ程度に。。。
]]></description>
			<content:encoded><![CDATA[<p>javascriptでブラウザを閉じるソース。</p>
<pre class="brush: html;">
&lt;form&gt;
&lt;input type=&quot;button&quot; value=&quot; Close &quot; onClick=&quot;opener.winfl=0;window.close()&quot;&gt;
&lt;/form&gt;
</pre>
<p>ちょこっと使うことがあったので、<br />
メモ程度に。。。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/187/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/187" />
	</item>
		<item>
		<title>はてなスターをブログに設置</title>
		<link>http://www.web-nouhau.com/archives/175</link>
		<comments>http://www.web-nouhau.com/archives/175#comments</comments>
		<pubDate>Thu, 11 Jun 2009 13:45:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[SEO]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[アクセスアップ講座]]></category>

		<category><![CDATA[はてなスター]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/?p=175</guid>
		<description><![CDATA[はてなスターをブログに設置しました。

&#60;script type=&#34;text/javascript&#34; src=&#34;http://s.hatena.ne.jp/js/HatenaStar.js&#34;&#62;&#60;/script&#62;
&#60;script type=&#34;text/javascript&#34;&#62;
Hatena.Star.SiteConfig = {
entryNodes: {
'div.section': {
uri: 'h3 a',
title: 'h3',
container: 'h3'
}
}
};
&#60;/script&#62;

当ブログの場合は、
div.section　→　div.post
uri: &#8216;h3 a&#8217; 　→　uri: &#8216;h2 a&#8217;
title: &#8216;h3&#8242; 　→　title: &#8216;h2&#8242;
container: &#8216;h3&#8242; 　→　&#8217;h2&#8242;
って感じで動作します。
この部分は、自分のブログに合わせて下さい。
]]></description>
			<content:encoded><![CDATA[<p><span style="color: #ff6600;"><strong>はてなスター</strong></span>をブログに設置しました。</p>
<pre class="brush: javascript;">
&lt;script type=&quot;text/javascript&quot; src=&quot;http://s.hatena.ne.jp/js/HatenaStar.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
Hatena.Star.SiteConfig = {
entryNodes: {
'div.section': {
uri: 'h3 a',
title: 'h3',
container: 'h3'
}
}
};
&lt;/script&gt;
</pre>
<p>当ブログの場合は、<br />
div.section　→　div.post<br />
uri: &#8216;h3 a&#8217; 　→　uri: &#8216;h2 a&#8217;<br />
title: &#8216;h3&#8242; 　→　title: &#8216;h2&#8242;<br />
container: &#8216;h3&#8242; 　→　&#8217;h2&#8242;<br />
って感じで動作します。</p>
<p>この部分は、自分のブログに合わせて下さい。</p>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/175/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/175" />
	</item>
		<item>
		<title>CSSの指定を選択可能にして、cookieに保存</title>
		<link>http://www.web-nouhau.com/archives/45</link>
		<comments>http://www.web-nouhau.com/archives/45#comments</comments>
		<pubDate>Wed, 06 May 2009 14:30:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[cookieに保存]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/archives/45</guid>
		<description><![CDATA[訪問者側でCSSを指定して、それによって、
次回以降のアクセスは指定したCSSが自動的に適用されるようにする。
たぶんYahoo!のトップページも同じ感じだと思います。

これらを選ぶと、次回から一度選んだCSSが適用されます。
▼javascriptソース（headタグ内）

&#60;script type=&#34;javascript&#34;&#62;
&#60;!--
var cssfiles = new Array();
cssfiles[0] = &#34;style0.css&#34;;
cssfiles[1] = &#34;style1.css&#34;;
cssfiles[2] = &#34;style2.css&#34;;
var css = GetCookie(&#34;CSS&#34;);
if(css == &#34;&#34;){css = cssflies[0];}
document.write('&#60;link rel=&#34;styleseet&#34; href=&#34;'+css+'&#34; tyl=&#34;text/css&#34;&#62;');

function CssfChange(sel){
if(sel.options[sel.selectedIndex].value){
SetCookie(&#34;CSS&#34;,cssfiles[sel.options[sel.selectedIndex].value]);
window.location.reload();
}
}

function GetCookie(key){
var tmp = document.cookie + &#34;;
var index1 = tmp.indexOf(key,0);
if(index1 != -1){
tmp = tmp.substring(index1,tmp.length);
var index2 = tmp.indexOf(&#34;=&#34;,0)+1;
var index3 = tmp.indexOf(&#34;;&#34;index2);
return(unescape(tmp.substring(index2,index3)))
}
return(&#34;&#34;);
}

function SetCookie(key,val){
document.cookie = key + &#34;=&#34; + escape(val) + &#34;;expires = Fri, 31-DEC -2010 [...]]]></description>
			<content:encoded><![CDATA[<p>訪問者側でCSSを指定して、それによって、<br />
次回以降のアクセスは指定したCSSが自動的に適用されるようにする。</p>
<p>たぶんYahoo!のトップページも同じ感じだと思います。</p>
<p><img class="waku" src="http://www.web-nouhau.com/image/kizi/csscookie.gif" alt="Yahooトップページ" /></p>
<p>これらを選ぶと、次回から一度選んだCSSが適用されます。</p>
<p>▼javascriptソース（headタグ内）</p>
<pre class="brush: javascript;">
&lt;script type=&quot;javascript&quot;&gt;
&lt;!--
var cssfiles = new Array();
cssfiles[0] = &quot;style0.css&quot;;
cssfiles[1] = &quot;style1.css&quot;;
cssfiles[2] = &quot;style2.css&quot;;
var css = GetCookie(&quot;CSS&quot;);
if(css == &quot;&quot;){css = cssflies[0];}
document.write('&lt;link rel=&quot;styleseet&quot; href=&quot;'+css+'&quot; tyl=&quot;text/css&quot;&gt;');

function CssfChange(sel){
if(sel.options[sel.selectedIndex].value){
SetCookie(&quot;CSS&quot;,cssfiles[sel.options[sel.selectedIndex].value]);
window.location.reload();
}
}

function GetCookie(key){
var tmp = document.cookie + &quot;;
var index1 = tmp.indexOf(key,0);
if(index1 != -1){
tmp = tmp.substring(index1,tmp.length);
var index2 = tmp.indexOf(&quot;=&quot;,0)+1;
var index3 = tmp.indexOf(&quot;;&quot;index2);
return(unescape(tmp.substring(index2,index3)))
}
return(&quot;&quot;);
}

function SetCookie(key,val){
document.cookie = key + &quot;=&quot; + escape(val) + &quot;;expires = Fri, 31-DEC -2010 23:59:59 GMT;&quot;;
}
// --&gt;
&lt;/script&gt;
&lt;noscript&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style1.css&quot; type=&quot;text/css&quot;&gt;
&lt;/noscript&gt;
</pre>
<p>▼HTMLソース</p>
<pre class="brush: html;">
&lt;form name=&quot;form&quot;&gt;
&lt;select name=&quot;file&quot;&gt;
&lt;option value=&quot;0&quot;&gt;style0.css&lt;/option&gt;
&lt;option value=&quot;1&quot;&gt;style1.css&lt;/option&gt;
&lt;option value=&quot;2&quot;&gt;style2.css&lt;/option&gt;
&lt;/select&gt;
&lt;input type=&quot;button&quot; value=&quot;変更&quot; onclick=&quot;CssfChange(document.form.file)&quot;&gt;
&lt;/form&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/45/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/45" />
	</item>
		<item>
		<title>入力フォームを選択したらフォーカスされるinput</title>
		<link>http://www.web-nouhau.com/archives/43</link>
		<comments>http://www.web-nouhau.com/archives/43#comments</comments>
		<pubDate>Tue, 05 May 2009 12:22:44 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[フォーカス]]></category>

		<category><![CDATA[フォーム]]></category>

		<category><![CDATA[ユーザビリティ]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/archives/43</guid>
		<description><![CDATA[入力フォームを選択したらフォーカスされるinputを作成するには、javascriptとcssを使います。
入力中のフォームがフォーカスされることは「訪問者がどの部分を入力しているか？」が分かりやすく、ユーザビリティが高まります。

▼HTMLサンプルソース

&#60;input size=&#34;35&#34; name=&#34;name&#34; style=&#34;background:#ffffff;&#34; onfocus=&#34;this.style.backgroundColor='#99cc00'&#34; onblur=&#34;this.style.backgroundColor='#ffffff'&#34; type=&#34;text&#34; /&#62;

]]></description>
			<content:encoded><![CDATA[<p>入力フォームを選択したらフォーカスされるinputを作成するには、javascriptとcssを使います。<br />
入力中のフォームがフォーカスされることは「訪問者がどの部分を入力しているか？」が分かりやすく、ユーザビリティが高まります。</p>
<input size="35" name="name" style="background:#ffffff;" onfocus="this.style.backgroundColor='#99cc00'" onblur="this.style.backgroundColor='#ffffff'" type="text" /></p>
<p>▼HTMLサンプルソース</p>
<pre class="brush: html;">
&lt;input size=&quot;35&quot; name=&quot;name&quot; style=&quot;background:#ffffff;&quot; onfocus=&quot;this.style.backgroundColor='#99cc00'&quot; onblur=&quot;this.style.backgroundColor='#ffffff'&quot; type=&quot;text&quot; /&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/43/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/43" />
	</item>
		<item>
		<title>フォントサイズをワンクリックで変更</title>
		<link>http://www.web-nouhau.com/archives/44</link>
		<comments>http://www.web-nouhau.com/archives/44#comments</comments>
		<pubDate>Wed, 10 Sep 2008 11:43:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[フォントサイズ]]></category>

		<category><![CDATA[ワンクリック]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/archives/44</guid>
		<description><![CDATA[フォントサイズをワンクリックで変更するには、
デフォルトの状態から大きなフォント『A』を押すと、
フォントが大きく表示されて、
小さいフォント『A』を押すと、
フォントが小さく表示されます。
javascriptでCSSのfont-sizeプロパティを変更することで実現します。
▼javascriptソース（headタグ内）

var Default = 2;
var tags = new Array('div','td','tr');
var sizing = nre Array('xx-small','x-small','small','medium','large','x-large','xx-large');
function FontChange(target,tarF){
if(!document.getElementByld) return
var dore = document,tarS = null,fontSize = Default,value,su,cTags;
fontSize += tarF;
if(fontSize &#60; 0) fontSize = 0;
if(fontSize &#62; 6) fontSize = 6;
Default = fontSize;
if(!(tarS = dore.getElementByld(target))) tarS =
dore.getElementsByTagName(target)[0];
tarS.style.fontSize = sizing[fontSize];
for(value = 0; value &#60; tags.length; value++){
cTags = tarS.getElementsByTagName(tags[value]);
for(su = 0; su &#60; cTags.length; su++) [...]]]></description>
			<content:encoded><![CDATA[<p>フォントサイズをワンクリックで変更するには、<br />
デフォルトの状態から大きなフォント『A』を押すと、<br />
フォントが大きく表示されて、<br />
小さいフォント『A』を押すと、<br />
フォントが小さく表示されます。<br />
javascriptでCSSのfont-sizeプロパティを変更することで実現します。</p>
<p>▼javascriptソース（headタグ内）</p>
<pre class="brush: javascript;">
var Default = 2;
var tags = new Array('div','td','tr');
var sizing = nre Array('xx-small','x-small','small','medium','large','x-large','xx-large');
function FontChange(target,tarF){
if(!document.getElementByld) return
var dore = document,tarS = null,fontSize = Default,value,su,cTags;
fontSize += tarF;
if(fontSize &lt; 0) fontSize = 0;
if(fontSize &gt; 6) fontSize = 6;
Default = fontSize;
if(!(tarS = dore.getElementByld(target))) tarS =
dore.getElementsByTagName(target)[0];
tarS.style.fontSize = sizing[fontSize];
for(value = 0; value &lt; tags.length; value++){
cTags = tarS.getElementsByTagName(tags[value]);
for(su = 0; su &lt; cTags.length; su++) cTags[su].style.fontSize =sizing[fontSize];
}
}
</pre>
<p>▼HTMLソース</p>
<pre class="brush: html;">
&lt;p&gt;
    フォントを大きく ⇒ &lt;a href=&quot;javascript:FontChange('body',1)&quot;&gt;『A』&lt;/a&gt;&lt;br&gt;
    フォントを小さく ⇒ &lt;a href=&quot;javascript:FontChange('body',-1)&quot;&gt;『A』&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;
</pre>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/44/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/44" />
	</item>
		<item>
		<title>マウスカーソルオンで画像を白黒からカラーにする</title>
		<link>http://www.web-nouhau.com/archives/41</link>
		<comments>http://www.web-nouhau.com/archives/41#comments</comments>
		<pubDate>Thu, 04 Sep 2008 23:07:42 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[CSS]]></category>

		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.web-nouhau.com/archives/41</guid>
		<description><![CDATA[画像にマウスを持っていくと、白黒からカラーに変わるjavascript。画像がライトアップされてような感じで表現できます。
JavaScript のソース（headタグ内）

function GrayOn(img){&#160;&#160;&#160; img.filters["Gray"].enabled = true;}function GrayOff(img){
&#160;&#160;&#160; img.filters["Gray"].enabled = false;
}


HTML のソース

&#60;img src=&#8221;sample.jpg&#8221; style=&#8221;filter:Gray();&#8221; onMouseover=&#8221;GrayOff(this)&#8221; onMouseout=&#8221;GrayOn(this)&#8221;&#62;

]]></description>
			<content:encoded><![CDATA[<p>画像にマウスを持っていくと、白黒からカラーに変わるjavascript。画像がライトアップされてような感じで表現できます。</p>
<p>JavaScript のソース（headタグ内）</p>
<div class="so-su">
function GrayOn(img){<br />&nbsp;&nbsp;&nbsp; img.filters["Gray"].enabled = true;<br />}<br />function GrayOff(img){<br />
&nbsp;&nbsp;&nbsp; img.filters["Gray"].enabled = false;<br />
}
</div>
<p>
HTML のソース</p>
<div class="so-su">
&lt;img src=&#8221;sample.jpg&#8221; style=&#8221;filter:Gray();&#8221; onMouseover=&#8221;GrayOff(this)&#8221; onMouseout=&#8221;GrayOn(this)&#8221;&gt;
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.web-nouhau.com/archives/41/feed</wfw:commentRss>
		<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.web-nouhau.com/archives/41" />
	</item>
	</channel>
</rss>
