CSS3のアニメーションを使ったボタン

<p>wordpressの案件を今抱えており、なかなか思い通りにならなくて、<br />
まだまだだなぁと思いつつ、懸命に頑張っております。</p>
<p>調べながらやっていると、できないと認識していた複数検索ができるというプラグインを発見しました。</p>
<p><a href="http://wordpress.org/extend/plugins/wp-custom-fields-search/" target="_blank">WP Custom Fields Search</a></p>
<p>でも最終アップデートが、2年以上も前だ・・・</p>
<p>っていうか２年前からできたのか・・・</p>
<p>以前調べてた時はそういうものが見つからなかったんですが・・・</p>
<p>こちらのプラグインを日本語化にもできるようです。</p>
<p><a href="http://lovelog.eternal-tears.com/wordpress/wp-plugin-ja/wp-custom-fields-search/" target="_blank"><br />
WP Custom Fields Searchの日本語版配布</a></p>
<p>使い方はこちらをご覧ください。</p>
<p><a href="http://kotori-blog.com/wordpress/customfieldssearch/" target="_blank">WordPressで絞り込み検索を可能にするプラグイン「Custom Fields Search」[WordPress(WP)]</a></p>
<p>3.5のverでも使えることは使えました。</p>
<p>ただ、現在確認できたのは、テキスト、カテゴリ、タグでした。</p>
<p>カテゴリをチェックボックスで複数選択可にして、<br />
検索っていうのはまだわかりません。</p>
<p>うまくやればできるかと思うので、<br />
今後試して見たいと思います。</p>


wordpressで複数検索ができるようになってることを知りました

<p>2013年初のブログということで、簡単にwebデザインのトレンドのお話をしたいと思います。</p>
<p>まずは、昨年のwebデザインから。</p>
<p>海外の方の好みなのでしょうか。<br />
数多くのwebサイトが掲載されています。</p>
<p><a href="http://webdesignledger.com/inspiration/best-of-web-design-in-2012" target="_blank">Best of Web Design in 2012 | Inspiration</a></p>
<p>簡単に大きく分けていうと、</p>
<p style="color: #70440e;"><span style="font-size: medium;">・ベタ塗り</span><br />
<span style="font-size: medium;"> ・大きな写真を背景としてブラウザいっぱいに表示</span><br />
<span style="font-size: medium;"> ・背景にちょっとしたテクスチャ(紙等)</span><br />
<span style="font-size: medium;"> ・レトロな配色</span><br />
<span style="font-size: medium;"> ・ワンカラム</span><br />
<span style="font-size: medium;"> ・スクロールによるアニメーション</span><br />
<span style="font-size: medium;"> ・大きなキャッチコピー</span></p>
<p>こんな感じでしょうか。<br />
(もっと細かくみたら他にもあると思います・・・)</p>
<p>海外の方のものなので、<br />
日本のWEBサイトで見かけるのとは違うかも知れませんが、<br />
僕個人としては、確かに上記のようなサイトが多くあった感じがします。</p>
<p>そして、今年のデザインのトレンドですが、<br />
こちらも海外の方のブログですが、<br />
トレンドを20個紹介してくれています。</p>
<p><a href="http://www.hongkiat.com/blog/web-design-trend-2013/" target="_blank">Web Design: 20 Hottest Trends To Watch Out For in 2013</a><br />
箇条書きにすると以下の様な感じです。</p>
<p style="color: #70440e;"><span style="font-size: medium;">１．レスポンシブデザイン</span><br />
<span style="font-size: medium;"> ２．Retinaの対応</span><br />
<span style="font-size: medium;"> ３．ヘッダーの固定</span><br />
<span style="font-size: medium;"> ４．背景に大きな写真</span><br />
<span style="font-size: medium;"> ５．CSSでの透過</span><br />
<span style="font-size: medium;"> ６．ミニマルなランディングページ</span><br />
<span style="font-size: medium;"> ７．QRコードの掲載</span><br />
<span style="font-size: medium;"> ８．ソーシャルメディアのバッジ</span><br />
<span style="font-size: medium;"> ９．細かいイラスト</span><br />
<span style="font-size: medium;"> １０．無限スクロール(インフィニットスクロール)</span><br />
<span style="font-size: medium;"> １１．HPのチュートリアル</span><br />
<span style="font-size: medium;"> １２．スライドでコンテンツ移動させる</span><br />
<span style="font-size: medium;"> １３．クリックで開閉、表示・非表示になるナビーゲーション</span><br />
<span style="font-size: medium;"> １４．画面いっぱいのタイポグラフィー</span><br />
<span style="font-size: medium;"> １５．オープンソースやAPIの使用</span><br />
<span style="font-size: medium;"> １６．ボックスの影(ドロップシャドウ)</span><br />
<span style="font-size: medium;"> １７．CSS３によるアニメーション</span><br />
<span style="font-size: medium;"> １８．縦のナビゲーション</span><br />
<span style="font-size: medium;"> １９．１ページのwebデザイン</span><br />
<span style="font-size: medium;"> ２０．円形の要素を使用したデザイン</span></p>
<p>ざっと書いてしまうとこんな感じです。</p>
<p>昨年から見られるトレンドもありますが、<br />
今年もトレンドとして引き続きあるってことですねー</p>
<p>僕として、今は、「ベタ塗り」や「テクスチャ」が好みではありますが、<br />
今年のトレンドには見当たらないのシフトしていかないとダメかもしれませんww</p>


