<p>恐ろしいツールを発見しました。</p>
<p>『GoogleWebDesigner』<br />
<a href="https://www.google.com/webdesigner/" target="_blank">Google Web Designer</a></p>
<p>これは、Photoshop,Illustlator,dreamweaverを混ぜたようなデザインツールで、<br />
今は、広告バナー等の作成用っぽい感じですが、<br />
アニメーションつけたり、3Dにできたり、<br />
デザインしたものがHTML5,css3で出力されるというものです。</p>
<p>ちょっとダウンロードして起動してみました。</p>
<p><a href="/uploads-archive/2014/03/googlewebdesigner01.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-4404" alt="googlewebdesigner01" src="/uploads-archive/2014/03/googlewebdesigner01-1024x649.png" width="655" height="415" srcset="/uploads-archive/2014/03/googlewebdesigner01-1024x649.png 1024w, /uploads-archive/2014/03/googlewebdesigner01-300x190.png 300w, /uploads-archive/2014/03/googlewebdesigner01-228x144.png 228w, /uploads-archive/2014/03/googlewebdesigner01.png 1223w" sizes="(max-width: 655px) 100vw, 655px" /></a></p>
<p>まさしく、Photoshop,Illustlatorっぽいですね！</p>
<p>&nbsp;</p>
<p>ファイルの新規作成を押すと、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-4403" alt="googlewebdesigner02" src="/uploads-archive/2014/03/googlewebdesigner02-1024x652.png" width="655" height="417" srcset="/uploads-archive/2014/03/googlewebdesigner02-1024x652.png 1024w, /uploads-archive/2014/03/googlewebdesigner02-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner02-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner02.png 1214w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>googleの広告を作る用に設定できますし、左下にあるHTMLを選択すると、空のhtmlファイルを作成し、<br />
dreamweaverのようにコーディングすることができます(機能はそこまでないですが・・・)。</p>
<p>&nbsp;</p>
<p>バナーを選択し、ファイルを作成すると、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-4405" alt="googlewebdesigner03" src="/uploads-archive/2014/03/googlewebdesigner03-1024x652.png" width="655" height="417" srcset="/uploads-archive/2014/03/googlewebdesigner03-1024x652.png 1024w, /uploads-archive/2014/03/googlewebdesigner03-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner03-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner03.png 1214w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>カンバスが表示され、ここにコンテンツを置いたりし作成できるようです。出力はHTMLでされます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4406" alt="googlewebdesigner04" src="/uploads-archive/2014/03/googlewebdesigner04-1024x654.png" width="655" height="418" srcset="/uploads-archive/2014/03/googlewebdesigner04-1024x654.png 1024w, /uploads-archive/2014/03/googlewebdesigner04-300x191.png 300w, /uploads-archive/2014/03/googlewebdesigner04-228x145.png 228w, /uploads-archive/2014/03/googlewebdesigner04.png 1212w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>かなり少ししかいじってないのですが、文字を置いたりコンテンツを置いたりすると、<br />
そこが何の要素かがわかるようになっており、上の画面は閉じている状態ですが、右下の方にCSSが表示されます。</p>
<p>さらにカンバスの下にはアニメーションを設定できるエリアがあります。</p>
<p>時間の問題で少ししか試せなかったのですが、<br />
基本的にはHTMLのファイルのようなので、<br />
感覚的には、dreamweaverでデザインが出来るようになったみたいでした。</p>
<p>&nbsp;</p>
<p>まだベータ版なので、<br />
これからどんどんバージョンアップしていくと思います。</p>
<p>「webサイトをデザインしながらコーディングもされる」みたいな形になっていくのでしょうか？<br />
これが無料ですからね〜<br />
Adobeさん大丈夫ですかね？！</p>
<p>その前に自身の心配もしなくてはいけないんですが笑<br />
このツールによって、コンテンツ作成するハードルは下がるわけなので、<br />
今すぐではないですが近い将来少なからず影響はあるのかなと思います。</p>
<p>ただ、こういったツールは、<br />
技術的なハードル(アニメーション,3D,コーディング等)が下がるだけであって、<br />
結局は、デザイン力、アイデアが必要になります。</p>
<p>ですので、我々は今後そこを高めていき、<br />
我々にしかできない価値を提供出来るようになっていかないといけないですね！</p>
<p>このツールの誕生によって、<br />
改めてその考えが強まりました・・・</p>


何だこのツールは？！無料ツール『GoogleWebDesigner』

<p>In our daily conversation or text messaging, we used to use &#8216;thanks or thank you&#8217; frequently.<br />
Here are some more detail and correct usages of it.</p>
<p>In English, &#8216;thank you&#8217; is more formal and polite usage than &#8216;thanks&#8217;.</p>
<table style="width: 100%;" border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td style="text-align: center;">
<h2><em><strong>Thank you</strong></em></h2>
</td>
<td style="text-align: center;">
<h2><em><strong>Thanks</strong></em></h2>
</td>
</tr>
<tr>
<td><span style="font-size: small;">&#8211; <em>formal</em></span>&nbsp;</p>
<p><span style="font-size: small;">&#8211; thank you very much</span></p>
<p><span style="font-size: small;">&#8211; thank you ever so much</span></p>
<p><span style="font-size: small;">&#8211; <span style="color: #ff0000;">thank you a lot</span></span></p>
<p><span style="font-size: small;">&#8211; thank you very much indeed</span></p>
<p><span style="font-size: small;">&#8211; <span style="color: #ff0000;">thank you indeed</span></span></p>
<p><span style="font-size: small;">&#8211; thank heavens, thank goodness</span></p>
<p><span style="font-size: small;">&#8211; <span style="color: #ff0000;">thank you heavens, thank you goodness</span></span></p>
<p><span style="font-size: small;">&#8211; thank you for + ving (thank you for coming)</span></p>
<p><span style="font-size: small;">&#8211; <span style="color: #ff0000;">thank you for your coming</span></span></p>
<p>&nbsp;</td>
<td style="text-align: left;"><span style="font-size: small;">&#8211; <em>informal</em></span>&nbsp;</p>
<p><span style="font-size: small;">&#8211;<span style="color: #ff0000;"> thanks you </span></span></p>
<p><span style="font-size: small;">&#8211; thanks very much</span></p>
<p><span style="font-size: small;">&#8211; thanks a lot</span></p>
<p><span style="font-size: small;">&#8211; thanks very much indeed</span></p>
<p><span style="font-size: small;">&#8211; <span style="color: #ff0000;">thanks heavens, thanks goodness</span></span></p>
<p><span style="font-size: small;">&#8211; thanks for coming</span></td>
</tr>
</tbody>
</table>
<p>yes, please (thank you)</p>
<p>If someone offers like that, <em>would you like another piece of cake?</em></p>
<p><em>yes, please (or) thank you (or) thanks</em></p>
<p>&#8211; <span style="color: #ff0000;">Yes, thanks (when you accept other offer)</span></p>
<p>when deny others offer,</p>
<p>&#8211; No, thank you. (or) No, thanks</p>
<p>It&#8217;s OK -&gt; yes, thanks</p>
<p>How to reply if other people say &#8216;thank you&#8217; / &#8216;thanks&#8217; to you,</p>
<p>&#8211; Not at all</p>
<p>&#8211; You&#8217;re welcome</p>
<p>&#8211; Don&#8217;t mention it</p>
<p>&#8211; That&#8217;s all right</p>
<p>&#8211; That&#8217;s OK</p>
<p>Enjoy!!!</p>
<p>__credited to Teacher HayMar</p>


