test

<p>HTML5ではSVGをHTML内の要素として書き込むことができますが、</p>
<p>サイトの運用の都合などで、外部ファイルとして存在するSVGを読み込んで操作したい場合も多くあると思います。</p>
<p>外部SVGファイルの読み込み方法はいろいろありますが、jQueryのload()を使うと、簡単に読み込むことができます。</p>
<p>&nbsp;</p>
<p>↓こちらがその方法で読み込んでみたもの</p>
<p><a class="demo" href="/demo/ninomiya/68/" target="_blank">DEMO</a></p>
<p>&nbsp;</p>
<h2>方法</h2>
<p>方法はとても簡単です。</p>
<h3>HTML</h3>
<p></p>

		<div id="crayon-6495401584760508831904" 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 head内</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 src="æ/jquery-2.1.1.min.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-6495401584760508831904-1">1</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-6495401584760508831904-1"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"æ/jquery-2.1.1.min.js"</span><span class="crayon-h">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p></p>

		<div id="crayon-6495401584764828524158" 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 body内</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;div id="svgArea"&gt;&lt;/div&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-6495401584764828524158-1">1</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-6495401584764828524158-1"><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span>=<span class="crayon-s ">"svgArea"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>まず HTMLのhead内でjQueryを読み込み、</p>