2012年のベストwebデザインと、2013年に予想されるwebデザイン

CSS3で伊勢丹の紙袋を作ってみた

CSS3を使って、背景パターンをつくる

<p>最近の若い人達では、縦書ではなく、横書が主になっているようで、<br />
年賀状や、結婚式の受付の記帳なども横書きになっていたりするとか。。。<br />
なんでも縦書だとバランスが取れなくて、バラバラになってしまうです。</p>
<p>そんなこんなで、縦書の美しさを普及するために(特に縦書が好きってわけではないですがww)、<br />
今回は、テキストを自動的に縦書にしてくれるjavascriptのプラグインを紹介したいと思います。</p>
<p>その名も<strong>「竹取.js」</strong>というものです。</p>
<p>プラグインのサイトは以下のURLです。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>簡単なデモサイトを作ってみましたので、<br />
よろしければご覧ください。</p>
<p><a href="/demo/abe/22/" class="demo" target="_blank">DEMO</a><br />
(chromeでご覧ください。)</p>
<p>使い方はシンプルで簡単なんですが、<br />
レイアウトが難しい感じでした。<br />
横と縦の捉え方がこんがらがって混乱しながら作っていました・・・笑</p>
<h2>竹取.jsの使い方</h3>
<p>まずは、ダウンロードしたファイルを読み込みます。</p>
<p></p>

		<div id="crayon-64953fd581da7044631577" 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;link rel="stylesheet" href="css/taketori.css" &gt;
&lt;script src="js/taketori.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-64953fd581da7044631577-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581da7044631577-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-64953fd581da7044631577-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">"stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span>=<span class="crayon-s ">"css/taketori.css"</span><span class="crayon-r "> &gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581da7044631577-2"><span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span>=<span class="crayon-s">"js/taketori.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>
<p>あとは、</p>

		<div id="crayon-64953fd581dac313463174" 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;">
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);
//DEMOは以下のように設定しました
(new Taketori()).set({fontFamily:'serif',height:'auto'}).element('msg','nav','logo').toVertical();
//]]&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-64953fd581dac313463174-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-2">2</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-4">4</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd581dac313463174-6">6</div><div class="crayon-num" data-line="crayon-64953fd581dac313463174-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-64953fd581dac313463174-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">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-2"><span class="crayon-c">//&lt;![CDATA[</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-3"><span class="crayon-c">//(new Taketori()).set({設定項目:'値',設定項目:'値'}).element('縦書き対象要素ID').toVertical(画面の読み込み待ちをするかどうか);</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd581dac313463174-4"><span class="crayon-c">//DEMOは以下のように設定しました</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-5"><span class="crayon-sy">(</span><span class="crayon-r">new</span><span class="crayon-h"> </span><span class="crayon-e">Taketori</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">set</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-i">fontFamily</span><span class="crayon-sy">:</span><span class="crayon-s">'serif'</span><span class="crayon-sy">,</span><span class="crayon-i">height</span><span class="crayon-sy">:</span><span class="crayon-s">'auto'</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">element</span><span class="crayon-sy">(</span><span class="crayon-s">'msg'</span><span class="crayon-sy">,</span><span class="crayon-s">'nav'</span><span class="crayon-sy">,</span><span class="crayon-s">'logo'</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-e">toVertical</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-64953fd581dac313463174-6"><span class="crayon-c">//]]&gt;</span></div><div class="crayon-line" id="crayon-64953fd581dac313463174-7"><span class="crayon-ta">&lt;/script&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>とすればOK!</p>
<p>エレメントを複数指定できるようです。<br />
設定がいろいろありますが、全部把握できておりません。。。</p>
<p>設定は、サイトをご覧下さい。</p>
<p><a href="http://taketori.org/js.html" target="_blank">竹取 JS</a></p>
<p>縦と横との切り替えを簡単に設定できたりするようです。</p>
<p>縦書は和風のようなデザインに適していると思います。<br />
他にも小説のようなテイストにもできますし、<br />
使うシーンはいろいろありそうですね！</p>