How to use Thanks &#038; Thank you properly

title5.jpg

横スクロールを可能にできる「jquery.mousewheel」を使用してみた

レスポンシブデザインにぴったりなカルーセルスライダー「Owl Carousel」

<p>SafariやGoogle Chromeなど、webkitを使ったブラウザではCCS3のfilterを使って、コンテンツをぼかすことができます。</p>
<p>しかし、上に重ねたコンテンツのところだけをぼかすように、部分的にぼかすことはできません。</p>
<p>SVGを使った方法もありますが、CSS3のfilterとjQueryを使ってなんとかできないかやってみました。</p>
<p>&nbsp;</p>
<p>↓こちらが作ってみたものです(ChromeもしくはSafariでご覧下さい)。</p>
<p><a class="demo" href="/demo/ninomiya/41/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h3>
<p>今回は、body内の要素を丸々コピーして要素の上に被せ、</p>
<p>被せた要素にfilterをかけてcssのclipで一部だけ表示するという方法を使いました。</p>
<p>&nbsp;</p>
<p>HTML</p>

		<div id="crayon-64953fd597e37519460867" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;body&gt;
&lt;div class="contents"&gt;
	：
	(コンテンツ)
	：
&lt;/div&gt;
&lt;/body&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597e37519460867-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e37519460867-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e37519460867-7">7</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597e37519460867-1"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-2"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"contents"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-3"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-4"><span class="crayon-i ">	(コンテンツ)</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-5"><span class="crayon-i ">	：</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e37519460867-6"><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line" id="crayon-64953fd597e37519460867-7"><span class="crayon-r ">&lt;/body&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>JavaScript</p>

		<div id="crayon-64953fd597e3b848665737" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">JavaScript</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	 //body内のコンテンツをコピーしてコンテンツの後ろに挿入する
	$("body").append($(".contents").clone());

	$(".contents:last").css({
		"width" : "100%",
		"position" : "absolute",
		"top" : "0",
		"left" : "0",
		"-webkit-filter" : "blur(10px)", //ぼかしをかける
		"clip" : "rect(540px 600px 900px 240px)" //クリッピングして一部だけ表示する
	});
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-2">2</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-4">4</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-6">6</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-8">8</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-10">10</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597e3b848665737-12">12</div><div class="crayon-num" data-line="crayon-64953fd597e3b848665737-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597e3b848665737-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-2"><span class="crayon-h">	 </span><span class="crayon-c">//body内のコンテンツをコピーしてコンテンツの後ろに挿入する</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-3"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"body"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">append</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">clone</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-4">&nbsp;</div><div class="crayon-line" id="crayon-64953fd597e3b848665737-5"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">".contents:last"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">css</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-6"><span class="crayon-h">		</span><span class="crayon-s">"width"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"100%"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-7"><span class="crayon-h">		</span><span class="crayon-s">"position"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"absolute"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-8"><span class="crayon-h">		</span><span class="crayon-s">"top"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-9"><span class="crayon-h">		</span><span class="crayon-s">"left"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"0"</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-10"><span class="crayon-h">		</span><span class="crayon-s">"-webkit-filter"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"blur(10px)"</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-c">//ぼかしをかける</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-11"><span class="crayon-h">		</span><span class="crayon-s">"clip"</span><span class="crayon-h"> </span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">"rect(540px 600px 900px 240px)"</span><span class="crayon-h"> </span><span class="crayon-c">//クリッピングして一部だけ表示する</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597e3b848665737-12"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597e3b848665737-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>今回作ったものは、現在のところChrome, Safariだけで使える方法なので、</p>
<p>実用にはまだまだ遠いですが、SVGを使った方法（参考→「<a href="http://unformedbuilding.com/articles/frosted-glass-effect-with-css-and-svg/" target="_blank">CSS と SVG で曇りガラスのような効果を作る</a>」）と合わせ、</p>
<p>効果の出し分けをするなどすれば、少しでも実用化に近づけることができるかもしれません。</p>
<p>&nbsp;</p>
<p>いずれにしても、Android2.3系でもぼかし効果を使うことはあきらめなければならなそうです。<br />
Android2.3系は、Androidの中でも2014年2月時点でも2割のシェアがあり（<a href="http://developer.android.com/about/dashboards/index.html" target="_blank">参考</a>）、無視することもできないため、</p>
<p>もしぼかし効果を使う場合は、Android2.3系において、ぼかし無しで問題無いようなデザインにしておく必要がありそうです。</p>

jQueryやCSS3を使って画面の一部をぼかす方法を考える