<p>HTMLのbody内にSVGを配置するdivに適当なIDを設定して配置します。</p>
<p>&nbsp;</p>
<h3>jQuery</h3>
<p></p>

		<div id="crayon-6495401584766058824221" 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></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(){
	$("#svgArea").load("images/logo.svg svg", function(){

		//SVGの処理
		
	});
});</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-6495401584766058824221-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-2">2</div><div class="crayon-num" data-line="crayon-6495401584766058824221-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-4">4</div><div class="crayon-num" data-line="crayon-6495401584766058824221-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584766058824221-6">6</div><div class="crayon-num" data-line="crayon-6495401584766058824221-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-6495401584766058824221-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-6495401584766058824221-2"><span class="crayon-h">	</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">"#svgArea"</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">load</span><span class="crayon-sy">(</span><span class="crayon-s">"images/logo.svg svg"</span><span class="crayon-sy">,</span><span class="crayon-h"> </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" id="crayon-6495401584766058824221-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401584766058824221-4"><span class="crayon-h">		</span><span class="crayon-c">//SVGの処理</span></div><div class="crayon-line" id="crayon-6495401584766058824221-5"><span class="crayon-h">		</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584766058824221-6"><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-6495401584766058824221-7"><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>次にjQueryで「$(&#8220;[SVGを読み込む要素]&#8221;).load(&#8220;SVGファイルのパス svg&#8221;)」を実行すれば読み込み完了です。</p>
<p>さらに読み込んだSVGを操作する場合は、「$(&#8220;[SVGを読み込む要素]&#8221;).load(&#8220;SVGファイルのパス svg&#8221;, function(){ … 操作するプログラム … })」</p>
<p>という風にload()でコールバック関数をつけると、操作が可能になります。</p>
<p>&nbsp;</p>
<p>SVGでは色の変更など、通常の画像ではできないことができ、</p>
<p>Webフォントを使った方法より運用がしやすいというメリットもあるので、</p>
<p>どんどん活用していきたいです。</p>

jQueryを使った外部SVGファイルの読み込み

<p>GoogleからMaterial Designが提唱され、しばらく経ち広まっているかどうかは定かではないのですが、制作にするのに便利なサービスを発見したので、紹介したいと思います。</p>
<p>まずは、Material Designとはなにかということは以下のサイトからご覧ください。<br />
<a href="http://www.google.com/design/spec/material-design/introduction.html">Introduction &#8211; Material design &#8211; Google design guidelines</a></p>
<p>&nbsp;</p>
<h2>フレームワーク</h2>
<p>&nbsp;</p>
<h3>MUI</h3>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7069" src="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg" alt="MUI - Material Design CSS Framework" width="620" height="366" srcset="/uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-1024x605.jpg 1024w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-300x177.jpg 300w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework-228x135.jpg 228w, /uploads-archive/2015/03/MUI-Material-Design-CSS-Framework.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
ひと通りのコンポーネントが揃っているかと思います。</p>
<p><a class="link" href="https://www.muicss.com/" target="_blank">MUI &#8211; Material Design CSS Framework</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Materialize</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7065" src="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg" alt="Documentation - Materialize" width="620" height="366" srcset="/uploads-archive/2015/03/Documentation-Materialize-1024x605.jpg 1024w, /uploads-archive/2015/03/Documentation-Materialize-300x177.jpg 300w, /uploads-archive/2015/03/Documentation-Materialize-228x135.jpg 228w, /uploads-archive/2015/03/Documentation-Materialize.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /><br />
上記のサイトよりも豊富で、jQueryの動きもけっこうあります。</p>
<p><a class="link" href="http://dogfalo.github.io/materialize/" target="_blank">Documentation &#8211; Materialize</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7068" src="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg" alt="Material UI - Material Design React Components" width="620" height="366" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-React-Components-1024x605.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-300x177.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components-228x135.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-React-Components.jpg 1105w" sizes="(max-width: 620px) 100vw, 620px" /></p>
<p>こちらもひと通りのコンポーネントが揃っています。<br />
&nbsp;<br />
<a class="link" href="http://material-ui.com/#/" target="_blank">Material UI &#8211; Material Design React Components</a><br />
&nbsp;<br />
&nbsp;<br />
どのフレームワークもひと通りコンポーネントは揃っており、アニメーションでそれぞれ少しづつ違う感じです。<br />
パッと見て良さそうなのは、Materializeかなと思います。</p>
<p>&nbsp;</p>
<h2>配色ツール</h2>
<p>&nbsp;</p>
<h3>Material Palette</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7066" src="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg" alt="Material Design Color Palette Generator - Material Palette" width="620" height="361" srcset="/uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-300x175.jpg 300w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette-228x133.jpg 228w, /uploads-archive/2015/03/Material-Design-Color-Palette-Generator-Material-Palette.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
こちらは２つの色を選ぶと、<br />
その色に合わせて簡単なカラーパレットを教えてくれます。</p>
<p><a class="link" href="http://www.materialpalette.com/" target="_blank">Material Design Color Palette Generator &#8211; Material Palette</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>Material UI Colors</h3>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-7067" src="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg" alt="Material UI  Material Design  Material UI Colors" width="620" height="361" srcset="/uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-1024x597.jpg 1024w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-300x175.jpg 300w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors-228x133.jpg 228w, /uploads-archive/2015/03/Material-UI-Material-Design-Material-UI-Colors.jpg 1120w" sizes="(max-width: 620px) 100vw, 620px" /><br />
色数が豊富で、色情報をいろんな形式でコピーすることができます。</p>
<p><a class="link" href="http://www.materialui.co/colors" target="_blank">Material UI | Material Design | Material UI Colors</a></p>
<p>今後どんどん便利なサービスが出てくるかと思います。<br />
これらを上手いこと使いながら良いサイトを作りたいですね！！</p>


Material Designの制作に便利なwebサービス5つ

<p>以前、あるコーディングの案件を受けている時に、ニュースの文で文末を&#8230;にしてほしいと言われ、それはコーディングですることじゃなくてシステムでやるのではないかと思ったのですが、いざ調べてみると、CSSで出来る方法がありました。</p>
<p>早速説明していきます。<br />
DEMOもありますのでご覧ください。</p>
<p><a href="/demo/abe/53/" target="_blank" class="demo">DEMO</a></p>
<h2>CSSのみで文末をカットし、&#8230;を代入する方法</h2>
<p>html</p>

		<div id="crayon-649540158425c304956696" 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">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;div class="text"&gt;
  	&lt;p class="textCut"&gt;つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。&lt;/p&gt;
 &lt;/div&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-649540158425c304956696-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-649540158425c304956696-2">2</div><div class="crayon-num" data-line="crayon-649540158425c304956696-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-649540158425c304956696-1"><span class="crayon-h"> </span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"text"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-649540158425c304956696-2"><span class="crayon-i ">&nbsp;&nbsp;	</span><span class="crayon-r ">&lt;p </span><span class="crayon-e ">class</span>=<span class="crayon-s ">"textCut"</span><span class="crayon-r ">&gt;</span><span class="crayon-i ">つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</span><span class="crayon-r ">&lt;/p&gt;</span></div><div class="crayon-line" id="crayon-649540158425c304956696-3"><span class="crayon-i "> </span><span class="crayon-r ">&lt;/div&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>css</p>
<p></p>

		<div id="crayon-6495401584260044683358" 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;">
.text {
  width: 400px;
}
.text .textCut {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}</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-6495401584260044683358-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-2">2</div><div class="crayon-num" data-line="crayon-6495401584260044683358-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-4">4</div><div class="crayon-num" data-line="crayon-6495401584260044683358-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-6">6</div><div class="crayon-num" data-line="crayon-6495401584260044683358-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584260044683358-8">8</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-6495401584260044683358-1"><span class="crayon-k ">.text </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-2"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">400px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-3"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-4"><span class="crayon-k ">.text .textCut </span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-6495401584260044683358-5"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">text-overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">ellipsis</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-6"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">white-space</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">nowrap</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584260044683358-7"><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-e ">overflow</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">hidden</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584260044683358-8"><span class="crayon-sy">}</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>すべて必須になります。<br />
text-overflowのellipsisという値で&#8230;を代入するようです。<br />
横幅の設定はその要素でも、親の要素でも大丈夫です。</p>
<p>そしてこれは横幅で指定し、それ以上のテキストを消すというものなので、<br />
複数行に対応しておらず、一行の場合のみとなります。</p>
<p>複数行、もしくは文字数を設定したい場合、jQueryを使用すれば可能です。</p>
<h2>jQueryでやる方法</h2>
<p>htmlは同じで、<br />
jQueryのソースは以下になります。</p>
<p></p>

		<div id="crayon-6495401584262968720239" 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(){
	var elm = $('.textCut2');//対象
	var cutNum = '55';//文字数
	var endTxt = '…';//何を代入するか

	elm.each(function(){
		var textLength = $(this).text().length;
		var textTrim;
		if(cutNum &lt; textLength) {
			textTrim = $(this).text().substr(0,(cutNum));
			$(this).html(textTrim + endTxt);
		}
	});	
});</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-6495401584262968720239-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-2">2</div><div class="crayon-num" data-line="crayon-6495401584262968720239-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-4">4</div><div class="crayon-num" data-line="crayon-6495401584262968720239-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-6">6</div><div class="crayon-num" data-line="crayon-6495401584262968720239-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-8">8</div><div class="crayon-num" data-line="crayon-6495401584262968720239-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-10">10</div><div class="crayon-num" data-line="crayon-6495401584262968720239-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-12">12</div><div class="crayon-num" data-line="crayon-6495401584262968720239-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-6495401584262968720239-14">14</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-6495401584262968720239-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-6495401584262968720239-2"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">elm</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-s">'.textCut2'</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-c">//対象</span></div><div class="crayon-line" id="crayon-6495401584262968720239-3"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">cutNum</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'55'</span><span class="crayon-sy">;</span><span class="crayon-c">//文字数</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-4"><span class="crayon-h">	</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-e ">endTxt</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-s">'…'</span><span class="crayon-sy">;</span><span class="crayon-c">//何を代入するか</span></div><div class="crayon-line" id="crayon-6495401584262968720239-5">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-6"><span class="crayon-h">	</span><span class="crayon-i">elm</span><span class="crayon-sy">.</span><span class="crayon-st">each</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" id="crayon-6495401584262968720239-7"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-i">length</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-8"><span class="crayon-h">		</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-i">textTrim</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-9"><span class="crayon-h">		</span><span class="crayon-st">if</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-h"> </span><span class="crayon-h">&lt;</span><span class="crayon-h"> </span><span class="crayon-i">textLength</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-10"><span class="crayon-h">			</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>=<span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">text</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">substr</span><span class="crayon-sy">(</span><span class="crayon-cn">0</span><span class="crayon-sy">,</span><span class="crayon-sy">(</span><span class="crayon-i">cutNum</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-6495401584262968720239-11"><span class="crayon-h">			</span><span class="crayon-sy">$</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">html</span><span class="crayon-sy">(</span><span class="crayon-i">textTrim</span><span class="crayon-h"> </span>+<span class="crayon-h"> </span><span class="crayon-i">endTxt</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-12"><span class="crayon-h">		</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-6495401584262968720239-13"><span class="crayon-h">	</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h">	</span></div><div class="crayon-line crayon-striped-line" id="crayon-6495401584262968720239-14"><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>もっと良い方法があるかもしれません。</p>
<p>text-overflowについては下記URLで説明されておりますので、<br />
よろしければご覧ください。</p>
<p><a href="https://developer.mozilla.org/ja/docs/Web/CSS/text-overflow" target="_blank">text-overflow &#8211; CSS | MDN</a></p>