テキストを自動的に縦書にしてくれるjavascript

<p>Illustratorにできて、Photoshopにできない表現方法のひとつに、</p>
<p>「グラデーションメッシュ」があります。</p>
<p>グラデーションメッシュを使うと、細かにグラデーションの設定ができるので、</p>
<p>かなり繊細な表現が可能となります。</p>
<p>しかし、このグラデーションメッシュは、使い方に癖があり、複雑な形のものでは思い通りに操作することが難しいため、</p>
<p>なかなか手が出せずにいました。</p>
<p>&nbsp;</p>
<p>そんなときに、<a href="http://www.amazon.co.jp/dp/4861006406" target="_blank">「Illustratorグラデーションメッシュらくらく操作ガイド」</a>という本を見つけました。</p>
<p>こちらの本には、Illustratorのグラデーションメッシュでのソフトウェアの癖を理解したうえで、</p>
<p>それを回避しながら、思い通りにグラデーションメッシュを扱う方法が紹介されていました。</p>
<p>&nbsp;</p>
<p>その中でも、文字の装飾について載っていたので、ご紹介いたします。</p>
<p>&nbsp;</p>
<p>まず、私のこれまで知っていた方法でグラデーションメッシュを文字に適用するとします。</p>
<p>1.グラデーションメッシュを適用するオブジェクトを選択して</p>
<p>2.「オブジェクト」→「グラデーションメッシュを作成」</p>
<p>この方法でグラデーションメッシュを作ると</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img02.jpg" /></p>
<p>↑こちらのように、メッシュがグチャグチャになってしまい、</p>
<p>この状態のメッシュでグラデーションをかけようとすると、</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img03.jpg" /></p>
<p>↑このようによくわからないグラデーションになってしまいます。</p>
<p>これではグラデーションメッシュで思い通りに製作することは、到底できません。</p>
<p>これは、単純な形では便利に使えるようになっているIllustratorにおけるグラデーションメッシュの</p>
<p>作成の仕組みによるものだそうです。</p>
<p>&nbsp;</p>
<p>これを回避する方法のひとつとして、本では３つ程方法が紹介されていましたが、</p>
<p>今回は文字のような、既に形が出来上がっているもので、複雑な図形の編集で有効な方法である、</p>
<p>「ダイレクト選択メッシュ法」について、紹介いたします。</p>
<p>&nbsp;</p>
<p>まずは、文字をアウトライン化したものを用意します。</p>
<p>これを、ナイフツールを使い、とめ・はねのような動きのあるところを切り分けていきます。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img04.jpg" /></p>
<p>次に、切り分けた、それぞれのオブジェクトの、4隅に当たる4つのアンカーポイントを、</p>
<p>ダイレクト選択ツールを使って選択します。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img05.jpg" /></p>
<p>この状態で、「オブジェクト」→「グラデーションメッシュを作成」の手順で、メッシュを作成します。<br />
<img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img06.jpg" /></p>
<p>そうすると、次の画像のように、形に沿ったグラデーションメッシュが出来上がります。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img07.jpg" /></p>
<p>これを切り分けたオブジェクトすべてに行うことで、</p>
<p>きれいなグラデーションメッシュが出来上がりました。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img08.jpg" /></p>
<p>形に沿ったグラデーションメッシュができるので、</p>
<p>次の画像のように、思い通りにグラデーションをかけることができました。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img09.jpg" /></p>
<p>&nbsp;</p>
<p>こちらと似たようなグラデーションを、アウトライン化した文字に、</p>
<p>「効果」→「スタイライズ」→「光彩(内側)」を乗算でかけることでもできますが、</p>
<p>細かな設定はできないので、凝った表現が必要なときは、この方法が表現を広げてくれそうです。</p>
<p><img decoding="async" alt="" src="/uploads-archive/2012/12/grd_img10.jpg" width="100%" /></p>
<p>&nbsp;</p>
<p>ちなみに、グラデーションメッシュは現状のSVG1.1ではサポートされていないため、</p>
<p>Illustratorでグラデーションメッシュを使ったオブジェクトは、jpgやpng等と同じラスターデータに変換されてしまいます。</p>
<p>次世代のSVGである、開発中のSVG2.0ではグラデーションメッシュが採用される予定のようですので、</p>
<p>SVG2.0の普及が待ち遠しいところです。</p>