<p>少し前から流行っているフラットデザインですが、最近は日本のサイトでも多く見かけるようになりました。</p>
<p>勉強のために、いろいろ見てきたものをここでは７つ紹介したいと思います。</p>
<h2>フラットデザインのサイト7選</h3>
<h3>株式会社ユニオンネット</h4>
<p>大阪の制作会社さんのサイトです。<br />
横幅いっぱいの写真を使用し、ちょっとした動きもありいい感じです。</p>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4255" alt="ホームページ制作│大阪│株式会社ユニオンネット" src="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb.jpg 1007w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-300x225.jpg 300w, /uploads-archive/2014/02/d416efe8d5de2b80300be706e602d1bb-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.unionnet.jp/" target="_blank">ホームページ制作│大阪│株式会社ユニオンネット</a></p>
<p>&nbsp;</p>
<h3>DEMONO（デモノ）体験をモノに。</h4>
<p>ECサイトのツールを手がけている会社さんで、色合いがいい感じですね！<br />
スクロールと連動した動きもつけられています。</p>
<p><a href="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4250" alt="DEMONO（デモノ）体験をモノに。" src="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000.jpg 1007w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-300x225.jpg 300w, /uploads-archive/2014/02/0095e64a6ea4d783f9175e6fe7b0b000-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://demono.co.jp/" target="_blank">DEMONO（デモノ）体験をモノに。</a></p>
<p>&nbsp;</p>
<h3>みんなのマーケット株式会社</h4>
<p>まだ創立3年程の会社です。<br />
くらしのマーケットというサイトを運営しています。<br />
シンプルな形で、円形の写真を使い人物を紹介しています。</p>
<p><a href="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4256" alt="みんなのマーケット株式会社 - みんなのマーケット株式会社" src="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3.jpg 1007w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-300x225.jpg 300w, /uploads-archive/2014/02/7a1d52a1a1321362d9f08c035a6dabb3-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.minma.jp/" target="_blank">みんなのマーケット株式会社</a></p>
<p>&nbsp;</p>
<h3>株式会社ワノコト</h4>
<p>埼玉にあるweb制作会社さんです。<br />
ブルーとオレンジを基調にしたサイトで、いいフラット感です。</p>
<p><a href="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4254" alt="ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 - 株式会社ワノコト" src="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg" width="650" height="488" srcset="/uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d.jpg 1007w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-300x225.jpg 300w, /uploads-archive/2014/02/851e1f12c68500da5a4bc38efe98633d-228x171.jpg 228w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.wanokoto.jp/" target="_blank">ホームページ制作・システム開発 埼玉県（入間市・所沢市・飯能市・川越市）・東京中心のサイト制作 &#8211; 株式会社ワノコト</a></p>
<p>&nbsp;</p>
<h3>サイバーエージェント・クラウドファンディング</h4>
<p>クラウドファウンディングを運営しているサイバー系の会社さんです。<br />
カラフルで大きな写真を使用しています。こちらも人物紹介が円形の写真を使用していますね。</p>
<p><a href="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4253" alt="サイバーエージェント・クラウドファンディング" src="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-1024x731.jpg 1024w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-300x214.jpg 300w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33-228x162.jpg 228w, /uploads-archive/2014/02/9d1a3bcfbd099922d2f84023f0268c33.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.ca-crowdfunding.com/" target="_blank">サイバーエージェント・クラウドファンディング</a></p>
<p>&nbsp;</p>
<h3>株式会社フォーデジットデザイン</h4>
<p>都内にあるweb制作会社さんです。<br />
横幅いっぱいの写真を使っていますが、フラットというよりミニマルに近いでしょうか？<br />
ホワイトを基調としておりキレイにできています。<br />
ページの切り替わりもオシャレです。</p>
<p><a href="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4251" alt="FOURDIGIT DESIGN Inc.  株式会社フォーデジットデザイン" src="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg" width="650" height="464" srcset="/uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-1024x731.jpg 1024w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-300x214.jpg 300w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4-228x162.jpg 228w, /uploads-archive/2014/02/12546e8883696b2ec72adfb01082e9a4.jpg 1162w" sizes="(max-width: 650px) 100vw, 650px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://4dd.jp/" target="_blank">FOURDIGIT DESIGN Inc. | 株式会社フォーデジットデザイン</a></p>
<p>&nbsp;</p>
<h3>LIVESENSE made*</h4>
<p>リブセンスさんの採用専用サイトです。<br />
大きな写真をメインにしようし、アクセントがブルー、グレーを基調としています。<br />
スッキリしていてみやすいですね。<br />
こちらも人物紹介に円形の写真を使用しています。</p>
<p><a href="/uploads-archive/2014/02/LIVESENSE-made.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4252" alt="LIVESENSE made" src="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg" width="651" height="464" srcset="/uploads-archive/2014/02/LIVESENSE-made-1024x731.jpg 1024w, /uploads-archive/2014/02/LIVESENSE-made-300x214.jpg 300w, /uploads-archive/2014/02/LIVESENSE-made-228x162.jpg 228w, /uploads-archive/2014/02/LIVESENSE-made.jpg 1162w" sizes="(max-width: 651px) 100vw, 651px" /></a></p>
<p>&nbsp;</p>
<p><a class="link" href="http://made.livesense.co.jp/" target="_blank">LIVESENSE made*</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>上記のサイトを見て思ったのが、<br />
サイトの横幅はブラウザいっぱいで枠を設けてなく、<br />
コンテンツ毎の区切りで色を変更したり、<br />
写真を横幅いっぱいで使用したりしていますね。</p>
<p>基本的には縦長で、余白を十分にとり、<br />
スクロールと連動させた動きをつけているサイトも多くありました。</p>
<p>人物紹介で写真を円形にしているサイトが多くあったのがちょっと気になりました。</p>


フラットデザインで制作されたワンカラムの縦長ページサイト7選