CSSのみで文末をカットし、&#8230;を代入する方法

かなり便利！LESSを少し使ってみました。

最近見かけるCSS3アニメーションを使ったトグルのメニューボタンを再現してみた

<p>前回に引き続き社内の電話料金を安く抑えるべく、調べた内容をまとめてみようと思います。</p>
<p>今回はYモバイルの「法人かけ放題プラグラム」というプランです。攻めている印象のあるＹモバイルなので期待がもてそうな感じがしますが実際のところは安いのでしょうか。</p>
<h2>法人かけ放題プログラムとは？</h2>
<p>まずＹモバイルの「法人かけ放題プログラム」とは何かということですが、これはＰＨＳ回線の通話がかけ放題（一部例外）になるというものです。</p>
<p><a href="/admin/wp-content/uplohttp://www.ymobile.jp/biz/sp/kakehoudai/?ref=bzmsp001ads/2015/02/mainimg_934.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6957" src="/uploads-archive/2015/02/mainimg_934.jpg" alt="mainimg_934" width="426" height="195" srcset="/uploads-archive/2015/02/mainimg_934.jpg 960w, /uploads-archive/2015/02/mainimg_934-300x138.jpg 300w, /uploads-archive/2015/02/mainimg_934-228x105.jpg 228w" sizes="(max-width: 426px) 100vw, 426px" /></a></p>
<p>基本料金は今のところ全て無料で、以下の２つのプランがあります。</p>
<table style="height: 380px;" width="513">
<tbody>
<tr>
<td>プラン</td>
<td>だれとでも定額</td>
<td>スーパーだれとでも定額</td>
</tr>
<tr>
<td>料金</td>
<td>９３４円</td>
<td>１５００円</td>
</tr>
<tr>
<td>国内固定電話</td>
<td rowspan="2">１０分以内の国内通話月５００回まで無料</td>
<td>０円</td>
</tr>
<tr>
<td>携帯電話</td>
<td>０円</td>
</tr>
<tr>
<td>ＰＨＳ</td>
<td>０円</td>
<td>０円</td>
</tr>
<tr>
<td>Ｅメール</td>
<td>０円</td>
<td>０円</td>
</tr>
<tr>
<td>パケット代</td>
<td>別途接続料発生</td>
<td>使い放題</td>
</tr>
</tbody>
</table>
<p>&nbsp;</p>
<p>これは端末１台にかかる料金になります。</p>
<p>では何台から契約ができるの？となりますが、法人であれば１台から契約可能です。</p>
<p>店舗用に電話が１台だけ必要という場合にはいいかもしれません。</p>
<h2>国際電話やナビダイヤルは有料？</h2>
<p>さすがに全ての通話が無料というワケではありません。</p>
<blockquote><p>着信転送サービスへの通話料、番号案内サービス「104」の通話・案内料、テレドーム（0180から始まる番号）、ナビダイヤル等（0570から始まる番号）、国際電話、留守番電話メッセージ録音・再生料は、無料対象外のため、料金プランに応じた通話料がかかります。</p></blockquote>
<p>ちなみに国際電話料金はアメリカ１０円/１分、シンガポール３６円/1分なので、ＩＰ電話などと比べてもそれほど高くない印象です。</p>
<h2>番号を替えずに使用できるか？</h2>
<p>番号については先ほども書いたようにＰＨＳ回線のため、070-××××-××××が通常ですが、携帯電話番号からのナンバーポータビリティ―が適用できるので、080や090からなら番号を替えずに乗り換えられるとのことです。番号据え置きの場合は別途料金がかかりますが。</p>
<p>ちなみに03-××××-××××などの固定電話の場合は、番号の据え置きができません。私が担当しているお店の電話は03-からなので番号を替えずにというわけにはいかないようです。</p>
<h2>端末代は？固定電話型のＰＨＳも</h2>
<p>PHS回線なので別途端末が必要になります。端末代は月々分割払いなのですが、よくある携帯屋さんの仕組みのようにオプション料金から割引が行われ実質０円という端末がメインになります。</p>
<p>契約は３年間の自動更新なので３年間で端末代の支払が完了となる計算になっています。</p>
<p>一部端末によっては本体代を相殺できない分を月々１５０円とか３００円とかかる場合もあります。</p>
<p>・端末のラインナップ</p>
<p><a href="http://www.ymobile.jp/biz/sp/kakehoudai/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6942" src="/uploads-archive/2015/02/ym1.jpg" alt="ym1" width="412" height="133" srcset="/uploads-archive/2015/02/ym1.jpg 971w, /uploads-archive/2015/02/ym1-300x97.jpg 300w, /uploads-archive/2015/02/ym1-228x73.jpg 228w" sizes="(max-width: 412px) 100vw, 412px" /></a><a href="http://www.ymobile.jp/biz/sp/miseden/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6951" src="/uploads-archive/2015/02/ieden.jpg" alt="ieden" width="164" height="123" srcset="/uploads-archive/2015/02/ieden.jpg 259w, /uploads-archive/2015/02/ieden-228x171.jpg 228w" sizes="(max-width: 164px) 100vw, 164px" /></a></p>
<p>「法人かけ放題プログラム」の端末は基本的に いわゆるガラケーで、スマホはありません。スマホの場合は異なるプランになってしまいます。（１９８０円くらいのプランがあります。）</p>
<p>１５００円/１ヶ月の「スーパーだれとでも定額」はパケットも使い放題ですが、通信速度がかなり遅くサイトをちょっと見るくらいにしか使えないそうです。</p>
<p>中には店舗用に固定電話型の端末もあります、<a href="http://www.ymobile.jp/biz/sp/miseden/">「イエデン」</a>という名前のこの端末は電源だけあれば、実は携帯端末なので電話線をつながなくても使えます。</p>
<p>固定電話の回線が既にある場合は、電話線をつなぐことでＰＨＳと一般加入電話のどちらの端末としても利用できます。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6952" src="/uploads-archive/2015/02/img_content04_01.jpg" alt="img_content04_01" width="306" height="294" srcset="/uploads-archive/2015/02/img_content04_01.jpg 306w, /uploads-archive/2015/02/img_content04_01-300x288.jpg 300w, /uploads-archive/2015/02/img_content04_01-228x219.jpg 228w" sizes="(max-width: 306px) 100vw, 306px" /></p>
<p>ただＰＨＳ端末はシムカードなどは使わず、端末１台に１つの番号が紐づけられるので、オフィスの電話として１つの番号を数台で共有したり内線を回したりすることはできません。</p>
<p>一般加入電話と併用する場合の料金は、一般加入電話の基本料金＋かけ放題プログラムの料金という事になります。</p>
<p>受信は一般加入電話で、発信はイエデンというのがいいかもしれません。</p>
<h2>回線開通までにかかる日数は？</h2>
<p>「<a href="http://www.ymobile.jp/biz/">ワイモバイル法人ダイレクト</a>」というページから電話をすると見積もりを直ぐにメールで送ってくれます。</p>
<p>契約して実際に電話を使用するまでには最短で１週間～１０日かかるそうです。</p>
<p>ちなみに契約する時は「<a href="http://www.ymobile.jp/biz/">ワイモバイル法人ダイレクト</a>」というから行うと、端末代が優遇されたりするそうです・・・。</p>
<p>&nbsp;</p>
<p>参考：「Ｙモバイル法人かけ放題プログラム」</p>
<p><a href="http://www.ymobile.jp/biz/sp/kakehoudai/">http://www.ymobile.jp/biz/sp/kakehoudai/</a></p>
<p><a href="http://www.ymobile.jp/biz/sp/miseden/">http://www.ymobile.jp/biz/sp/miseden/</a></p>