Illustratorの「グラデーションメッシュ」で、少し凝った文字の装飾

サンプルECサイトを作ってみました。~heightLineプラグインの使用~

<p>白は、Webサイトのデザインの中で、最も多く使う色なのではないかと思います。</p>
<p>今回、白をメインテーマにしたサイトのデザインをすることになったので、</p>
<p>ただ白を使ったサイトではなく、白をうまく引き立てたデザインのWebサイトを探してみました。<br />
<a title="website01" href="/uploads-archive/2012/12/website01.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website01" src="/uploads-archive/2012/12/website01-300x223.jpg" alt="website01" width="300" height="223" /></a><br />
<a href="http://www.storia-wedding.jp/" target="_blank">http://www.storia-wedding.jp/</a></p>
<p><strong></strong>上品な空の青が、新婦さんのドレスの白を綺麗に引き立てています。<br />
<a title="website02" href="/uploads-archive/2012/12/website02.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website02" src="/uploads-archive/2012/12/website02-300x223.jpg" alt="website02" width="300" height="223" /></a><br />
<a href="http://kuad-entrance.com/" target="_blank">http://kuad-entrance.com/</a></p>
<p>余白を多く使い、白のイメージを強め、</p>
<p>淡いグレーが白の邪魔をすることなく、白の一部のようにして、白を引き立てています。<br />
<a title="website03" href="/uploads-archive/2012/12/website03.jpg"><img decoding="async" loading="lazy" class="attachment-medium" title="website03" src="/uploads-archive/2012/12/website03-300x223.jpg" alt="website03" width="300" height="223" /></a><br />
<a href="http://g-u-k.jp/" target="_blank">http://g-u-k.jp/</a></p>
<p>極端に余白を大きくし、有彩色の色を使わないことで、白のイメージが印象に残ります。</p>
<p>&nbsp;</p>
<h3>まとめ</h4>
<p>白を引き立てたサイトの特徴として、次のような印象を感じました。</p>
<p><strong><span style="font-size: medium;">・余白を大きく取り、白の印象を強める(色のついた場所を極力小さくする)</span></strong></p>
<p><strong><span style="font-size: medium;">・上品な有彩色を背景に使って、白の白さを引き立てる</span></strong></p>
<p><strong><span style="font-size: medium;">・淡いグレーやベージュを用いて、白を邪魔することなく、白の陰影のような印象にすることで、メリハリを付ける。</span></strong></p>
<p>&nbsp;</p>
<p>以上のようなことを、参考に、白のサイトのデザインをしてみたいと思います。</p>
<p>&nbsp;</p>


白を引き立てる白のサイト

jQueryプラグインを作ってみました

インラインSVGを利用した棒グラフ

カルーセル・スライダーになる万能jQueryプラグイン「carouFredSel」

medium_blogtop.jpg

small_blogtop.jpg

thumbnail_blogtop.jpg

blogtop.jpg

インラインSVGの基本まとめ