<p>日本語フォントでは、基本一つ一つの文字が等幅で作られていることがほとんどで、</p>
<p>ウェブサイト上でテキストによって文字組をした場合に、不自然な文字間隔になってしまう場所が出てきます。</p>
<p>フラットデザインやレスポンシブデザインが標準化傾向にある今、</p>
<p>ウェブサイトでの文字は文章はもちろんのこと、テキストにおいても画像を使わずテキストを使う必要性が高まってきており、</p>
<p>日本語フォント独特の文字間隔の不自然さが、ウェブデザインでの障害となることもあります。</p>
<p>&nbsp;</p>
<p>そんな中、ウェブページのテキストの文字詰めを自動でしてくれるJSが公開されていましたので、</p>
<p>こちらをご紹介いたします。</p>
<p><a class="link" href="http://fladdict.net/blog/2011/02/auto-kerning.html" target="_blank">HTMLで文字詰めするタイポグラフィー用JS</a></p>
<p>ファイルはこちらのサイトよりダウンロードください。</p>
<p>&nbsp;</p>
<p>↓DEMO作ってみました。</p>
<p><a class="demo" title="DEMO" href="/demo/ninomiya/40/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>使い方</h3>
<p>まず、jQueryとダウンロードした文字詰めのJSファイルを読み込みます。</p>

		<div id="crayon-64953fd597a64243774703" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title">HTML</span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">XHTML</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