電話代を削減するには？Y!mobileの法人かけ放題プログラム

初心者は意外と使っていないかもしれないCSSの指定の仕方

SVG.jsでjQueryのようにSVGを軽快に扱う

初級者は意外と理解してない(?)CSSの優先順位について

<p class="single-first-p">I would like to feature and summarise an article I read in the <a href="http://www.webdesignerdepot.com/2015/01/4-essential-layout-trends-for-2015/" target="_blank">Web designer depot</a> about this year layout trends.</p>
<p class="single-first-p">If we looked back 10 years we will find that the web had the same go-to pattern consisted of a header, footer, sidebar and content area. It was the expected layout for the web. Current web design you will no doubt notice that the fundamental structure for web pages is anything but fixed. The new norm as it were, is that there appears to be no fixed formula at all.</p>
<p>Although we can observe several trends in layout design representing unusual layouts, unusual as they don’t follow a strict formula. But they are trends because there&#8217;s hundreds of examples for each category.</p>
<p>This blend of trends will hopefully be an inspiration for your  future projects.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>SPLIT SCREENS</h2>
<p>The sites that split the screen using a vertical divide.</p>
<p><a href="http://eightandfour.com/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6843 " src="/uploads-archive/2015/02/161.jpg" alt="161" width="717" height="453" /></a></p>
<p>You can use it when you either want to promote two things, two elements of equal importance. Or to remark trough two elements what defines the company, which is the duality that gives the core strengths.</p>
<p>This approach allows the user to rapidly select between the two elements and easily explain the corporate identity of the company and give a lasting impression.</p>
<h2></h2>
<h2></h2>
<p>&nbsp;</p>
<h2>NO DECORATIONS!</h2>
<p>A common trend now, which I specially like, is to remove all of this extra containing elements (boxes, borders, shapes, etc,) that we usually use to separate the content of a page (header, footer,&#8230;). Check these sites.</p>
<p><a href="http://www.br-time.jp/"><img decoding="async" loading="lazy" class="alignundefined wp-image-6844 " src="/uploads-archive/2015/02/02.jpg" alt="02" width="669" height="380" /></a></p>
<p>In this example, you can appreciate no limitation between header and footer. It feels more like an interactive kiosk instead. The hierarchy of content is done through a left to right division. As a consequence the beautiful products shine through.</p>
<p><a href="http://foreword.io/"><img decoding="async" loading="lazy" class="aligncenter wp-image-6850 " src="/uploads-archive/2015/02/131.jpg" alt="131" width="658" height="425" srcset="/uploads-archive/2015/02/131.jpg 928w, /uploads-archive/2015/02/131-300x194.jpg 300w, /uploads-archive/2015/02/131-228x147.jpg 228w" sizes="(max-width: 658px) 100vw, 658px" /></a></p>
<p>&nbsp;</p>
<p>Here, the content is greatly emphasized. Instead of reading a header first, you read the name of the company and the statement about what they do (and where they do it). Followed by the global navigation.</p>
<p>It is a good way to emphasise the brand, and make a good first impact,  before getting people to navigate. Very neat.</p>
<h2></h2>
<p>&nbsp;</p>
<h2>MODULAR OR GRID BASED</h2>
<p>This trend is not exactly new, we have used it in the past too indeed. Little by little it&#8217;s gaining notoriety thanks to the introduction of responsive web design. The layout built on modular or grid-like structures can flex based on the screen size.</p>
<p><a href="http://www.teambadcompanyrowing.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6853" src="/uploads-archive/2015/02/04.jpg" alt="04" width="692" height="422" /></a></p>
<p>This example perfectly demonstrates the idea. The design is completely responsive. As the screen size changes each module adapts and sizes to fit the space.</p>
<p><a href="http://madagascar.dreamworks.com/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6854" src="/uploads-archive/2015/02/19.jpg" alt="19" width="732" height="537" /></a></p>
<p>&nbsp;</p>
<p>In this example there is an important design element at work here, which the previous example lacked. The size of the modules vary to reflect the order of importance and its place in the hierarchy.</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>SINGLE SCREEN</h2>
<p>When the design adapts to completely fill the screen, without scrolling, which means that the content has to be extremely focused, and the hierarchy of content clearly established.</p>
<p><a href="http://hatchcollective.co.uk/"><img decoding="async" loading="lazy" class="alignnone  wp-image-6855" src="/uploads-archive/2015/02/09.jpg" alt="09" width="725" height="518" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>


LAYOUT TRENDS FOR 2015

HTML5のインラインSVGとjQueryでお絵描き

<h2>ポスパケットとは？</h2>
<p>通常ＥＣサイトを運営されている方は宅配便もしくはメール便で商品を発送していると思いまが、日本郵便の「ポスパケット」をご存じでしょうか。</p>
<p>ポスパケットとは宅配便とメール便の中間的な位置づけの配送方法です。</p>
<p>&nbsp;</p>
<p>「ポスパケットのポジティブポイント」</p>
<p>・厚さ制限は3.5センチまでＯＫ、重さは1キロ以内</p>
<p>・送料は一律360円</p>
<p>・追跡サービス利用可能</p>
<p>・速達と同等のスピード</p>
<p>・封筒で送れる</p>
<p>「ポスパケットのネガティブポイント」</p>
<p>・代引き、着払いができない</p>
<p>・ポスト投函（←ポジティブポイントかも）</p>
<p>ポスパケットについてもっと詳しく知りたい方はこちらからどうぞ<a href="http://www.post.japanpost.jp/service/pospa/">http://www.post.japanpost.jp/service/pospa/</a></p>
<p>&nbsp;</p>
<p>ＥＣサイトに限らず通販の店舗運営をされている方はできるだけ送料を抑えたいと常に考えていると思いますが、商品のサイズが3.5以内ならポスパケットの利用で送料をかなり抑えれると思います。</p>
<p>コスメや食品を販売している店舗の中には、メール便の厚さ制限にひっかかるため、仕方なく宅配便を使ってるという方も少なくないと思います。</p>
<p>宅配便の送料は安くても450円前後だと思います。ポスパケットは全国一律で360円なので、発送１回あたりのコストを100円近く下げる事ができます。</p>
<p>さらに、ダンボールではなく封筒で送れるので梱包材のコストも10円程度抑えられると思います。</p>
<h2>ゆうプリＲでポスパケットの送り状を作成する方法</h2>
<h6>送り状のシートを探す</h6>
<p>ポスパケット専用のタックシールを郵便局からもらうと、はじめからお問い合わせ番号が入ってしまっています。</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6834" src="/uploads-archive/2015/02/b90dcbfc99fe9f987b82100e751f9062.gif" alt="ポスパケット1" width="500" height="463" /></p>
<p>上の画像が実際のタックシールなんですが、モザイク部分にお問い合わせ番号が入ってしまっています。実はこれがかなり厄介なんです。</p>
<p>ＥＣモールの運営をされている方ならすぐに察しが付くと思いますが、送り先のデータとお問い合わせ番号が紐づけられていないので、このままだと発送メールに手打ちでお問い合わせ番号を入力するはめになります。</p>
<p>ということで通常のタックシールを使わず、市販のシールを使う必要があります。ゆうプリＲで使用できる市販のシールは以下のものになります。</p>
<p>・コクヨ2×4（KJ-8165~LBP-7165N)</p>
<p>・エーワン2×4(62020~76208),(31314)</p>
<p>・マクセル2×4(L7165-20A)</p>
<p>・ヒサゴ2×4(ELM005)</p>
<p>上に記したのはメーカーとシールの型番です。ゆうプリＲ内で設定ができるようになっているので書きましたが、これらとサイズ・寸法が一緒であれば使えると思います。</p>
<p>ちなみにタックシールの専門店があるのでこういうところで、共通のタックシールも売っています。<a href="http://item.rakuten.co.jp/ooki2/ldw8se-5/">http://item.rakuten.co.jp/ooki2/ldw8se-5/</a></p>
<p>ここではシート1枚あたり13円、1発送あたり1.7円です。探したらもっと安い所があるかもしれません。</p>
<h6> ゆうプリＲでポスパケットの送り状設定を行う</h6>
<p>ポスパケットの送り状をゆうプリＲで作成するにはまず送り状設定を行う必要があります。上に書いたシールや寸法が合っているタックシールであればどれを選んでも同じだと思うのですが、取りあえず今回っは「ポスパケット用2×4コクヨ」を選びます。</p>
<p>そして使用区分を「使用する」に変更して更新して下さい。</p>
<p>もし型番が合っているなら、その送り状名を選択した方が無難だと思います。</p>
<p><a href="/uploads-archive/2015/02/pp2.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6839" src="/uploads-archive/2015/02/pp2.gif" alt="pp2" width="586" height="413" /></a></p>
<h6></h6>
<h6>ゆうプリＲ　プリンタ設定を行う</h6>
<p>続いて「使用する」に変更したタックシールのプリンタ設定を行う必要があります。</p>
<p>プリンタ名とトレイ名を選択して更新して下さい。</p>
<p><a href="/uploads-archive/2015/02/pp3.gif"><img decoding="async" loading="lazy" class="alignnone  wp-image-6840" src="/uploads-archive/2015/02/pp3.gif" alt="pp3" width="596" height="420" /></a></p>
<h6>ゆうプリＲ　フィルターを設定する</h6>
<p>ＣＳＶデータのやり取りで送り状を作成する際にはフィルターの設定が必要になります。ＥＣ店舗の運営をされている場合は発送する個数も多いでしょうからフィルターの設定が必須です。</p>
<p>フィルターの設定はＣＳＶデータに対してどんな並びでも合わせられるようになっているので汎用性が高く複雑です。なので紐づけの方法は<a href="/designer/%E3%82%86%E3%81%86%E3%83%97%E3%83%AA%EF%BD%92%E3%81%A7%E3%82%86%E3%81%86%E3%83%91%E3%82%B1%E3%83%83%E3%83%88%E7%94%A8%E3%81%AE%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%83%BC%E3%82%92%E4%BD%9C%E6%88%90.html">過去の記事</a>を見て下さい。</p>
<p>ここではポスパケットの送り状を作成する際に必要な項目をお伝えします。</p>
<p>（必須）郵便種別　→　5※固定値</p>
<p>（必須）送り状種別　→　1600800001（エーワン）,1600800002（コクヨ）,1600800003（マクセル）,1600800004（ヒサゴ）,1600800005（エーワンの31314）※固定値</p>
<p>（必須）お届け先郵便番号</p>
<p>（必須）お届け先住所</p>
<p>（必須）お届け先名称</p>
<p>（必須）ご依頼主郵便番号</p>
<p>（必須）ご依頼主住所</p>
<p>（必須）ご依頼主名称</p>
<p>以上が必須の項目になります。必須ではありませんが「品名」も印字シールに印刷可能です。</p>
<h6>ポスパケットの送り状を印刷する</h6>
<p>ここまででポスパケットの送り状を作成するための設定は完了です。</p>
<p>あとは「配送管理」で送り状を印刷するだけです。</p>
<p>まずはファイル取り込みで先ほど設定したフィルターを選択し発送先のデータを取込ます。</p>
<p>データが取り込めたら送り状種別をポスパケット用2×4にして印刷するだけです。</p>
<p>&nbsp;</p>
<h6>もし送り状を印刷した際にエラーが出たら</h6>
<p>郵便局側があなたのゆうプリＲにポスパケット発送数を登録していない可能性があります。</p>
<p>サポートセンターに問い合わせてみて下さい。</p>
<p><a href="http://www.post.japanpost.jp/yu-packprint-r/">http://www.post.japanpost.jp/yu-packprint-r/</a></p>