<p>2012年11月20日に早稲田大学の大隈講堂を会場にした、イベントに参加して参りました。</p>
<p>大企業とベンチャーを結びつけるOpen　Innovation　Networkということで、</p>
<p>大企業（CVC）、VC、ベンチャー経営者300人が一堂に会するというイベントでした。</p>
<p>開催趣旨説明で主催者であるメンバーズ剣持社長から説明がありましたが、全てが手弁当で会場さえも早稲田大学から無償で提供されているということをお聞きし、本イベント開催にあたっての関係者の皆さまに非常に感謝の念を覚えました。</p>
<p>私は普段から大学のインキュベーション施設にも入居しており、オフィスも高田馬場にあることから大学に今でも訪れる機会が多いのですが、卒業以来来ていなかったというOBの経営者の方が懐かしんでおられたり、私自身も、何年ぶりかに再会出来た方が複数名いたりと非常に意義のあるイベントでした。</p>
<p><a href="http://everevo.com/event/2464  " target="_blank">http://everevo.com/event/2464</a></p>
<h2>開催趣旨説明</h3>
<p>メンバーズ剣持社長から開催にあたっての趣旨説明。</p>
<p>雇用を創出できるのは現在ベンチャー企業しかない。大企業の状況は惨憺たるものだ。</p>
<p>だからこそ、ベンチャーを育てるために出来ることをやるという使命感の元に開催をしている。</p>
<p>イスラエル、軍事産業からベンチャーのメッカ</p>
<p>韓国、ベンチャー起業で兵役免除。雇用を増やすことを最重視する。</p>
<p>&nbsp;</p>
<p>株式上場　12社</p>
<p>M&amp;A　271社</p>
<p>&nbsp;</p>
<p>シリコンバレーはベンチャー企業だけのためのものでなく大企業のためのものである</p>
<p>IBMは直接投資ではなく、VCに資金提供</p>
<p>大企業はコーポレートベンチャリングへの関心が2/3がない</p>
<h2> パネルディスカッション</h3>
<p>・インキュベートファンド　本間さん</p>
<p>・リードキャピタル　高階さん</p>
<p>・マイク上杉さん</p>
<p>社長をやりたいから会社をやっている人のほうが大きい</p>
<p>No１になりたいから社長をやっている人のほうが少ない</p>
<p>日本では、全てのものに神が宿って、情が入る。</p>
<p>欧米では、企業、法律で決めた仕組みでしかない。</p>
<p>本間さん</p>
<p>シードステージに提供</p>
<p>ポケラボとセガの事例</p>
<p>セガのスマートフォンの知見とポケラボのガラケーの知見の融合</p>
<p>gumi　500名</p>
<div></div>
<p>高階さん</p>
<p>1999年渡米</p>
<p>CVC(Corporate Venture Capital)　2003年に帰国</p>
<p>3億の投資がメイン</p>
<div>リードのアジャイルメディア</div>
<p>&nbsp;</p>
<p>マイク上杉さん</p>
<p>ソーシャルリワーズ</p>
<p>2500万円ずつ出しあい5000万円で家を売って開始。</p>
<p>VC周りを1年やったが、全く受けなかった。</p>
<p>シードで5%しかやらない。</p>
<p>シリーズAでも少なめに。</p>
<div>ニッチマーケットに特化</div>
<p>&nbsp;</p>
<p>・大企業側が降りてきてくれている</p>
<p>早めに情報を共有することが大きい</p>
<p>・50%渡せは、いきなり結婚しろと言っているようなもの。</p>
<p>・MAのバリューがあがることを期待している</p>
<h2> パネルディスカッション2</h3>
<p>仮説</p>
<p>・大手企業にとってグローバル競争化に自前だけで事業開発は無理</p>
<p>・ベンチャーとの連携もしくはM&amp;Aで事業開発をしたいと本気で思っている</p>
<p>・起業家・アーリーVC・ミドルステージ</p>
<p>&nbsp;</p>
<p>リーンスタートアップ</p>
<p>起業家は若者　よそ者　変わり者</p>
<p>&nbsp;</p>


Connect! 2012に参加して