&lt;script type="text/javascript" src="js/jquery-1.9.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/FLAutoKerning.js"&gt;&lt;/script&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a64243774703-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a64243774703-2">2</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a64243774703-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/jquery-1.9.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a64243774703-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span>=<span class="crayon-s">"text/javascript"</span><span class="crayon-h"> </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/FLAutoKerning.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>次に、文字詰めを行うHTML要素に、</p>
<p>FLAutoKerning.process($(&#8216;対象の要素&#8217;));</p>
<p>と行った形でスクリプトをあてます。</p>

		<div id="crayon-64953fd597a68292024937" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">JavaScript</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
$(function(){
	FLAutoKerning.process($('.group2 h1'));
	FLAutoKerning.process($('.group2 nav li a'));
	FLAutoKerning.process($('.group2 h2'));
	FLAutoKerning.process($('.group2 section .text'));
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd597a68292024937-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-2">2</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-4">4</div><div class="crayon-num" data-line="crayon-64953fd597a68292024937-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd597a68292024937-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd597a68292024937-1"><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-2"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h1'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-3"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 nav li a'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-4"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 h2'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd597a68292024937-5"><span class="crayon-h">	</span><span class="crayon-i">FLAutoKerning</span><span class="crayon-sy">.</span><span class="crayon-e">process</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.group2 section .text'</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd597a68292024937-6"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>これで文字詰めが行われます。</p>
<p>文字詰めを行う文字一つ一つが&lt;span&gt;で囲まれますので、&lt;span&gt;で文字の大きさや色などを指定していたりする場合は注意が必要です。</p>
<p>&nbsp;</p>
<p>全体として文字の間にできる不自然な空白が抑えられ、</p>
<p>特に句読点や括弧などの前後にできる大きな空白が抑えられているので、</p>
<p>まとまった感じがします。</p>
<p>&nbsp;</p>
<p>等幅でなくなるため、行の終わりが揃わなくなるという問題が出てくるため、</p>
<p>タイトルやキャッチコピーなどでの利用に抑えたり、</p>
<p>センタリングや右寄せした文章のような、行の終わりをそろえる必要がないような箇所に使うなどの利用法がいいかもしれません。</p>

日本語の文字詰め(カーニング)を自動で調整してくれるjQuery

<p>wordpressでお問い合わせを設置するとなれば、高い確率でこのプラグインが導入されますが、</p>
<p>ちょっといろいろ問題とまでは言いませんが、引っかかるポイントがあります。</p>
<p>&nbsp;</p>
<p>・確認画面がでない</p>
<p>・スパムがけっこうくる</p>
<p>・メール返信がなんか変</p>
<p>&nbsp;</p>
<p>地味に困ることがありますね笑</p>
<p>&nbsp;</p>
<p>その対策をすることがあるので、その解決で参考になったブログを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>確認画面がでない</h3>
<p>まずこちらですが、確認画面を出すようにすることができるという噂を聞いたことがあるのですが、<br />
まだ試してことはありません。</p>
<p>確認画面が出るプラグインもあるみたいので、<br />
どうしても確認画面が欲しい人は以下のプラグインを使ってみてはいかがでしょうか。</p>
<p><a href="http://hinagata.biz/plugin/inquiry-form-creator/">【inquiry form creator】簡単３ステップで確認画面付きの問い合わせフォームが設置できるWordPressプラグイン &#8211; ひなログ</a></p>
<p>次の項目とかぶるのですが、<br />
確認画面を表示しなくても以下のブログのようにすれば十分な気がします。</p>
<p><a href="http://bizvektor.com/plugins/contactform7/" target="_blank">意外と知らない !? お問い合わせフォーム「Contact Form 7」をもっと便利に使いこなすための3つのポイント | プラグイン紹介 | BizVektor [ ビズベクトル ] スマホ対応無料WordPressテーマ（テンプレート）</a></p>
<h2>スパムがけっこうくる</h3>
<p>こちらも少々やっかいで、通常通り設置すると、<br />
スパムがどんどん来ます。</p>
<p>うちのサイトもよく来ていたので、画像認証的なものを導入しました。<br />
ただ、これはもうひとつ別のプラグインを入れないといけないし、<br />
ユーザーもめんどくさいかと思います。</p>
<p>こちらのブログのようにすれば僕が行った対策より簡単です！</p>
<p><a href="http://curious-everything.com/1089-entry.html">Contact Form 7 に追加すればスパムが届かなくなる魔法の1行 | 毎日興味津々</a></p>
<h2>メール返信がなんか変</h3>
<p>これはお問い合わせからくるメールのfromがおかしかったり、<br />
迷惑メールに届いちゃったりということが起こってしまう件です。</p>
<p>これはこのプラグインの設定でサーバーを経由してしまうからうんぬんかんぬんらしいですが、<br />
そこらへんのことはよくわからないので、完璧に理解していませんが、そちらを解決するためのブログが以下になります。</p>
<p><a href="http://www.ssw2005.net/968" target="_blank">ContactForm7から送信すると迷惑メールと判別される場合の対応方法 | えびす商売繁盛マーケティング</a></p>
<p><a href="http://coneta.jp/2579.html" target="_blank">WordPress(ワードプレス) SMTPサーバを変更できるプラグイン「WP Mail SMTP」 | CONETA.JP</a></p>
<p>もっといいプラグインが現れるようなそんな気がします。。。</p>


wordpressの『contact form 7』プラグインをもっと使いこなすためのTIPS

jQueryとWebフォントでスマホの傾きで色の変わるアイコンを作ってみる

<p>&nbsp;</p>
<p><a href="/uploads-archive/2014/01/9784534051271-B-1-L.jpg"><img decoding="async" loading="lazy" class="aligncenter size-medium wp-image-4131" alt="9784534051271-B-1-L" src="/uploads-archive/2014/01/9784534051271-B-1-L-207x300.jpg" width="207" height="300" srcset="/uploads-archive/2014/01/9784534051271-B-1-L-207x300.jpg 207w, /uploads-archive/2014/01/9784534051271-B-1-L-228x329.jpg 228w, /uploads-archive/2014/01/9784534051271-B-1-L.jpg 346w" sizes="(max-width: 207px) 100vw, 207px" /></a></p>
<p><a href="http://www.amazon.co.jp/%E4%B8%80%E7%94%9F%E3%81%8A%E9%87%91%E3%81%AB%E5%9B%B0%E3%82%89%E3%81%AA%E3%81%84%E3%80%8C%E8%8F%AF%E5%83%91%E3%80%8D%E3%81%AE%E6%80%9D%E8%80%83%E6%B3%95%E5%89%87-%E5%A4%A7%E5%9F%8E-%E5%A4%AA/dp/4534051271/" target="_blank">http://www.amazon.co.jp/%E4%B8%80%E7%94%9F%E3%81%8A%E9%87%91%E3%81%AB%E5%9B%B0%E3%82%89%E3%81%AA%E3%81%84%E3%80%8C%E8%8F%AF%E5%83%91%E3%80%8D%E3%81%AE%E6%80%9D%E8%80%83%E6%B3%95%E5%89%87-%E5%A4%A7%E5%9F%8E-%E5%A4%AA/dp/4534051271/</a></p>
<p>&nbsp;</p>
<p>を読みました。</p>
<p>シリコンバレーなどのワークスタイルなどはよく耳にしますが、近そうで意外と遠いこういった特定の集団のビジネスに対する考え方はなかなか耳にしたことがなく、新鮮に感じたので少しまとめてみました。</p>
<p>&nbsp;</p>
<h2>考え方</h3>
<p>◯◯になれると思っている。から焦りが無い<br />
1人でやらない。考える人、実行する人、金を出す人<br />
とりあえずやる。やりながら成功への道筋を考える<br />
失敗はない。失うのはお金だけ、勇気を失わなければ失敗でない<br />
小さな失敗の積み重ねが成功。ただ致命傷はだめ<br />
ものさしは2本。直近と未来、同時にみなければならない</p>
<h2>人</h3>
<p>できない人をあえて使う。できない人が他の人を伸ばし、できる新たな方向が見える<br />
同じ価値観の者が集まっても意味が無い。多様な発想を持った組織が強い<br />
食事を共にするのは3大欲求で唯一共有できるから<br />
貴人という考え方。それは自分を高めてくれる人。その人との出会いまでは自分を磨く準備期間<br />
嫌いな人をあえてまぜる。嫌いな人は自分と違う考え方、人脈を持っている<br />
好き、嫌いと付き合いは違う<br />
メールはエビデンスが残るから使わない。エビデンスがあれば相手を許せない<br />
教育は放置。致命傷だけは負うな。失敗は後で説明</p>
<h2>金</h3>
<p>自分の身の回りには金を使わなず周りに使う。それは周りに貯金しているという感覚<br />
徹底して純利益を計算。時間や伝票1枚まで計算する<br />
回収するお金、貸すお金、あげるお金の考え方と未来予想が明確<br />
回収する時間もお金である<br />
金は天下の回りもの。天下は大事な仲間という意味<br />
親子でもお金の貸借概念。教育は貸すであり返すことを徹底</p>
<h2>営業</h3>
<p>スケジュールを入れない。休日、時間は関係なくチャンスは一瞬<br />
大事のためにはそれ以外をシャットアウト<br />
ダブルブッキングをあえてする。マッチングさせ相乗効果を<br />
結果のためなら土下座も余裕。日本人はかっこつけすぎ</p>
<h2>ライフハック</h3>
<p>大きな声をださない。大きな声より小さな声の方が相手に届く<br />
目を見て話さない。口を見る<br />
メールは使わない。メールは最も決断が遅いツール<br />
直接会う &gt; 電話 &gt; チャット &gt; メール<br />
である<br />
昼寝をする。午前中は頭が良く働く。昼寝でそれがもう一度できる</p>
<p>&nbsp;</p>
<p>自分としては、自分と違う価値観のネットワークを築くこと、特に嫌いな人に焦点を当てているところが勉強になりました。</p>


読書感想 一生お金に困らない華僑の思考方法

<p>金融系などの固めのデザインを必要とするサイトでは、<br />
今流行っているデザインを使いづらく、<br />
どうしても２〜３年前に流行ったデザインなど、時代遅れなデザインになりがちです。</p>
<p>この１〜２年でのフラットデザインの流行により<br />
PCメインだった２〜３年前のデザインと、タブレットPCやスマホを重要視した最近のデザインでは使い勝手も変わってくるため、<br />
できれば今の時代にあったデザインにすることが理想的です。</p>
<p>今回は固めの印象を残しつつも、今の時代に合わせたデザインのサイトを探してみましたので、ご紹介いたします。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.nakazawa-kenpan.co.jp/" target="_blank">ナカザワ建販株式会社</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.nakazawa-kenpan.co.jp/" target="_blank"><img decoding="async" loading="lazy" alt="" src="/uploads-archive/2014/01/80c6415fdff63a9c46f01b2e6aec3138.png" width="328" height="428" /></a></p>
<p>フラット系。</p>
<p>スライドアニメーショが凝っていて、横画面いっぱいに広がるメインビジュアルが今っぽいです。</p>
<p><a class="link" href="http://id-credit.com/index_pc.html" target="_blank">ドコモの「iD」</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://id-credit.com/index_pc.html" target="_blank"><img decoding="async" loading="lazy" alt="ドコモの「iD」" src="/uploads-archive/2014/01/f560c3cb99651db3bb705064d4939b07.png" width="328" height="663" /></a></p>
<p>グリッド系。</p>
<p>こちらはにぎやかで、固めのサイトから少し外れる気もしましたが、ヒントになりそうでしたので載せました。</p>
<p>グリッド系をイメージしたデザインですが、基本２カラムで構成されていて、安定感があります。各ボックスに小さめのドロップシャドウと小さめの角丸をつけ、落ち着いた印象を与えています。リンクを示す矢印のアイコンや、一番下のよくある質問のQのアイコンは、真円の小さなアイコンで統一されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.brotherearth.com/ja/" target="_blank">Brother Earth</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.brotherearth.com/ja/" target="_blank"><img decoding="async" loading="lazy" alt="Brother Earth" src="/uploads-archive/2014/01/Brother-Earth.jpg" width="328" height="226" /></a></p>
<p>フラット系＋グリッド系。</p>
<p>今風のデザインですが、堅実な印象も感じさせてくれます。レスポンシブデザインになっていて、各要素が無駄なく、見やすく配置されています。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://www.rohto.jp/" target="_blank">ROHTO</a></p>
<p><a style="display: block; width: 328px; height: 300px; overflow: hidden;" href="http://www.rohto.jp/" target="_blank"><img decoding="async" loading="lazy" alt="ROHTO" src="/uploads-archive/2014/01/c3b73f751bf87b8c72a4bd25d9f15ab1.png" width="328" height="531" /></a></p>
<p>フラット系。</p>
<p>青色のラインや小さなアイコン、テキストなどで堅実な印象を感じさせて筒も、画面横いっぱいに広がるニュース表示や縦スクロールのスライダーを２つ並べるなど今風の大胆な印象も感じます。商品などが数多く並べられていますが、全体が青と小さめの赤で統一されているので、うるさく感じません。</p>
<p>&nbsp;</p>
<h2>ポイント</h3>
<p>固めのサイトの印象を与えるものとしては、</p>
<ul>
<li>ヘッダートップの横方向のライン</li>
<li>文字とラインのみで構成されたシンプルなメインビジュアル</li>
<li>小さめのフォント・アイコン</li>
</ul>
<p>といったものがあるように思います。</p>
<p>また、グリッド系のデザインにする場合も、全体にグリッド要素を使わずに、</p>
<p>メインコンテンツに添える形で使うと、イメージを崩さないようです。</p>
<p>&nbsp;</p>
<p>固めの印象を与える要素を全体に散りばめつつ、基本的にはフラット系やグリッド系、レスポンシブといった今の時代に合わせた構成のデザインにすることで、</p>
<p>固めでも今風のデザインのサイトにすることができるのではないかと思います。</p>
<p>&nbsp;</p>


今風(2014年はじめ)の少し固めのデザイン

AngularJSのリピートを利用した都道府県のセレクトボックス

<p>そんなタイトルですが、あくまで予防です。</p>
<p>最近wordpressの管理画面への不正アクセスが相次いでるとのことで、<br />
僕も気になり、プラグインを入れてみることにしました。<br />
そのプラグインを紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>crazybone</h3>
<p>&nbsp;</p>
<p>まず、管理画面への不正アクセスを調べるプラグインから入れます。<br />
こちらのcrazyboneというプラグインは、ログインの履歴が取れるというもので、<br />
いつどこから、IPアドレス,エラー時のユーザー名/パスワード等が取れます。<br />
これはアクセスログが取れるということで、クライアントワークにもいいかと思います。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://wordpress.org/plugins/crazy-bone/" target="_blank">Crazy Bone</a></p>
<p>&nbsp;</p>
<p>実際の画面のキャプチャはこちら</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-4079" alt="スクリーンショット 2014-01-22 0.00.40" src="/uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e.png" width="644" height="371" srcset="/uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e.png 1013w, /uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e-300x172.png 300w, /uploads-archive/2014/01/4f5416971a791385cc8de5ff709b893e-228x131.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>不正アクセスされてました。</p>
<p>&nbsp;</p>
<p>めちゃめちゃ来てますね・・・韓国から・・・<br />
なんのためにこんなことをするのかわかりませんが怖いですね・・・</p>
<p>&nbsp;</p>
<p>後で紹介するブログにも書かれているのですが、<br />
こちらを出来る限り防ぐ方法は、</p>
<p>&nbsp;</p>
<p><strong>・ユーザー名をadminやドメイン名にしない</strong><br />
<strong> ・パスワードは英数字記号を使い、14文字以上</strong><br />
<strong> ・wordpressを常に最新ver.にする</strong></p>
<p>&nbsp;</p>
<p>です。（あくまでされにくくされるもので、されなくなるわけではないです・・・・）</p>
<p>これは設定の段階での予防ですので、<br />
次に予防のためのプラグインを紹介します。</p>
<p>&nbsp;</p>
<h2>Simple Login Lockdown</h3>
<p>こちらのプラグインは、<br />
同一IPアドレスからのアクセスで連続してログイン失敗すると、<br />
一定期間経過するまでは、そのIPアドレスからのログイン操作をできなくするというものです。</p>
<p>こちらは連続でアタックさせないためのものなので、<br />
気休め程度かもしれませんが、やっておいて損はないと思います。</p>
<p>&nbsp;</p>
<h2>WP Admin Basic Auth</h3>
<p>こちらはログイン、管理画面にbasic認証をかけるというもので、<br />
basic認証のID/パスワードは、現段階ではwordpressで設定したユーザー名/パスワードがそのまま適応されるようです。<br />
同じだと突破されるのでは？と思ってしまいますが、<br />
botではBasic認証を突破しようするものはないようです。</p>
<p>&nbsp;</p>
<p><a class="link" href="http://stocker.jp/diary/wp-admin-basic-auth/" target="_blank">WordPressのログイン・管理画面にBasic認証をかけるプラグイン「WP Admin Basic Auth」を作りました | Stocker.jp / diary</a></p>
<p>&nbsp;</p>
<p>こちらそれぞれ単体だけでなく、複数入れると、<br />
セキュリティもより強固なものになっていくと思います。</p>
<p>&nbsp;</p>
<p>ちなみに、管理画面以外の部分にBasic認証をかけたい場合は、<br />
以下のプラグインがあります。</p>
<p><a class="link" href="http://dogmap.jp/2013/03/09/wp-basic-auth/" target="_blank">WordPress サイトに Basic 認証をかけるプラグイン「WP Basic Auth」 | dogmap.jp</a></p>
<p>&nbsp;</p>
<p>あとは、「<strong>Members Only</strong>」というwordpressにログインしていないとサイトを見れなくするプラグインもあります。</p>
<p>&nbsp;</p>
<p>それにしても不正アクセスは怖いですね。<br />
セキュリティに関しては、慎重になって損なことはないので、<br />
しっかりと対応したいです。</p>


wordpressのサイトを不正アクセスから守るためのプラグイン

<p>世界に一つだけのオリジナルアイテムをオーダーできる「GEMIY」を触ってみた。</p>
<p>GEMIYとはお客(I)と作り手(YOU)との間に、たくさんのGEM(宝物)が生まれますようにとの思いから作られたサービスで、</p>
<p>世界に一つだけの商品をクリエイターにオーダーして作ってもらえるサイトだ。</p>
<p><a href="http://gemiy.net/" target="_blank">http://gemiy.net/</a></p>
<p>&nbsp;</p>
<p>本日現在、BERET、SHORT KNIT、TIE、BABY BALLなど9種類のカテゴリから商品を選択できる。</p>
<p>ちなみに価格はそれぞれ7,400円、26,000円、7,000円、2,500円と少し高め。</p>
<p><a href="/uploads-archive/2014/01/11.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4074" alt="1" src="/uploads-archive/2014/01/11.jpg" width="656" height="177" srcset="/uploads-archive/2014/01/11.jpg 656w, /uploads-archive/2014/01/11-300x80.jpg 300w, /uploads-archive/2014/01/11-228x61.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>そこから色を選択してカートに入れる。</p>
<p><a href="/uploads-archive/2014/01/21.jpg"><img decoding="async" loading="lazy" class="aligncenter size-full wp-image-4075" alt="2" src="/uploads-archive/2014/01/21.jpg" width="656" height="418" srcset="/uploads-archive/2014/01/21.jpg 656w, /uploads-archive/2014/01/21-300x191.jpg 300w, /uploads-archive/2014/01/21-228x145.jpg 228w" sizes="(max-width: 656px) 100vw, 656px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>流れはシンプルだが仕上がりをクリエイターと話し合って微調整できるとのこと。</p>
<p>今までのこういったオンリーワン系のクリエイターサイトと違う点は、</p>
<p>クリエイターをサイト側で選択しているところ。</p>
<p>誰でも参加できるわけではないので、クオリティを担保されているので</p>
<p>変なものが届くことは無いのだと思う。</p>
<p>とりあえず見にくるというユーザーではなく、こんなのがほしいというユーザー向きな感じだ。</p>
<p>クリエーターにある程度依存するので、影響力のあるクリエーターが集まれば良いかもしれない。</p>


世界に一つだけのオリジナルアイテムをオーダーできる「GEMIY」

2014年要注目のJavaScriptフレームワーク「AngularJS」を使ってフォーム作ってみました

<p>といいましても、<br />
僕の予想ではなく、海外の記事を紹介し、<br />
その中で僕が思ったことを少し述べたいと思います。</p>
<h2>2013年のデザイントレンド</h3>
<p>まずは、2013年のデザイントレンドですが、<br />
以下のサイトになります。</p>
<p><a href="http://www.creativebloq.com/web-design/2013-trends-121310199" target="_blank">The 10 hottest web design trends of 2013 | Web design | Creative Bloq</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.レスポンシブデザイン<br />
2.フラットデザイン<br />
3.固定ヘッダー<br />
4.パララックス<br />
5.無限スクロール<br />
6.Retina対応<br />
7.タイポグラフィーデザイン<br />
8.丸いデザイン要素<br />
9.css3アニメーション<br />
10.大きなボタン</strong></p>
<h2>2014年のデザイントレンド予想</h3>
<p>次は2014年のデザイントレンド予想は以下になります。</p>
<p><a href="http://www.hongkiat.com/blog/web-design-trends-2014/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For In 2014</a></p>
<p>簡単に羅列すると、<br />
以下のようになります。</p>
<p><strong>1.グリッドスタイルレイアウト<br />
2.狡猾な画像ホバーキャプション機能<br />
3.フォームの拡張機能<br />
4.深く考えられたランディングページ<br />
5.HTML5ビデオプレーヤー<br />
6.3Dエフェクト<br />
7.フラットデザインのパーツ・素材<br />
8.個人のポートレート<br />
9.SVG画像・アイコン<br />
10.特異なwebフォント<br />
11.Lazy-Loadingアニメーション<br />
12.カズタマイズされたイメージギャラリー<br />
13.メガナビゲーションメニュー<br />
14.伸びる検索バー<br />
15.特長をアイコン付きで紹介<br />
16.モバイルファースト<br />
17.html5キャンバス<br />
18.webブラウザゲーム<br />
19.素早い会員登録<br />
20.css3アニメーションキーフレーム</strong></p>
<p>以上のような感じですが、</p>
<p>2013年,2014年のトレンドをみて、<br />
僕的には、<br />
<strong>フラットデザイン、<br />
レスポンシブデザイン、<br />
css3のアニメーション(ホバー等)<br />
ランディングページ(パララックス,フラット,アニメーション)</strong></p>
<p>といったものを注目しています。</p>
<p>フラットデザインはいうまでもなく、2013年流行ったデザインであり、<br />
段々と日本語サイトでもフラットデザインを取り入れたサイトも見かけるようになりました。<br />
また、フラットデザインはレスポンシブデザインやランディングページは相性がいいと思うので、<br />
今後しばらくこの流れは継続されていくのではないかと思います。</p>
<p>css3については、段々と利用できるブラウザがメインになりつつある中で、<br />
制作者側からすると、やっといろいろできるなといった感じかと思います。<br />
特にホバーでは、本当に様々なことができるので、<br />
どんなものが出来るかこれから楽しみですね！</p>
<p>個人的には、「錯視」に興味があるのですが、<br />
それがwebサイトで使われるのはまだまだなのかなという気がします。<br />
使い方も限定されちゃうような気もします。。。</p>
<p>おまけに、<br />
上記で注目されいるような素材を提供してくれるサイトを紹介します。</p>
<p><strong>15個のフラットUIの素材キット</strong><br />
<a href="http://graphicdesignjunction.com/2014/01/creative-flat-ui-kits/" target="_blank">Flat UI Kits for Designers | Design | Graphic Design Junction</a></p>
<p><strong>30個のフリーのwebサイトテンプレートPSD素材</strong><br />
<a href="http://www.splashnology.com/article/free-psd-website-templates/11229/" target="_blank">30 Fresh and Free PSD Website Templates | Splashnology.com</a></p>
<p><strong>40個の美しいランディングページ</strong><br />
<a href="http://www.designzzz.com/landing-page-templates/" target="_blank">40 Beautiful Landing Page Templates</a></p>
<p><strong>150以上のフリーのアニメーションもあるSVGアイコン(フラットデザイン)</strong><br />
<a href="http://www.pencilscoop.com/2013/12/150-free-animated-svg-icons/">150+ Free Animated SVG Icons | Pencil Scoop | Design &amp; Creative Blog</a></p>


2013年のデザイントレンドを振り返り、2014年を予想する

<p>先日、firefoxを26にアップグレードした所、<br />
firefoxの幅を400px以下(正確には425px)に縮まらなくなってしまいました。</p>
<p>スマホやガラケーの画面のキャプチャーを撮る作業があるので、<br />
その時に幅を縮める必要があるんですが、縮まらなくなりちょっと困り、調べました。</p>
<p>すると、<br />
firefox26ではウィンドウの最小幅を<strong>425px</strong>に設定しているとのこと。</p>
<p>firefoxのURL記入箇所に、<br />
<strong>chrome://browser/content/browser.css</strong><br />
と入れると、使用されてるcssが表示されるのですが、</p>
<p></p>

		<div id="crayon-64953fd5963c1256540867" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
#main-window:not([chromehidden~="toolbar"]) {
  min-width: 425px;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5963c1256540867-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5963c1256540867-2">2</div><div class="crayon-num" data-line="crayon-64953fd5963c1256540867-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5963c1256540867-1"><span class="crayon-k ">#main-window:not([chromehidden~="toolbar"]) </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5963c1256540867-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">425px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5963c1256540867-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と書かれていました。</p>
<p>Firefoxが2014年に新デザインになるそうで、その前触れだそうです。</p>
<p><a href="http://getaustralis.com/" target="_blank">Get Australis</a></p>
<h2>解消方法</h3>
<p>このmin-widthを上書きすれば、思った通りに縮めることができます。</p>
<p>上書きといっても、<br />
browser.css<br />
を書き換えるわけではなく、</p>
<p><strong>~/Library(ライブラリ)/Application Support/Firefox/Profiles/英数字.○○○/chrome/userChrome.css</strong><br />
※MacOS Xの場合</p>
<p>に、cssを書き加えます。</p>
<p>ただ、<strong>「chrome」「useChrome.css」</strong>がないこともあるのでその場合は、自分で同様のフォルダ・ファイルを作成する必要があります。(僕の場合はありませんでした)</p>
<p>そのcssに、</p>
<p></p>

		<div id="crayon-64953fd5963c6393968310" class="crayon-syntax crayon-theme-monokai crayon-font-monaco crayon-os-mac print-yes notranslate" data-settings=" minimize scroll-mouseover wrap" style=" margin-top: 12px; margin-bottom: 12px; font-size: 13px !important; line-height: 18px !important;">
		
			<div class="crayon-toolbar" data-settings=" mouseover overlay hide delay" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><span class="crayon-title"></span>
			<div class="crayon-tools" style="font-size: 13px !important;height: 19.5px !important; line-height: 19.5px !important;"><div class="crayon-button crayon-nums-button" title="Toggle Line Numbers"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-plain-button" title="Toggle Plain Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-wrap-button" title="Toggle Line Wrap"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-expand-button" title="Expand Code"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-copy-button" title="Copy"><div class="crayon-button-icon"></div></div><div class="crayon-button crayon-popup-button" title="Open Code In New Window"><div class="crayon-button-icon"></div></div><span class="crayon-language">CSS</span></div></div>
			<div class="crayon-info" style="min-height: 19.5px !important; line-height: 19.5px !important;"></div>
			<div class="crayon-plain-wrap"><textarea  class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 13px !important; line-height: 18px !important;">
#main-window:not([chromehidden~="toolbar"]) {
    min-width: 200px !important;
}</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 13px !important; line-height: 18px !important;"><div class="crayon-num" data-line="crayon-64953fd5963c6393968310-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd5963c6393968310-2">2</div><div class="crayon-num" data-line="crayon-64953fd5963c6393968310-3">3</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 13px !important; line-height: 18px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-64953fd5963c6393968310-1"><span class="crayon-k ">#main-window:not([chromehidden~="toolbar"]) </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd5963c6393968310-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-e ">min-width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">200px</span><span class="crayon-h"> </span><span class="crayon-cn ">!important</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd5963c6393968310-3"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>と書き加えればOKです！</p>
<p>ちなみにLibrary(ライブラリ)は隠しフォルダになっています。<br />
それを表示するためにはこちらをどうぞ。</p>
<p><a href="http://inforati.jp/apple/mac-tips-techniques/system-hints/how-to-show-hidden-file-or-folder-of-macos.html" target="_blank">Macの隠しファイルや隠しフォルダを表示する裏技 / Inforati</a></p>
<p>この最小幅を変えることによって、なにか影響がでるかもしれませんが、<br />
それは自己責任でお願いしますm(&#8211;)m<br />
といっても、影響が出ることはあまりないのかなぁと思います。</p>
<p>それにしてもfirefoxはアップグレードのスピードが早いですね〜</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #デザイナー

2014/03/04

2014/02/26

2014/02/26

2014/02/19

2014/02/19

2014/02/14

2014/02/13

2014/02/05

2014/02/05

2014/01/29

2014/01/29

2014/01/22

2014/01/22

2014/01/22

2014/01/15

2014/01/15

2014/01/07

2014/01/07