送料が安いポスパケットをＥＣ運営で利用する方法

<p>レスポンシブのコーディングは通常のサイトコーディングと違った書き方をした方がいい時があります。</p>
<p>たまにレスポンシブ化されているサイトのソースを見て、「こんな風にやってるんだ〜」と思いながら、<br />
実際に似たようなレイアウトがある場合、参考にさせていただいたりしていますが、そのレスポンシブのパターン集なるサイトがありました。</p>
<h2>Responsive Web Design Patterns</h2>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6790" src="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg" alt="Responsive Web Design Patterns  This Is Responsive" width="640" height="428" srcset="/uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-1024x684.jpg 1024w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-300x200.jpg 300w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive-228x152.jpg 228w, /uploads-archive/2015/02/Responsive-Web-Design-Patterns-This-Is-Responsive.jpg 1235w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>こちらのサイトは、</p>
<ul>
<li>レイアウト</li>
<li>ナビゲーション</li>
<li>イメージ(画像)</li>
<li>メディア/データ</li>
<li>フォーム</li>
<li>テキスト</li>
<li>モジュール(カルーセルやタブ等)</li>
</ul>
<p>といったレイアウトのパターンがあり、<br />
DEMOを見ることができます。</p>
<p>あとはDEMOのページをFirebugかなにかでソースを見ればその手法がわかります。</p>
<p>初心者はもちろん、経験者にもなにかしら得れるものがあるかと思います。</p>
<p><a href="http://bradfrost.github.io/this-is-responsive/patterns.html" class="link" target="_blank">Responsive Web Design Patterns | This Is Responsive</a></p>