<p>今回で2回目になりますが、<br />
弊社サイトのリニューアルに際し、wordpressを使用し、<br />
つまづいたコトを書かせて頂きます。</p>
<p>今回は、<br />
「関連記事の表示」です。</p>
<h2>関連記事の表示</h3>
<p>まずは、関連記事の表示ですが、<br />
これは下のプラグインを使いました。</p>
<p><a href="http://wordpress.org/extend/plugins/yet-another-related-posts-plugin/" target="_blank">Yet Another Related Posts Plugin</a></p>
<p>人気があり、評価も高いプラグインです。</p>
<h3>設定方法</h4>
<p>インストール自体はとても簡単で、</p>
<p><strong>メニュー　＞　プラグイン</strong></p>
<p>からインストールできます。</p>
<p>プラグインを有効化した後は、</p>
<p><strong>メニュー　＞　設定　＞　関連記事(YARPP)</strong></p>
<p>からいろいろと設定できます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-760" title="スクリーンショット（2012-11-14 15.17.06）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png" alt="" width="645" height="406" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）.png 727w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-300x188.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.17.06）-228x143.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a></p>
<p>自動的に表示するか、表示記事数をいくつだすか、表示記事のHTML部分を変更したり、といった感じで<br />
いろいろと設定できます。<br />
(自動的に表示するをチェックしたい場合、おそらく<strong></strong>の直後にでてくる設定になると思います。自分で位置を決めたい人は、<strong></strong>を任意の箇所に記載してください。)</p>
<p>これでOK！</p>
<p>あとは記事がいくつかできれば、関連記事として表示してくれます。</p>
<p>と思ったんですが・・・・<br />
記事が十分あり、似たような記事もあるにもかかわらず出てこない・・・</p>
<p>なぜだろうと思って調べたら、<br />
<strong>「関連スコア」</strong>というものを設定しているらしく、<br />
このスコアによって関連記事を表示をコントロールしているようです。</p>
<p>設定のページ上の右上の<strong>「表示オプション」</strong>を開くと、<br />
<strong>「関連スコア設定」</strong>という項目があります。<br />
そいつをチェックすると、</p>
<p>以下の画面が追加されます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-762" title="スクリーンショット（2012-11-14 15.16.08）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png" alt="" width="645" height="329" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）.png 729w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-300x153.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-14-15.16.08）-228x116.png 228w" sizes="(max-width: 645px) 100vw, 645px" /></a></p>
<p>初期状態では、表示する最低関連スコアが5に設定されています。<br />
<strong>5</strong>っていうのは、そうとう一致していないと表示されないみたいなので、<br />
<strong>2</strong>か<strong>3</strong>ぐらいに設定すると良いかと思います。</p>
<p>スコアを下げたら、無事表示されました！！<br />
結果的に非常に簡単な話でした・・・</p>
<p>ついでですが、<br />
その表示オプションには<strong>「フィルター設定」</strong>という項目もあり、<br />
それをチェックすると以下の画面が表示されます。</p>
<p><a href="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png"><img decoding="async" loading="lazy" class="alignnone  wp-image-767" title="スクリーンショット（2012-11-21 14.37.49）" src="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png" alt="" width="644" height="237" srcset="/uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）.png 892w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-300x109.png 300w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-768x282.png 768w, /uploads-archive/2012/11/スクリーンショット（2012-11-21-14.37.49）-228x83.png 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p>ここでは、その名の通り、関連記事の箇所に、表示させたくない、カテゴリーやタグを設定できるようです。</p>
<p>使用してみると、<br />
非常に便利ですね、このプラグイン。</p>
<p>これで、ブログを見た方が、さらに違うブログを見て、<br />
サイトを回遊してくれると、このサイトでブログをやっている冥利につきます。</p>
<h4>〜おまけ〜</h6>
<p>記事とは全然関係ないんですが、<br />
最近、おぉーすごいなぁ〜と思ったwebサイトをご紹介します。</p>
<p><a href="http://ikuze-tohoku.jp/kitchen/" target="_blank">行くぜ、東北。2012 秋</a></p>
<p><a href="http://ikuze-tohoku.jp/kitchen/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-769" title="行くぜ、東北。2012 秋" src="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg" alt="" width="644" height="483" srcset="/uploads-archive/2012/11/行くぜ、東北。2012-秋.jpg 1176w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-300x225.jpg 300w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-768x577.jpg 768w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-1024x769.jpg 1024w, /uploads-archive/2012/11/行くぜ、東北。2012-秋-228x171.jpg 228w" sizes="(max-width: 644px) 100vw, 644px" /></a></p>
<p>ちょっと重いですが、パララックス効果が駆使されてます。<br />
色使いやデザインなんか素敵です。</p>

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

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

2013/01/17

2013/01/17

2013/01/10

2013/01/10

2012/12/20

2012/12/20

2012/12/13

2012/12/13

2012/12/06

2012/12/06

2012/11/29

2012/11/29

2012/11/22

2012/11/22

2012/11/22

2012/11/15

2012/11/08

2012/11/01