レスポンシブのコーディング時に参考にしたいレイアウトサンプル集

<p>PCとスマホで違うHTML,テンプレートを使用したい場合、Wordpressで作成する場合は便利なプラグインがあるようです。</p>
<p>最近はレスポンシブも増えていますが、別々のソースを使用する場合もまだまだ多いです。<br />
今後そのような状況になりそうなので、プラグインを使ってインストールしてみました。</p>
<p>紹介出来そうなのが3つありましたので、早速紹介したいと思います。</p>
<h2>Multi Device Switcher</h2>
<p>オプションという観点から見ると、こちらが一番豊富だと思います。<br />
日本人の方が作成しているのでもちろん日本語です。</p>
<p>インストール後、<br />
外観に「マルチデザイン」という項目が表示されるので、そこに行くと・・・<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-6756" src="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png" alt="スクリーンショット 2015-01-27 13.25.00" width="636" height="632" srcset="/uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022.png 636w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-150x150.png 150w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-300x298.png 300w, /uploads-archive/2015/01/63f69f1dd8f70898fe27f1cedb432022-228x226.png 228w" sizes="(max-width: 636px) 100vw, 636px" /><br />
上の写真のようにスマートフォンやタブレット、ガラケー用にテーマを選択できます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6757" src="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png" alt="スクリーンショット 2015-01-27 13.25.28" width="635" height="773" srcset="/uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3.png 635w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-246x300.png 246w, /uploads-archive/2015/01/6b7ba6b5ae155ddc315f9163d52f02f3-228x277.png 228w" sizes="(max-width: 635px) 100vw, 635px" /><br />
ユーザーエージェントも自由に記載できます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-full wp-image-6758" src="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png" alt="スクリーンショット 2015-01-27 13.25.54" width="626" height="350" srcset="/uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85.png 626w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-300x167.png 300w, /uploads-archive/2015/01/fd55dcab43344213382d993a5b900c85-228x127.png 228w" sizes="(max-width: 626px) 100vw, 626px" /></p>
<p>スマートフォン等で見た際に、PC版を表示といったボタンの設定の可能です。</p>
<p>かなりいい感じだと思いますが、下のサイトでは評価があまりされてないようですね・・・</p>
<p>&nbsp;</p>
<p><a class="link" href="https://wordpress.org/plugins/multi-device-switcher/" target="_blank">Multi Device Switcher</a></p>
<p>&nbsp;</p>
<h2>Any Mobile Theme Switcher</h2>
<p>&nbsp;</p>
<p>こちらはインストール後、<br />
設定に「Any Mobile Theme」という項目が表示されます。<br />
このプラグインはスマホを細かくわけることができます。<br />
iPhone,Android,Window Mobileなんかもありますね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6759" src="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png" alt="スクリーンショット 2015-01-27 13.24.16" width="630" height="626" srcset="/uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45.png 737w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-150x150.png 150w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-300x297.png 300w, /uploads-archive/2015/01/a295efa61f1546a4357a80912da40e45-228x226.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>スマホでも更に細かくテーマを切り替えたい場合はこちらがいいかもしれませんね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6760" src="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png" alt="スクリーンショット 2015-01-27 13.55.48" width="630" height="414" srcset="/uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63.png 729w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-300x197.png 300w, /uploads-archive/2015/01/a46b88b50609c8e40a9c933330ba9b63-228x149.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>オプションとしては、先ほどのにもあった「PC版」「スマホ版」へ切り替えリンクがフッターに表示されます。<br />
また、「PC版」「スマホ版」の表示の記憶を設定できます。</p>
<p>評価としては、こちらのほうが先ほど紹介したものよりは高くなっております。</p>
<p><a class="link" href="https://wordpress.org/plugins/any-mobile-theme-switcher/" target="_blank">Any Mobile Theme Switcher</a></p>
<p>&nbsp;</p>
<h2>Device Theme Switcher</h2>
<p>&nbsp;</p>
<p>インストール後、<br />
外観に「Device Themes」という項目が表示されます。</p>
<p>そこへ行くと以下の画像のようなページになりますが・・・上２つと比べるとちょっと、、、って感じですね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone wp-image-6761" src="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png" alt="スクリーンショット 2015-01-27 13.24.47" width="630" height="211" srcset="/uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23.png 867w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-300x100.png 300w, /uploads-archive/2015/01/f807abd3976c74e7052d670856dd8e23-228x76.png 228w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p><a class="link" href="https://wordpress.org/plugins/device-theme-switcher/" target="_blank">Device Theme Switcher</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>一つのWordpressで作れば、記事やカテゴリが共有できるので便利ですね！！</p>


WordPressにてデバイス毎にテーマを切り替えさせるプラグイン

アニメーション付きSVGで実装する滑らかで自然なアニメーション

<p>今回は動画でweb系のスキルを学べるサービスをご紹介します。</p>
<p>以前、web上で学べるサイトを紹介した時にあった、ドットインストールやschooも動画で学べるサイトですね！<br />
その二つはかなり普及されているように感じます。</p>
<p>今回ご紹介するのは3つのサイトになります。</p>
<h2>Progate</h2>
<p><a href="http://prog-8.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6683" src="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg" alt="Progate  Learn to Code, Learn to be Creative." width="620" height="346" srcset="/uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-1024x571.jpg 1024w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-300x167.jpg 300w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative.-228x127.jpg 228w, /uploads-archive/2015/01/Progate-Learn-to-Code-Learn-to-be-Creative..jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://prog-8.com/" target="_blank" class="link">Progate | Learn to Code, Learn to be Creative.</a></p>
<h2>Udemy</h2>
<p><a href="https://www.udemy.com/courses/" target="_blank"><img decoding="async" loading="lazy" class="alignnone wp-image-6681" src="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg" alt="Best Online Courses  Udemy" width="620" height="346" srcset="/uploads-archive/2015/01/Best-Online-Courses-Udemy-1024x571.jpg 1024w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-300x167.jpg 300w, /uploads-archive/2015/01/Best-Online-Courses-Udemy-228x127.jpg 228w, /uploads-archive/2015/01/Best-Online-Courses-Udemy.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="https://www.udemy.com/courses/" target="_blank" class="link">Best Online Courses | Udemy</a></p>
<h2>Learn Git</h2>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-6682" src="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg" alt="Learn Git - Learn Version Control with Git" width="620" height="346" srcset="/uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-1024x571.jpg 1024w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-300x167.jpg 300w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git-228x127.jpg 228w, /uploads-archive/2015/01/Learn-Git-Learn-Version-Control-with-Git.jpg 1183w" sizes="(max-width: 620px) 100vw, 620px" /></a></p>
<p><a href="http://www.git-tower.com/learn/videos" target="_blank" class="link">Learn Git &#8211; Learn Version Control with Git</a></p>


動画で学べるwebサービス3つのご紹介

<h2>クレショフ効果</h2>
<p>組合せ①</p>
<p><a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /><img decoding="async" loading="lazy" class="alignnone  wp-image-6700" src="/uploads-archive/2015/01/f067ea0290cc244b066bd6f37a64e212_s.jpg" alt="f067ea0290cc244b066bd6f37a64e212_s" width="234" height="355" /></a></p>
<p>組合せ②</p>
<p><a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /></a><a href="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6720" src="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg" alt="c8752b03ac9ac93f7b3d1d64881c788d_s" width="236" height="356" srcset="/uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s.jpg 424w, /uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s-198x300.jpg 198w, /uploads-archive/2015/01/c8752b03ac9ac93f7b3d1d64881c788d_s-228x344.jpg 228w" sizes="(max-width: 236px) 100vw, 236px" /></a></p>
<p>組合せ③</p>
<p><a href="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6699" src="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg" alt="f31bb40bb3430abf631e2272745089b6_s" width="235" height="355" srcset="/uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s.jpg 424w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-198x300.jpg 198w, /uploads-archive/2015/01/f31bb40bb3430abf631e2272745089b6_s-228x344.jpg 228w" sizes="(max-width: 235px) 100vw, 235px" /></a><a href="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6703" src="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg" alt="77cfb2e14a2226ab3f307983ede4d21c_s" width="350" height="232" srcset="/uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s.jpg 640w, /uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s-300x198.jpg 300w, /uploads-archive/2015/01/77cfb2e14a2226ab3f307983ede4d21c_s-228x151.jpg 228w" sizes="(max-width: 350px) 100vw, 350px" /></a></p>
<p>組合せ①～③で女性はどんな心境でしょうか？</p>
<p>きっと左側の女性の表情がそれぞれ違って見えてくるはずです。</p>
<p>女性がどんな心境にいるのか読み取ろうとすると、右側の写真の影響で無意識にバイアスがかかってイメージができてしまうんですね。</p>
<p>これを「クレショフ効果」というそうです。</p>
<p>&nbsp;</p>
<p>実際どんな場合に応用できるかというと、商品の説明ページにおいてシチュエーションを具体的に想像させることで購買意欲をかき立てるとのこと。</p>
<p>例えば「恋人と美味しいワインを一緒に飲みたい」と思わせたり、「パーティーに良いお酒を持っていたったらウケるかな」と想像するように促すというものです。</p>
<p><a href="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6707" src="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg" alt="7a89c5ccdc01da94c6fc2b9faf827dd2_s" width="234" height="353" srcset="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg 424w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-198x300.jpg 198w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-228x344.jpg 228w" sizes="(max-width: 234px) 100vw, 234px" /></a><a href="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6708" src="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg" alt="86652d58125e3dd0ff1294f809a379d8_s" width="233" height="350" srcset="/uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s.jpg 427w, /uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s-200x300.jpg 200w, /uploads-archive/2015/01/86652d58125e3dd0ff1294f809a379d8_s-228x341.jpg 228w" sizes="(max-width: 233px) 100vw, 233px" /></a></p>
<p><a href="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6707" src="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg" alt="7a89c5ccdc01da94c6fc2b9faf827dd2_s" width="234" height="353" srcset="/uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s.jpg 424w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-198x300.jpg 198w, /uploads-archive/2015/01/7a89c5ccdc01da94c6fc2b9faf827dd2_s-228x344.jpg 228w" sizes="(max-width: 234px) 100vw, 234px" /></a><a href="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6710" src="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg" alt="8d30a20398ac40f75c7d2d457adb4a42_s" width="414" height="276" srcset="/uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s.jpg 640w, /uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s-300x200.jpg 300w, /uploads-archive/2015/01/8d30a20398ac40f75c7d2d457adb4a42_s-228x152.jpg 228w" sizes="(max-width: 414px) 100vw, 414px" /></a></p>
<p>イメージ付したい画像を近くに置くことで、お客さんは無意識にワインに対してロマンティックなイメージや、楽しいイメージを想像する可能性が高くなります。</p>
<p>商品単体の画像にこだわるもの大切ですが、商品画像のまわりに配置する画像も大切という事ですね。</p>
<p>&nbsp;</p>
<p>商品自体が無機質なものほど、商品単体の画像より同時に掲載する画像が大切になってきます。</p>
<p><a href="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6711" src="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg" alt="8cbd08a2054cd53bb901e366da701c27_s" width="374" height="249" srcset="/uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s.jpg 640w, /uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s-300x200.jpg 300w, /uploads-archive/2015/01/8cbd08a2054cd53bb901e366da701c27_s-228x152.jpg 228w" sizes="(max-width: 374px) 100vw, 374px" /></a></p>
<p>食器を扱っている場合であれば下のようなシンプルな画像に加えて、実際に使っているシーンの画像や大きさが伝わる画像を加える事でより具体的に商品をイメージできます。</p>
<p><a href="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6712" src="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg" alt="21bc994c0698e4e07948bfb02f0e56e1_s" width="332" height="221" srcset="/uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s.jpg 640w, /uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s-300x200.jpg 300w, /uploads-archive/2015/01/21bc994c0698e4e07948bfb02f0e56e1_s-228x152.jpg 228w" sizes="(max-width: 332px) 100vw, 332px" /></a><a href="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-6714" src="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg" alt="540bb370edfd70c57b1b8bae053c0b32_s" width="329" height="219" srcset="/uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s.jpg 640w, /uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s-300x200.jpg 300w, /uploads-archive/2015/01/540bb370edfd70c57b1b8bae053c0b32_s-228x152.jpg 228w" sizes="(max-width: 329px) 100vw, 329px" /></a></p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2015/03/13

2015/03/11

2015/03/11

2015/03/04

2015/02/27

2015/02/27

2015/02/26

2015/02/18

2015/02/18

2015/02/11

2015/02/11

2015/02/10

2015/02/10

2015/02/05

2015/01/27

2015/01/27

2015/01/22

2015/01/22