<p>Bootstrapとは、以前流行った(?)twitter bootstrapのことで、<br />
前はそんな風に呼んでいたみたいですが、今は、「Bootstrap」という名称になっているようです。</p>
<p>そんなBootstrapのテーマを専門的に販売しているサイトが「BootstrapBay」です。<br />
管理画面用から、一般のサイトまで様々なカテゴリーがあります。<br />
E-Commerceのカテゴリもありますが、今現在はないようですね(2014年7月15日)。</p>
<p><a href="http://bootstrapbay.com/" target="_blank">BootstrapBay &#8211; Bootstrap Themes &amp; Templates</a></p>
<p>そもそも「Bootstrap」って？という人は以下のリンクをご覧下さい。</p>
<p><a href="http://ascii.jp/elem/000/000/795/795948/" target="_blank">いまさら聞けない「Twitter Bootstrap」とは？ (1/2)｜Webサービス開発者のためのTwitter Bootstrap入門</a></p>
<p>そしてさらに、こちらもご覧頂けると基本的な使い方はもうOKです。</p>
<p><a href="http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html" target="_blank">Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) &#8211; ＠IT</a></p>
<p>本家のサイトを見てみますと、確かにもう「Bootstrap」の表記になってますね。</p>
<p><a href="http://getbootstrap.com/2.3.2/" target="_blank">Bootstrap</a></p>
<p>今回初めて知ったのですが、bootstrapのカラーテーマの変更できるものが用意されているようです。</p>
<p><a href="http://bootswatch.com/" target="_blank">Bootswatch: Free themes for Bootstrap</a></p>
<p>これは最初にご紹介した物とは違い、カラーテーマのバリエーションしかないですね。</p>
<p>Bootstrapは、今後もいろいろと活躍しそうな感じですね〜</p>
<p>他にも、Bootstrapをベースにして、作成されたフレームワーク、テンプレートがありますので、<br />
最後にご紹介します。</p>
<p><a href="http://designmodo.github.io/Flat-UI/" target="_blank">Flat UI &#8211; Free Bootstrap Framework and Themes</a></p>
<p><a href="http://www.flatstrap.org/" target="_blank">Flatstrap by Littlesparkvt.com</a></p>


Bootstrapのテーマを販売している「BootstrapBay」

<p>googleが新たなデザインを提唱しているのが耳に入ったので、<br />
それを紹介します。</p>
<p><a href="http://www.google.com/design/#resources" target="_blank">Google Design</a></p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Introduction &#8211; Material Design &#8211; Google design guidelines</a></p>
<p>Material Designという名称でガイドラインが用意されているのですが、<br />
まぁパッと見、フラットデザインに近しい印象があります。</p>
<p>Material というと、「素材,材料,物質」という意味があるように、<br />
かなりざっくりいうと、<br />
1.デザイン要素は現実の物のメタファーを用い、<br />
2.わかりやすく意図的な色使い、グラフィック、タイポグラフィ、<br />
3.意味のあるアニメーションを用いましょう<br />
という感じかと思います。</p>
<p>項目は以下のようになっています。</p>
<p>・アニメーション<br />
・スタイル<br />
・レイアウト<br />
・コンポーネント<br />
・パターン<br />
・ユーザビリティ<br />
・リソース</p>
<p>かなり事細かに説明があり、<br />
原則から始まり、レイアウト、スタイル、コンポーネント等には、<br />
これはOK,これはダメといった指示まであります。<br />
テンプレートも用意されています。</p>
<p>スタイルの項目には、カラーやフォントについての記述があるのですが、<br />
こちらも、リソースとして、カラーパレットやフォントデータを提供してくれています。</p>
<p>細かいことはやはりサイトを見て感じてもらう必要があるかと思います。<br />
今後のデザインを作用しうるものになるかもしれないので、一読の必要性ありかもしれません。</p>
<p>といってもあまりにも従いすぎると、均一したデザインになってしまいますね。<br />
それがGoogleの狙いなのかもしれませんが。</p>
<p><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank" class="link">Introduction &#8211; Material Design &#8211; Google design guidelines</a></p>


Googleが新たに提唱しているMaterial Design

<p>webサイトを作っていると、バナーを作成する機会というのは少なからず発生します。</p>
<p>私は、バナー作成が正直ちょっと苦手で、webのデザインからしかやってないせいか、グラフィックの領域のような気がしてしまい、いつも悩まされています。</p>
<p>そんな時は、やはり、他のバナーは一体どんな感じなのか？？</p>
<p>を知るのが大切だと思います。<br />
goole画像検索しても出てきますが、バナーを集めたサイトをご紹介させていただきます。</p>
<h2>バナーデザイン・サンプルデータベース</h3>
<p><a href="http://aka-design.sub.jp/bd/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5180" alt="バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）" src="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-1024x566.jpg 1024w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-300x165.jpg 300w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031-228x126.jpg 228w, /uploads-archive/2014/07/99146cefb2d74abfcf62a8ca0249c031.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://aka-design.sub.jp/bd/" target="_blank">バナーデザイン・サンプルデータベース｜ホームページ作成 AKAIRO株式会社（アカイロ）</a></p>
<p>&nbsp;</p>
<h2>バナーデザインアーカイブ</h3>
<p><a href="http://banner.keizine.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5181" alt="バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！" src="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-1024x566.jpg 1024w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-300x165.jpg 300w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80-228x126.jpg 228w, /uploads-archive/2014/07/f445f53e2e2abb95ac09450534050a80.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://banner.keizine.net/" target="_blank">バナーデザインアーカイブ｜バナーのデザインをまとめてチェック！</a></p>
<p>&nbsp;</p>
<h2>バナーデザインギャラリー</h3>
<p><a href="http://www.banner-design-gallery.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5182" alt="バナーデザインギャラリー  Banner Design Gallery" src="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-1024x566.jpg 1024w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-300x165.jpg 300w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52-228x126.jpg 228w, /uploads-archive/2014/07/3cf9be9b3498b69c337f4a439f509d52.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://www.banner-design-gallery.com/" target="_blank">バナーデザインギャラリー | Banner Design Gallery</a></p>
<p>&nbsp;</p>
<h2>バナーデザイン専門ギャラリーサイト レトロバナー</h3>
<p><a href="http://retrobanner.net/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-5183" alt="バナーデザイン専門ギャラリーサイト  レトロバナー" src="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg" width="641" height="354" srcset="/uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-1024x566.jpg 1024w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-300x165.jpg 300w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef-228x126.jpg 228w, /uploads-archive/2014/07/3b35ad34e76863b397438375970c32ef.jpg 1223w" sizes="(max-width: 641px) 100vw, 641px" /></a><br />
<a class="link" href="http://retrobanner.net/" target="_blank">バナーデザイン専門ギャラリーサイト | レトロバナー</a></p>
<p>&nbsp;</p>
<p>他にも作るコツ等を説明してくれているブログも紹介します！</p>
<p><a href="http://www.find-job.net/startup/tips-of-banner">有名企業の事例から学ぶ！高品質なバナー広告を作るための「コツ＆レイアウト」集 | Find Job ! Startup</a></p>
<p>&nbsp;</p>
<p><a href="http://nanapi.co.jp/blog/2013/10/02/make-banner-speedy/">新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog</a></p>
<p>&nbsp;</p>
<p><a href="http://liskul.com/banner_layout-1143">勝てるバナーレイアウト20選！│レイアウトに悩んだ時の虎の巻</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ささってかっこよくバナー作れるようになりたいですね・・・</p>


バナー作成に困った時に見たいサイト7選

<p>ふとitunesのアプリを見ていたら、いいものを見つけました。</p>
<p>その名も「Stache」。</p>
<p><a href="https://itunes.apple.com/jp/app/stache/id870659406?mt=12" target="_blank">Mac App Store &#8211; Stache</a></p>
<p>どんなアプリかというと、</p>
<p>webサイトのキャプチャを撮って保存して、</p>
<p>一覧で見る事が出来、検索も簡単にできてしまうというものです。</p>
<p>自分だけのwebデザインギャラリーを作れるということですね！！</p>
<p>便利ですね！</p>
<p>webデザイナーは常日頃、いいデザインに触れて、ストックしておかないといけないですから、</p>
<p>うってつけですね！</p>
<p>&nbsp;</p>
<p>説明では、</p>
<p>視覚的なブックマーク、コンテンツの検索、フルページのアーカイブをよりスマートにブックマークすることができるとな。</p>
<p>アプリサイトで紹介されている特長を載せます。</p>
<p><span style="font-size: medium;"><strong>•••簡単にビジュアルブックマーク•••</strong></span><br />
あらゆるページを美しいスクリーンショットで保存し、表示することができます。そして、ページをすばやく見分け、閲覧するのを手助けします。</p>
<p><span style="font-size: medium;"><strong>•••コンテンツの検索•••</strong></span><br />
サイト名またはページタイトルを思い出せない場合でも、ページを検索することが迅速かつ容易になります。</p>
<p><span style="font-size: medium;"><strong>••ページ全体のスクリーンショットとWebアーカイブ••••</strong></span><br />
ページコンテンツやデザインをアーカイブにブックマークするため、ページ全体のスクリーンショットとウェブアーカイブが保存されます。ページの変更やオフラインの場合でもコンテンツを保存するので、感動的なデザインを完璧に収集できます。</p>
<p><span style="font-size: medium;"><strong>•••素早くプレビュー•••</strong></span></p>
<p>ブックマークを選び、スペースキーを押すだけで、すぐにフルスクリーンショットを表示できるので、stacheを離れる事なく、ページを見ることができます。</p>
<p><span style="font-size: medium;"><strong>•••ブラウザ拡張•••</strong></span><br />
Stacheは、SafariとChromeでシングルクリックと同じくらい簡単にブックマークがすることができます。Stacheアイコンを押すかAlt + Sを押してください。他のブラウザではブックマークレットが利用可能です。</p>
<p><span style="font-size: medium;"><strong>•••  iCloud•••</strong></span><br />
すべてのブックマークがiCloudに保存され、バックアップされます。すべてのAppleデバイスでアクセス可能です。</p>
<p><span style="font-size: medium;"><strong>•••iPhoneやiPadで利用可能 •••</strong></span><br />
iOS用Stacheを取得すれば、どこからでもあなたのブックマークのライブラリーを閲覧することができます。</p>
<p><span style="font-size: medium;"><strong>••その他の機能••••</strong></span><br />
&#8211; インポート/エクスポートのHTMLブックマークファイル<br />
&#8211; エクスポートフルページのスクリーンショットやWebアーカイブ<br />
&#8211; タグ付け<br />
&#8211; URLスキームをサポート<br />
&#8211; URLの共有</p>
<p>&nbsp;</p>
<p>お粗末な翻訳ですいません・・・</p>
<p>こちらのアプリは700円です！</p>
<p>かなりいいアプリだと思います！</p>
<p>他にもこのようなアプリがありますので、ご紹介します。</p>
<p>&nbsp;</p>
<p><a href="https://itunes.apple.com/jp/app/ember-screenshot-annotate/id402456742?mt=12" target="_blank">Mac App Store &#8211; Ember &#8211; Screenshot, Annotate and Share</a></p>
<p>&nbsp;</p>
<p>こちらのアプリを使用していらっしゃる方のブログも紹介します。</p>
<p>&nbsp;</p>
<p><a href="http://design.kayac.com/topics/2014/04/ember.php">１０秒以内に、ここ１年で見てきたデザインが出せますか？「Ember」活用まとめ | KAYAC DESIGNER&#8217;S BLOG &#8211; デザインやマークアップの話</a></p>
<p>&nbsp;</p>


webデザイン収集にもってこいなアプリ「Stache」

<p>最近、よく目にするようになった「Git」。</p>
<p>最初は無視していたのですが、わかりやすい記事・大変便利だと記事を目にする度、</p>
<p>ちょっとやってみようかなと思っている今日この頃。</p>
<p>よくよく中身を見ていると、うちのような会社は導入すべきだろっっと思わされる程良く感じます。</p>
<p>まだ実践していないので、実際の導入記事は書く事はできませんが、わかりやすくGitについて説明してくれる記事を後で自分も読むためにも、そして弊社でも導入のきっかけとなる期待も込めて、紹介したいと思います。</p>
<p>&nbsp;</p>
<h2>もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選</h3>
<p><a href="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4856" alt="もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選  Find Job ! Startup" src="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-1024x541.jpg 1024w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-300x158.jpg 300w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534-228x120.jpg 228w, /uploads-archive/2014/05/cd6aa68486f333cff5dad10093f22534.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a></p>
<p>ここのスライドを読めばもう十分かもしれない・・・というぐらいのもので、</p>
<p>Gitというものがなんなのかをわかりやすく説明してくれるスライドが揃っています！</p>
<p>&nbsp;</p>
<p><a href="http://www.find-job.net/startup/7-git-slides">もっと早く知りたかった！ Gitが鬼のようにわかるスライド厳選7選 | Find Job ! Startup</a></p>
<p>&nbsp;</p>
<h2>Git初心者がクラスメイトに使い方を講義してみる</h3>
<p><a href="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4855" alt="Git初心者がクラスメイトに使い方を講義してみる - Qiita" src="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-1024x541.jpg 1024w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-300x158.jpg 300w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62-228x120.jpg 228w, /uploads-archive/2014/05/a0bff7f14bba8301c34352d485020c62.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a></p>
<p>基本的なことから、用語解説、そしてキャプチャつきで導入までの説明をしてくれています。(windows)</p>
<p>&nbsp;</p>
<p><a href="http://qiita.com/rytmrt/items/67fc52b8444207332ac3">Git初心者がクラスメイトに使い方を講義してみる &#8211; Qiita</a></p>
<p>&nbsp;</p>
<h2>本当は怖くない！デザイナーがGitを大好きになった♡５つの理由</h3>
<p><a href="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4859" alt="本当は怖くない！デザイナーがGitを大好きになった♡５つの理由  nanapi TechBlog" src="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-1024x541.jpg" width="400" height="211" srcset="/uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-1024x541.jpg 1024w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-300x158.jpg 300w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73-228x120.jpg 228w, /uploads-archive/2014/05/319334ba7104f111a8797be4d197fc73.jpg 1224w" sizes="(max-width: 400px) 100vw, 400px" /></a></p>
<p>nanapiさんのデザイナーさんの記事で、nanapiさんはアルバイトの方でも導入しているようで、</p>
<p>記事の内容としては、プログラマ向けというよりデザイナー向けに書かれた内容になっているので、</p>
<p>自分的にはなにが出来るのかというイメージが端的につきました。</p>
<p>&nbsp;</p>
<p><a href="http://nanapi.co.jp/blog/2014/04/23/git-love/">本当は怖くない！デザイナーがGitを大好きになった♡５つの理由 | nanapi TechBlog</a></p>
<p>&nbsp;</p>
<h2>SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった</h3>
<p><a href="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4857" alt="SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった  ごりゅご.com" src="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-1024x541.jpg" width="399" height="210" srcset="/uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-1024x541.jpg 1024w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-300x158.jpg 300w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac-228x120.jpg 228w, /uploads-archive/2014/05/0f8d1badb881c309a236a5f36b533aac.jpg 1224w" sizes="(max-width: 399px) 100vw, 399px" /></a></p>
<p>Gitをつかうためのアプリとして「SourseTree」というGUIで操作できるものがあるようなので、そちらの使い方も説明してくれています。</p>
<p>なにより、wordpressというよく案件でかかわることを題材にしているので、参考になりました。</p>
<p>&nbsp;</p>
<p><a href="http://goryugo.com/20140116/sourcetree_git/">SourceTreeでWordPressテーマを管理するようにしたらデザイン修正がすげー捗るようになった | ごりゅご.com</a></p>
<p>&nbsp;</p>
<h2>サルでもわかるGit入門</h3>
<p><a href="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-4858" alt="Gitを使ったバージョン管理【Gitの基本】  サルでもわかるGit入門 〜バージョン管理を使いこなそう〜  どこでもプロジェクト管理バックログ" src="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-1024x541.jpg" width="399" height="210" srcset="/uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-1024x541.jpg 1024w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-300x158.jpg 300w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb-228x120.jpg 228w, /uploads-archive/2014/05/267fdeb4bd213154b66701725cc110cb.jpg 1224w" sizes="(max-width: 399px) 100vw, 399px" /></a></p>
<p>こちらはもうそうとう有名だとは思いますが、一応ご紹介。</p>
<p>入門編、応用編、さらに逆引きで気になることが調べることができちゃいます。</p>
<p>説明はもちろん、「SourseTree」を元として、導入のチュートリアルもあり、メニュー化されているので、とてもわかりやすい記事、というかもうこれはサイトですね。</p>
<p>&nbsp;</p>
<p><a href="http://www.backlog.jp/git-guide/intro/intro1_1.html">Gitを使ったバージョン管理【Gitの基本】 | サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ</a></p>
<p>&nbsp;</p>
<h2>おわりに</h3>
<p>今まではプログラマーが使うものとイメージがあったのですが、</p>
<p>サイトの設計書、html・css・js、wordpressのテーマ等、自分が日々制作しているものにも関わりがあり、</p>
<p>なんといっても、「実はサイトマップ変わったよ」「最新どれだっけ？」「あ、そのファイル更新してました」「以前修正したものが戻っちゃった」ことが起こるので、そちらを軽減出来るのかなと思い、便利だと思いました。</p>
<p>htmlのやりとりでも、社内外問わず、「ここの部分変わりました！」と伝えることが多いので、いちいち打ち合わせしてたら大変だし、漏れが発生しちゃうので、差分を教えてくれるのはとてもありがたいですね！</p>
<p>複数人で取り組む場合はこれぜひ導入すべきですね！</p>
<p>&nbsp;</p>


Gitに挑戦してみたい！！と思ったら読んでみたい記事

<h2>Kuler</h3>
<p>言わずと知れたKulerですが、<br />
cs4からはデフォルトで入っているようです。<br />
配色のパターンを探すのにとても便利です！<br />
<img decoding="async" loading="lazy" class="alignnone  wp-image-4744" alt="スクリーンショット 2014-04-22 13.41.30" src="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png" width="641" height="508" srcset="/uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca.png 838w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-300x238.png 300w, /uploads-archive/2014/04/8d21f8784eb99264aece156e4d9cd8ca-228x180.png 228w" sizes="(max-width: 641px) 100vw, 641px" /></p>
<p>&nbsp;</p>
<p><a href="http://www.adobe.com/jp/products/kuler.html" target="_blank">デザイナー向け色見本を作成 | Adobe Kulerをダウンロード</a></p>
<p>&nbsp;</p>
<h2>Velositey</h3>
<p>こちらはなんと数クリックでwebサイトのワイヤーフレームができてしまうという代物です。<br />
テンプレートですので、完全に思った通りにはできないですが、<br />
近いものを作って後は自分で編集すれば良いかと思います。<br />
<img decoding="async" loading="lazy" class="alignnone  wp-image-4743" alt="スクリーンショット 2014-04-22 13.41.58" src="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png" width="640" height="536" srcset="/uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1.png 839w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-300x251.png 300w, /uploads-archive/2014/04/ce1c5372866d6d1d260638a4ee3276c1-228x191.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>&nbsp;</p>
<p>実際に作成してみました。<br />
ちょっとスペースの開け方は要調整ですね。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4741" alt="sd-proof-XXX-home-v0" src="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg" width="640" height="601" srcset="/uploads-archive/2014/04/sd-proof-XXX-home-v0-1024x963.jpg 1024w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-300x282.jpg 300w, /uploads-archive/2014/04/sd-proof-XXX-home-v0-228x214.jpg 228w, /uploads-archive/2014/04/sd-proof-XXX-home-v0.jpg 1700w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p><a href="http://dandkagency.com/velositey/" target="_blank">Velositey &#8211; Website Layout Builder for Photoshop</a></p>
<p>&nbsp;</p>
<h2>Distribute Layer Spacing Horizontal</h3>
<p>こちらは、水平方向にならんだオブジェクトを等間隔で並べてくれるプラグインです！<br />
幅が違うオブジェクトを目測で並べたりする時もあり、その際にいいかもしれません。</p>
<p>&nbsp;</p>
<p>before<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4745" alt="スクリーンショット 2014-04-22 13.49.20" src="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png" width="502" height="133" srcset="/uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0.png 502w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-300x79.png 300w, /uploads-archive/2014/04/8fae42eeed6e85926b9102f89df9caa0-228x60.png 228w" sizes="(max-width: 502px) 100vw, 502px" /></p>
<p>after<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p>端のオブジェクトを元に等間隔で並べてるようですね。</p>
<p>&nbsp;</p>
<p><a href="http://morris-photographics.com/photoshop/scripts/distribute-horizontally.html" target="_blank">Adobe Photoshop Scripts | Trevor Morris Photographics</a></p>
<p>&nbsp;</p>
<h2>Transform Each 2.0</h3>
<p>こちらは複数のオブジェクトを個々で変更するように、変形できるプラグイン(スクリプト)です。<br />
例えば、３つ並んでいる同じオブジェクトをちょっと小さくしたいなって思う時、一気に変更できたらいいのになぁ<br />
と思うことありませんか？<br />
全部選択して変形しようとすると、おかしくなっちゃうので、これは地味に便利かと思います。</p>
<p>例えば下の画像を全部70％に縮小したい場合、<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4748" alt="スクリーンショット 2014-04-22 13.49.41" src="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png" width="500" height="137" srcset="/uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b.png 500w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-300x82.png 300w, /uploads-archive/2014/04/6992532f833301882c734c7d8ffabf8b-228x62.png 228w" sizes="(max-width: 500px) 100vw, 500px" /></p>
<p>レイヤーを全部選択して、このプラグインを発動させると・・・<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-4747" alt="スクリーンショット 2014-04-22 13.50.51" src="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png" width="498" height="119" srcset="/uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b.png 498w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-300x71.png 300w, /uploads-archive/2014/04/31de2af3ffe234cd6ceee2efd255a21b-228x54.png 228w" sizes="(max-width: 498px) 100vw, 498px" /></p>
<p>一気に変形することができます！<br />
素晴らしい！！</p>
<p><a href="http://blog.kam88.com/en/transform-each-20.html" target="_blank">Captain Awesome &#8211; English &#8211; Transform Each 2.0</a></p>
<p>&nbsp;</p>
<h2>Tych Panel</h3>
<p>こちらは複数の写真を設定した内容のもと、自動的に並べてくれるプラグインです。<br />
メインビジュアルや、グリッド状で写真を並べたい時にいいかもしれません。</p>
<p>設定は、写真と写真のスペース、ボーダーの設定、場所等いろいろできます。</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4746" alt="スクリーンショット 2014-04-22 13.59.11" src="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png" width="640" height="521" srcset="/uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971.png 836w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-300x244.png 300w, /uploads-archive/2014/04/c6050b48d9ac4b1b92306248a5496971-228x185.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>試しにデフォルトのTopでやってみました。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone  wp-image-4742" alt="スクリーンショット 2014-04-22 14.03.30" src="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png" width="640" height="403" srcset="/uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460.png 794w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-300x188.png 300w, /uploads-archive/2014/04/2d312e911c84dab8c2601e6a11d14460-228x143.png 228w" sizes="(max-width: 640px) 100vw, 640px" /></p>
<p>これは設定さえすれば、だいぶ手間が省けそうですね！</p>
<p>&nbsp;</p>
<p><a href="http://coliss.com/articles/build-websites/operation/design/photoshop-extension-tychpanel.html" target="_blank">複数の画像のレイアウトを自動化できるPhotoshopのエクステンション -Tych Panel | コリス</a></p>


とっても便利なphotshopのプラグイン5選

<p>本日は、htmlやcssはたまたjavascriptのソースを綺麗にしてくれるwebサービスを紹介します！<br />
もちろんお金等はかかりません。</p>
<p>綺麗に書くように意識しつつも、<br />
忙しい時期や、修正が繰り返し発生したりすると、<br />
ソースを綺麗にする意識はどこかにいってしまいがちですよね・・・(自分だけでしょうか？)</p>
<p>そんな時に、ソースを書き終わったら、<br />
このツールを使えば、ソースがあっという間にキレイになります。</p>
<p>&nbsp;</p>
<h2>PrpCSSor</h3>
<p><a href="http://procssor.com/process" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4547" alt="ProCSSor - Advanced CSS Prettifier" src="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg" width="505" height="341" srcset="/uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-1024x693.jpg 1024w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-300x203.jpg 300w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier-228x154.jpg 228w, /uploads-archive/2014/03/ProCSSor-Advanced-CSS-Prettifier.jpg 1117w" sizes="(max-width: 505px) 100vw, 505px" /></a><br />
こちらはcss専用で、オプションが豊富です。</p>
<p>・インデントの設定（1から4の半角スペース）<br />
・括弧の位置の指定<br />
・複数セレクタ指定の際、改行or一行の選択<br />
・親子関係の際にインデントの指定</p>
<p><a href="http://procssor.com/process" class="link" target="_blank">PrpCSSor</a></p>
<h2>DIRTYMARKUP</h3>
<p><a href="http://www.dirtymarkup.com/" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4545" alt="Dirty Markup · Tidy and Beautify your HTML, CSS, and JavaScript code" src="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg" width="506" height="337" srcset="/uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-1024x684.jpg 1024w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-300x200.jpg 300w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b-228x152.jpg 228w, /uploads-archive/2014/03/8ab85d8aa71b263d17bcea3157f6414b.jpg 1132w" sizes="(max-width: 506px) 100vw, 506px" /></a><br />
こちらは、html,css,javascriptも整形出来ます。<br />
デバック機能もあるようです。</p>
<p>・インデントの設定（1から4の半角スペース、タブ）</p>
<p><a href="http://www.dirtymarkup.com/" class="link" target="_blank">DIRTYMARKUP</a></p>
<h2>ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</h3>
<p><a href="http://u670.com/pikamap/htmlseikei.php" target="_blank"><img decoding="async" loading="lazy" class="alignnone  wp-image-4546" alt="ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）" src="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg" width="503" height="340" srcset="/uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-1024x693.jpg 1024w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-300x203.jpg 300w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35-228x154.jpg 228w, /uploads-archive/2014/03/a662cf4bc5d3b23a74685b9a8aed0a35.jpg 1117w" sizes="(max-width: 503px) 100vw, 503px" /></a><br />
こちらはHTMLのみになりますがシンプルなので、<br />
単純に整形したい場合は、こちらでやるのがいいかと思います。</p>
<p>・インデントの設定（1,2,4の半角スペースかタブ）<br />
名前の通りデバッグ機能もあるようです。</p>
<p><a href="http://u670.com/pikamap/htmlseikei.php" class="link" target="_blank">ＨＴＭＬ整形ツール（プチ・デバッグ機能付き）</a></p>
<p>個人的にはソースは汚すぎなければいいという考えですが、<br />
googleさんでhtmlが「こう書いたほうがいいよ」というレギュレーションがあるみたいなので、<br />
それに沿ってみようかなと思う今日この頃です。</p>
<p>それはコチラ</p>
<p><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml" target="_blank">Google HTML/CSS Style Guide</a></p>
<p>これを翻訳したのがコチラ、<br />
<a href="http://re-dzine.net/2012/05/google-htmlcss-style-guide/" target="_blank">「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN</a></p>
<p>中には、cssをアルファベット順に書くという面倒くさそうなものもあります・・・</p>
<p>googleが提唱しているのであれば、<br />
それにのっとるのがベストなのかもしれませんね・・・</p>


HTMLやCSSをキレイに整形してくれるオンラインツールご紹介

<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>今更ながらですが、google fontsについての記事を書くことにしました。</p>
<p>1,2年前ぐらいwebフォントが出現し、モリサワ等の会社もwebフォントを提供していますが、<br />
webフォントを実際のサイトで使用したことはまだありません。</p>
<p>その理由としては有料ということもあると思いますが、そこまでフォントに対してこだわるお客さんがいないといった所でしょうか。。webフォントを読み込むのに時間がかかってユーザビリティが悪いといった懸念もあるように思います。</p>
<p>google fontsは無料かつ商用可で、特に登録もなく利用できるのですが、<br />
こちらは英語しかないためまだ使用に至っていません。</p>
<p>結局の所、今後もしばらくはwebフォントを使う予定はないかもしれません笑</p>
<p>とはいえ、使い方を学んでおくにこしたことはないので、<br />
軽くでは試してみたので、そちらとその流れを紹介したいと思います。</p>
<p><a class="demo" href="/demo/abe/36/" target="_blank">DEMO</a></p>
<h2>Google Fontsを使ってみた</h3>
<p>まずは、<a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>で使いたいフォントを選びます。</p>
<p>&nbsp;</p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3728" alt="Google Fonts" src="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></p>
<p>&nbsp;</p>
<p>今は全部629種類のフォントがあるようですね。<br />
基本的にはこの画面から、<br />
フォントのカテゴリー（Serif,Sans Serif,Display,Handwriting）やThickness,Slant,Widthを設定して検索できます。</p>
<p>フォントの右下の⇒みたいなマークを押すと、</p>
<p>詳細画面に遷移します。</p>
<h2>webフォントのスクリプトタグをゲット！</h3>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/12/Google-Fonts2.jpg"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3727" alt="Google Fonts2" src="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg" width="630" height="364" srcset="/uploads-archive/2013/12/Google-Fonts2-1024x592.jpg 1024w, /uploads-archive/2013/12/Google-Fonts2-300x173.jpg 300w, /uploads-archive/2013/12/Google-Fonts2-228x131.jpg 228w, /uploads-archive/2013/12/Google-Fonts2.jpg 1206w" sizes="(max-width: 630px) 100vw, 630px" /></a></p>
<p>右側のストップウォッチみたいものはそのフォントを読み込むのかかる時間を表しているようです。</p>
<p>このページの下に、以下のようなwebフォントを読み込むスクリプトタグがあります。</p>
<p>&nbsp;</p>

		<div id="crayon-64953fd594c5c654787806" 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 href='http://fonts.googleapis.com/css?family=Wellfleet' rel='stylesheet' type='text/css'&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-64953fd594c5c654787806-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-64953fd594c5c654787806-1"><span class="crayon-r ">&lt;link </span><span class="crayon-e ">href</span>=<span class="crayon-s ">'http://fonts.googleapis.com/css?family=Wellfleet'</span><span class="crayon-h"> </span><span class="crayon-e ">rel</span>=<span class="crayon-s ">'stylesheet'</span><span class="crayon-h"> </span><span class="crayon-e ">type</span>=<span class="crayon-s ">'text/css'</span><span class="crayon-r ">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p>&nbsp;</p>
<p>もうこれでOKです！</p>
<p>&nbsp;</p>
<p>あとはcssで、</p>
<p></p>

		<div id="crayon-64953fd594c60148252762" 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;">
font-family: 'Wellfleet', cursive;</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-64953fd594c60148252762-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-64953fd594c60148252762-1"><span class="crayon-e ">font-family</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-s">'Wellfleet'</span><span class="crayon-i ">,</span><span class="crayon-h"> </span><span class="crayon-i ">cursive</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>としてすればOKです！</p>
<p>非常に簡単ですね！</p>
<p>&nbsp;</p>
<h2>Google Fontsを選ぶのに便利なサイト</h3>
<p>以下のサイトでは、実際にgoogle fontsを試せて、ダウンロードまでできるサイトです。<br />
フォントの数が多いのでこちらで試しながらフォントを決めるのがオススメです！</p>
<p><a href="http://typecast.com/preview/google" class="link" target="_blank">Typecast &#8211; Public Demo | Design in the browser with web fonts and real content</a></p>
<p>また、googlefontsとは関係ないのですが、<br />
フォント選びということで、便利なサイトを紹介します。</p>
<p>好きな文字/単語を、<br />
自分のパソコンに入っているフォントで一覧で表示してくれるサイトです。<br />
一つ一つPhotoshopで試すのはちょっと面倒ですよね！<br />
意外と役に経ちます。</p>
<p><a href="http://wordmark.it/" class="link" target="_blank">wordmark.it &#8211; helps you choose fonts!</a></p>
<p>&nbsp;<br />
&nbsp;<br />
&nbsp;</p>
<p>google fontsで日本語出してくれないかな〜</p>

Google Fontsを使ってみた＆フォント選びに便利なツール

<p>最近コーディングをする時はすっかりSublimetextを使用するようになりました。</p>
<p>軽さ、機能、プラグインが良くて多用している日々でございます。</p>
<p>Sublimetextの魅力は、いろいろあるのですが、ここでは割愛させていただきます。<br />
代わりに記事を紹介しますので、そちらをご覧下さい。</p>
<p><a href="/programmer/%e6%96%b0%e3%81%97%e3%81%84%e5%b9%b4%e3%81%ab%e3%80%81%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%a8%e3%83%87%e3%82%a3%e3%82%bf%e3%82%92sublime%e3%81%ab%e5%a4%89%e3%81%88%e3%81%9f.html">新しい年に、テキストエディタをsublimeに変えた | スターフィールド株式会社</a></p>
<p><a href="http://liginc.co.jp/designer/archives/6774">”恋に落ちるエディタ”「Sublime Text」 完全入門ガイド！ | 株式会社LIG</a></p>
<p><a href="http://dotinstall.com/lessons/basic_sublimetext">Sublime Text 2入門 (全14回) &#8211; プログラミングならドットインストール</a></p>
<h2>オススメのプラグイン</h3>
<p>僕が今回オススメしたいのが「Hayaku」というプラグインです！<br />
こちらはその名の通り、cssを早く書けちゃうという代物でございます！</p>
<p><a href="https://github.com/hayaku/hayaku">hayaku/hayaku · GitHub</a></p>
<p>sublimetextを使っている人であれば、プラグインの「emmet」を入れて使用していると思います。<br />
emmetでもcssを簡略化して書けるじゃないか、とお思いの方もいると思いますが、<br />
emmetでは、簡略化の型が決まっているので、その型を覚えないといけないですよね・・・<br />
それってやっぱり面倒な人には面倒なことだと思います。</p>
<p>その型を覚える必要がないのが「Hayaku」なんです！</p>
<p>どういうことかと言いますと、<br />
cssを書く際に、適当に</p>
<p></p>

		<div id="crayon-64953fd593651318683169" 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;">
/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/
width: 100%;
/* w960 */
width: 960px;</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-64953fd593651318683169-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-2">2</div><div class="crayon-num" data-line="crayon-64953fd593651318683169-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593651318683169-4">4</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-64953fd593651318683169-1"><span class="crayon-c">/* w,wd,wid,widt いずれかの打ち方でも以下のスタイルに変換されます(Tabキーで変換です)！*/</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-2"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">100%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593651318683169-3"><span class="crayon-c">/* w960 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593651318683169-4"><span class="crayon-e ">width</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">960px</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>これすごくないですか？？笑</p>
<p>それっぽかったらある程度、思い通りに変換してくれちゃうんですよ！</p>
<p>だから型なんかを覚えることなく、頭に思い浮かべたスタイルの頭文字を適当に並べるだけでOKぐらいのレベルで、<br />
cssが書けちゃうわけです。</p>
<p>一部ですが以下のような形です。</p>
<p></p>

		<div id="crayon-64953fd593655829431568" 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;">
	/* pl20 */
	padding-left: 20px;
	/* mb30 */
	margin-bottom: 30px;
	/* bgc */
	background-color: #FFF;
	/* pa */
	position: absolute;
	/* dn,dpn */
	display: none;
	/* fs14 */
	font-size: 14px;
	/* lh180% */
	line-height: 180%;
	/* bl1s */
	border-left: 1px solid;</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-64953fd593655829431568-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-2">2</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-4">4</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-6">6</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-8">8</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-10">10</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-12">12</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-14">14</div><div class="crayon-num" data-line="crayon-64953fd593655829431568-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-64953fd593655829431568-16">16</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-64953fd593655829431568-1"><span class="crayon-h">	</span><span class="crayon-c">/* pl20 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-2"><span class="crayon-h">	</span><span class="crayon-e ">padding-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">20px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-3"><span class="crayon-h">	</span><span class="crayon-c">/* mb30 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-4"><span class="crayon-h">	</span><span class="crayon-e ">margin-bottom</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">30px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-5"><span class="crayon-h">	</span><span class="crayon-c">/* bgc */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-6"><span class="crayon-h">	</span><span class="crayon-e ">background-color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">#FFF</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-7"><span class="crayon-h">	</span><span class="crayon-c">/* pa */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-8"><span class="crayon-h">	</span><span class="crayon-e ">position</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">absolute</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-9"><span class="crayon-h">	</span><span class="crayon-c">/* dn,dpn */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-10"><span class="crayon-h">	</span><span class="crayon-e ">display</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">none</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-11"><span class="crayon-h">	</span><span class="crayon-c">/* fs14 */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-12"><span class="crayon-h">	</span><span class="crayon-e ">font-size</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">14px</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-13"><span class="crayon-h">	</span><span class="crayon-c">/* lh180% */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-14"><span class="crayon-h">	</span><span class="crayon-e ">line-height</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">180%</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-64953fd593655829431568-15"><span class="crayon-h">	</span><span class="crayon-c">/* bl1s */</span></div><div class="crayon-line crayon-striped-line" id="crayon-64953fd593655829431568-16"><span class="crayon-h">	</span><span class="crayon-e ">border-left</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">1px</span><span class="crayon-h"> </span><span class="crayon-i ">solid</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>

<p> </p>
<p>感覚で書いてる感じになりますねこれは。</p>
<p>ホントおすすめです！！</p>
<p>sublimetext、emmet共々、使いこなせば、コーディングがグッと早くなるかも！？<br />
いや、少しぐらいは早くなると思います。</p>
<h2>プラグインのインストール</h3>
<p>プラグインの入れ方は、通常のプラグインと同様、<br />
「command + shift + p」でinstall packageを開き、「hayaku」と記入すれば出てくるので、<br />
選択してインストール完了です。</p>
<p>ぜひぜひ活用してよいコーディングライフをお送りください！笑</p>

Sublimetext2 のプラグイン「Hayaku」が便利すぎてびっくりしました

<p>こんなものがあるなんて今まで知りませんでした・・・</p>
<p>なぜ知らなかったのでしょう。勉強不足ですね。。。</p>
<p>&nbsp;</p>
<p>今日紹介するのは、photoshopの「CSS3Ps」というエクステンションです。</p>
<p>&nbsp;</p>
<p>シェイプレイヤーやテキストレイヤーのをcssで書き出しくれるという代物です。</p>
<p>もちろん名前の通りcss3対応です。</p>
<p>&nbsp;</p>
<p>どんな風に書きだされるのかが気になる所かと思いますが、</p>
<p>順をおって説明していきます。</p>
<p>&nbsp;</p>
<h2>まずはダウンロード</h3>
<p>&nbsp;<br />
まずは下記URLからダウンロードします。</p>
<p><a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a></p>
<p>右上の「free download」をクリックです！<br />
&nbsp;</p>
<h2>ダウンロードしたファイルを開く</h3>
<p>ダウンロードしたファイルを開くと勝手にphotoshopへインストールしてくれます。</p>
<p>以下のような画面が立ち上がると思います。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-full wp-image-3568" alt="スクリーンショット 2013-11-12 13.47.09" src="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png" width="550" height="408" srcset="/uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5.png 825w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-300x222.png 300w, /uploads-archive/2013/11/93dc3066d35b9c3171a9d6eedaa5d1d5-228x169.png 228w" sizes="(max-width: 550px) 100vw, 550px" /></p>
<p>&nbsp;</p>
<h2>photoshopを開いて、エクステンションを表示</h3>
<p>&nbsp;<br />
もし今まで開いていたのであれば、<br />
１回終了してからまた開いてください。</p>
<p>そうすると、ウィンドウ &gt; エクステンションの所にcss3Psと表示されるのでクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3569" alt="スクリーンショット 2013-11-12 14.20.17（2）" src="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png" width="607" height="119" srcset="/uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-1024x201.png 1024w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-300x59.png 300w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2-228x44.png 228w, /uploads-archive/2013/11/b93c7373d0ba4c103252450e5d7d55f2.png 1220w" sizes="(max-width: 607px) 100vw, 607px" /></p>
<p>&nbsp;</p>
<h2>シェイプ選んでクリック</h3>
<p>シェイプレイヤーを選択状態にし、下の画面のCSS3Psの箇所をクリックします。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3570" alt="スクリーンショット 2013-11-12 14.00.57" src="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png" width="600" height="375" srcset="/uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-1024x641.png 1024w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-300x188.png 300w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953-228x142.png 228w, /uploads-archive/2013/11/9520b27b5058b0b976ecfec9cc317953.png 1241w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>&nbsp;</p>
<h2>cssの書きだしが完了！</h3>
<p>新規ブラウザウィンドウが立ち上がり、数秒待つと、<br />
cssが表示されます。<br />
そちらをコピーして後は自由に使用すると言った感じですね。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3571" alt="スクリーンショット 2013-11-12 14.04.49" src="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png" width="601" height="334" srcset="/uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-1024x569.png 1024w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-300x166.png 300w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99-228x126.png 228w, /uploads-archive/2013/11/9571ea2391a4939314df01247606dc99.png 1191w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3572" alt="ページの画像" src="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg" width="601" height="335" srcset="/uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-1024x571.jpg 1024w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-300x167.jpg 300w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac-228x127.jpg 228w, /uploads-archive/2013/11/ef53f8098831daf49546c5fe9056c1ac.jpg 1201w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<h2>複数も可能</h3>
<p>複数のレイヤーを選択して書き出すことも可能です。</p>
<p>以下のような形で書きだすと、<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3573" alt="スクリーンショット 2013-11-12 14.05.10" src="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png" width="601" height="375" srcset="/uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-1024x639.png 1024w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-300x187.png 300w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3-228x142.png 228w, /uploads-archive/2013/11/63436627b8e7740850eb461d21141ea3.png 1244w" sizes="(max-width: 601px) 100vw, 601px" /></p>
<p>&nbsp;</p>
<p>以下の様に表示されます。<br />
&nbsp;<br />
<img decoding="async" loading="lazy" class="alignnone size-large wp-image-3574" alt="ページの画像2" src="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg" width="527" height="764" srcset="/uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-706x1024.jpg 706w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-206x300.jpg 206w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428-228x330.jpg 228w, /uploads-archive/2013/11/7ecc9d9f4ed4cf790d01e7bb44209428.jpg 1186w" sizes="(max-width: 527px) 100vw, 527px" /></p>
<p>レイヤー重ねていても、それぞれのレイヤーを個々に書き出してくれます。</p>
<p>どこまでcssで書き出しくれるかもサイトに載っておりますので、</p>
<p>ぜひ使ってみて下さい！</p>
<p>&nbsp;<br />
<a href="http://css3ps.com/" target="_blank">http://css3ps.com/</a><br />
&nbsp;</p>


知らなかった！photoshopでcssを書き出してくれる無料のエクステンション「CSS3Ps」

<p>文章はほとんどのHPにあると思いますが、</p>
<p>その文章でちょっと悩ませるのが折り返しについてです。</p>
<p>&nbsp;</p>
<p>紙とは違い完全に思い通りにはならないものなのですが、</p>
<p>cssでいろいろな設定をすることができます。</p>
<p>&nbsp;</p>
<p>その主要なものが以下になります。</p>
<h3>word-wrap</h4>
<p><strong>normal</strong><br />
単語の途中で改行はせず、必要に応じて表示範囲を拡大。<br />
<strong>break-word</strong><br />
必要に応じて単語の途中で改行</p>
<h3>word-break</h4>
<p><strong>normal</strong><br />
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。<br />
<strong>break-all</strong><br />
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。<br />
<strong>keep-all</strong><br />
言語に関係なく単語の途中では改行せず、単語で改行。</p>
<h3>white-space</h4>
<p><strong>normal</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。<br />
<strong>pre</strong><br />
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。<br />
<strong>nowrap</strong><br />
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。</p>
<p>&nbsp;</p>
<p>となっておりますが、</p>
<p>言葉で説明されてもあまりピンとこないと思いますので、</p>
<p>英語と日本語で実際にhtmlで作成してみましたので、</p>
<p>ご覧ください。<br />
<a class="demo" href="/demo/abe/35/" target="_blank">DEMO</a></p>
<p>あまり変わらないような感じがしますね・・・</p>
<p>word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、</p>
<p>おそらくhtmlの状況によって変わってくるのだと思います。</p>
<p>簡単な参考にしてください。</p>
<p>&nbsp;</p>
<p>ちなみに、DEMOに入ってるテキストは、</p>
<p>以下のサイトで生成されたものを使用しています。</p>
<p>テキスト何入れようかと迷った時はいいですね！</p>
<p>日本語<br />
<a href="http://www.blindtextgenerator.com/lorem-ipsum" target="_blank">http://www.blindtextgenerator.com/lorem-ipsum</a></p>
<p>英語<br />
<a href="http://lipsum.sugutsukaeru.jp/index.cgi" target="_blank">http://lipsum.sugutsukaeru.jp/index.cgi</a></p>


cssで制御する折り返しのまとめ

<p>フラットデザインが流行っているのと共に、</p>
<p>ロングシャドウもじわじわと流行りつつあるようです。（もしかしたらもう流行ってる？？）</p>
<p>&nbsp;</p>
<p>ロングシャドウってなに？？っていう人は、</p>
<p>以下のサイトをご覧ください。</p>
<p>&nbsp;</p>
<p><a href="http://www.webdesignerdepot.com/2013/07/flat-design-casts-a-long-shadow/">Flat design casts a long shadow | Webdesigner Depot</a></p>
<p>&nbsp;</p>
<p>要はやたら長いドロップシャドウみたいな感じですね。</p>
<p>フラットデザインと相まっていい感じですね！！</p>
<p>&nbsp;</p>
<p>そんなドロップシャドウを簡単に作れる無料PSDがあります！</p>
<p>斜め45度限定になりますが、十分でしょう！</p>
<p>&nbsp;</p>
<p>以下からダウンロードして下さい！</p>
<p>&nbsp;</p>
<p><a href="http://graphicburger.com/long-shadow-generator/">Long Shadow Generator | GraphicBurger</a></p>
<p>&nbsp;</p>
<p>実際にPSDを開いてみると、</p>
<p>レイヤーがこんな感じになっているので、</p>
<p><a href="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3491" alt="スクリーンショット 2013-10-28 21.43.04" src="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png" width="342" height="327" srcset="/uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db.png 342w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-300x286.png 300w, /uploads-archive/2013/10/1b2ed9122fec6408646c5689415e10db-228x218.png 228w" sizes="(max-width: 342px) 100vw, 342px" /></a></p>
<p>Your design hereに合わせて、右クリックで、</p>
<p>「コンテンツを置き換え」をするとそのコンテンツに合わせてシャドウが生成されます。</p>
<p>テキスト、アイコンなんでもOKっぽいです。</p>
<p>&nbsp;</p>
<p>上のメインビジュアルが実際に作ってみたものになります。</p>
<p>&nbsp;</p>
<p>これはPSDですが、</p>
<p>htmlを生成してくれるサイトもあり、css3を使って表現しているようです。</p>
<p>以下のサイトになります。</p>
<p>&nbsp;</p>
<p><a href="http://sandbox.juan-i.com/longshadows/">Long Shadows Generator &#8211; by Juani</a></p>
<p>&nbsp;</p>
<p>実に簡単にできますね！！</p>
<p>これでロングシャドウは怖くないぞ！！</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>おまけ：</p>
<p>iOS７のカラーコードを一覧にしているサイトがあります。</p>
<p>カラーの参考にぜひどうぞ！</p>
<p>&nbsp;</p>
<p><a href="http://ios7colors.com/">iOS 7 colors</a></p>
<p>&nbsp;</p>


流行りつつあるロングシャドウを作れる無料PSD

<p>今回ご紹介するのは、「Flatic UserInterface Kit」というフラットなデザインのUIキット素材です。</p>
<p>フリーでゲットできる上に、100以上のエレメントが揃っています！</p>
<p>デザインで使うのも良さそうですが、<br />
これはワイヤーフレームで使えそうですね！</p>
<p>&nbsp;</p>
<p><a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3460" alt="Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02" src="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02.jpg" width="599" height="364" srcset="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02.jpg 599w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02-300x182.jpg 300w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_02-228x138.jpg 228w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>&nbsp;</p>
<p><a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-3461" alt="Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01" src="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01.jpg" width="600" height="364" srcset="/uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01.jpg 600w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01-300x182.jpg 300w, /uploads-archive/2013/10/Flatic_UserInterface_Kit_M-elgendyFlatic_UserInterface_Kit_M-elgendy_01-228x138.jpg 228w" sizes="(max-width: 600px) 100vw, 600px" /></a></p>
<p>&nbsp;</p>
<p><a href="http://m.elgendy.me/downloads/flatic-userinterface-kit/#.UmYpoCQYRVS">Flatic UserInterface Kit &#8211; M-Elgendy</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><strong>おまけ</strong></p>
<p>バーガーが画面一杯に表示され、マウスオーバーで増殖していき、<br />
クリックで「ガブッ」という音とともに元通り。<br />
なんかおもしろいです(笑)</p>
<p><a href="http://www.theageofmammals.com/burgers/" target="_blank">Burgers, Guthrie Lonergan</a></p>


フラットなデザインのUIキットPSDフリー素材「Flatic UserInterface Kit」

<p>本日は、HTMLやcssの初級者がレベルアップするために薦めたい本をご紹介します。</p>
<p>僕自身がお世話になった本で、良かったなぁと思う本です。</p>
<p>今から紹介するのは、初心者向けではなく、初級者向けになりますので、<br />
ある程度かじっていないと本の内容がわからないと思います。</p>
<p>どのぐらいの初級者かっていうと、タグの勉強はひと通りしていて、<br />
HTMLもいじったことがあるけど、<br />
サイト自体のコーディングはあんまり経験がない人って感じです。<br />
ある程度経験しているけど、我流って人にも、今一度見直しもらうためにも良いかもしれません。</p>
<p>今となってはもしかしたら少々古いかもしれませんが、<br />
コーディングの基礎となる所なので、学ぶとそれなりにいいコーディングができると思います。</p>
<p>そのおかげか僕自身も動きをつけない場合のHTMLでは、ie対応で困ることはそこまで多くありません。</p>
<p>&nbsp;</p>
<p>長くなりましたが、本をご紹介します。</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4883376710&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></p>
<p>こちらは、北海道では有名なコーディング屋さんのようで、丁寧に説明してくれています。<br />
一からサイト全体を作リ方を教えてくれます。<br />
コーディング会社ならではノウハウや、制作資料なんかもゲットできます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4839929734&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></p>
<p>こちらも基本的な所から、バグについても解説してくれています。<br />
現場ならではの知識・経験が詰まっており、実際にやってみないとわからないことを教えてくれます。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><iframe loading="lazy" width="320" height="240" style="width: 120px; height: 240px;" src="http://rcm-fe.amazon-adsystem.com/e/cm?t=alantrigger-22&amp;o=9&amp;p=8&amp;l=as1&amp;asins=4048705172&amp;ref=qf_sp_asin_til&amp;fc1=000000&amp;IS2=1&amp;lt1=_blank&amp;m=amazon&amp;lc1=0000FF&amp;bc1=FFFFFF&amp;bg1=FFFFFF&amp;f=ifr" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"></iframe></p>
<p>こちらは、上記2つとは違うのですが、<br />
HTML5の本で、新しく増えたタグ・機能の使い方を、サンプルを元に解説してくれます。<br />
コードも載っているので、勉強になります。</p>
<p>&nbsp;</p>
<p>以上になります。</p>
<p>&nbsp;</p>
<p>上の2つだけで、けっこう出来るようになるのではないかなと思いますが、<br />
新しいやり方、もっと効率的なやり方は日々生まれているような気がします。</p>
<p>&nbsp;</p>
<p>もっと上達したい人は、本はもちろんいいのですが、<br />
有名なサイトのコードを見てみて試してみるというやりかたが一番いい気がします。</p>


コーディング初級者がレベルアップするためにオススメな本

<p>webアプリケーション、webの管理画面で、</p>
<p>そのままでも、少し加工して、デザインの参考に、</p>
<p>使えそうなデザインテンプレートがありましたので、紹介します。</p>
<p>&nbsp;</p>
<p>いずれもフリーで手に入れられます。<br />
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank">BlueWhale Admin</a><br />
<a href="http://www.egrappler.com/free-premium-html-adminbackend-template-for-web-applications-bluewhale-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3173" alt="Dashboard  BlueWhale Admin" src="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg" width="615" height="622" srcset="/uploads-archive/2013/09/Dashboard-BlueWhale-Admin-1011x1024.jpg 1011w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-296x300.jpg 296w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-228x230.jpg 228w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin-120x120.jpg 120w, /uploads-archive/2013/09/Dashboard-BlueWhale-Admin.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a><br />
960 Grid CSSをベースに作っているようです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank">Twitter Bootstrap Admin Template</a><br />
<a href="http://www.egrappler.com/templatevamp-free-twitter-bootstrap-admin-template/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3174" alt="Dashboard - Bootstrap Admin Template" src="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg" width="615" height="900" srcset="/uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-699x1024.jpg 699w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-205x300.jpg 205w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template-228x333.jpg 228w, /uploads-archive/2013/09/Dashboard-Bootstrap-Admin-Template.jpg 1333w" sizes="(max-width: 615px) 100vw, 615px" /></a><br />
こちらはTwitter Bootstrapをベースに作っているようです。こちらはシンプルでいいデザインですね！</p>
<p>&nbsp;<br />
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank">Free Web Backend Admin Template PSD: App Admin</a><br />
<a href="http://www.egrappler.com/free-web-backend-admin-template-psd-app-admin/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-large wp-image-3175" alt="Dashboard" src="/uploads-archive/2013/09/Dashboard-1024x743.jpg" width="615" height="446" srcset="/uploads-archive/2013/09/Dashboard-1024x743.jpg 1024w, /uploads-archive/2013/09/Dashboard-300x217.jpg 300w, /uploads-archive/2013/09/Dashboard-228x165.jpg 228w, /uploads-archive/2013/09/Dashboard.jpg 1100w" sizes="(max-width: 615px) 100vw, 615px" /></a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>おまけ</h3>
<p><a href="https://www.clipular.com/welcome" target="_blank">clipular</a>というchromeの拡張機能が良いらしいと聞きました。<br />
webサイトのキャプチャを撮れるものなんですが、それだけで終わらず、クラウドに自分で撮ったキャプチャのギャラリーを作れるというなんとも素晴らしい内容。（作れるというか自動的に一覧に表示できるようになってるという感じです。）</p>
<p>キャプチャして、ローカルに保存してる人なんかにはとてもいい拡張機能だと思います！！</p>


管理画面のデザインテンプレートをフリーでダウンロード!

<p>日々、お優しいブロガーの方々がフリーで素材を提供してくれています。</p>
<p>&nbsp;</p>
<p>その中でも、コレも無料でもらえちゃうんだ！という驚きのものもあります。</p>
<p>実際に使用するのもよし、素材を見てデザイン力を学ぶのもよし、ダウンロード必須の素材です。</p>
<p>&nbsp;</p>
<h3><a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank">45 PSD UI Kits | Splashnology.com</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://www.splashnology.com/article/45-psd-ui-kits/8238/" target="_blank"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2913" alt="psdsozai1" src="/uploads-archive/2013/08/psdsozai1.jpg" width="599" height="349" srcset="/uploads-archive/2013/08/psdsozai1.jpg 600w, /uploads-archive/2013/08/psdsozai1-300x175.jpg 300w, /uploads-archive/2013/08/psdsozai1-228x133.jpg 228w" sizes="(max-width: 599px) 100vw, 599px" /></a></p>
<p>&nbsp;</p>
<p>いろんなテーマで、UI,パーツが揃っています。</p>
<p>パーツが一つのテーマでいくつかあるので、統一したデザインが出来そうです。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank">Free PSD Files: 65 Useful UI Design PSD Files for Download | Freebies | Graphic Design Junction</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://graphicdesignjunction.com/2013/02/free-psd-files-65-useful-ui-design-psd-files-for-download/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2914 aligncenter" alt="psdsozai2" src="/uploads-archive/2013/08/psdsozai2.jpg" width="400" height="300" srcset="/uploads-archive/2013/08/psdsozai2.jpg 400w, /uploads-archive/2013/08/psdsozai2-228x171.jpg 228w, /uploads-archive/2013/08/psdsozai2-300x225.jpg 300w" sizes="(max-width: 400px) 100vw, 400px" /></a></p>
<p>ところどころで使えそうなパーツが揃っています。</p>
<p>勉強にも使えそうです。</p>
<p>&nbsp;</p>
<h3><a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank">Shiny Blue UI [PSD]</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://dribbble.com/shots/187607-Shiny-Blue-UI-PSD-" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2915 aligncenter" alt="psdsozai3" src="/uploads-archive/2013/08/psdsozai3.jpg" width="536" height="299" srcset="/uploads-archive/2013/08/psdsozai3.jpg 536w, /uploads-archive/2013/08/psdsozai3-300x167.jpg 300w, /uploads-archive/2013/08/psdsozai3-228x127.jpg 228w" sizes="(max-width: 536px) 100vw, 536px" /></a></p>
<p> こちらもいろんなパーツ、アイコン等があります。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank">20 Free Website Templates PSD Files</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="http://designreflect.com/free-website-templates-psd-files/" target="_blank"><img decoding="async" loading="lazy" class="size-full wp-image-2916 aligncenter" alt="psdsozai4" src="/uploads-archive/2013/08/psdsozai4.jpg" width="550" height="300" srcset="/uploads-archive/2013/08/psdsozai4.jpg 550w, /uploads-archive/2013/08/psdsozai4-300x164.jpg 300w, /uploads-archive/2013/08/psdsozai4-228x124.jpg 228w" sizes="(max-width: 550px) 100vw, 550px" /></a></p>
<p class="aligncenter">こちらはwebサイトのテンプレートのpsd素材です。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3><a href="http://graphicdesignjunction.com/2013/06/psd-ui-kits/" target="_blank">Free PSD UI Kits | Design | Graphic Design Junction</a></h4>
<p>&nbsp;</p>
<p style="text-align: center;"><a href="/uploads-archive/2013/08/psdsozai5.jpg"><img decoding="async" loading="lazy" class="alignnone size-full wp-image-2917" alt="psdsozai5" src="/uploads-archive/2013/08/psdsozai5.jpg" width="500" height="854" srcset="/uploads-archive/2013/08/psdsozai5.jpg 500w, /uploads-archive/2013/08/psdsozai5-176x300.jpg 176w, /uploads-archive/2013/08/psdsozai5-228x389.jpg 228w" sizes="(max-width: 500px) 100vw, 500px" /></a></p>
<p>&nbsp;</p>
<p>UIのkitが揃っておりそのままでも十分すぎる程使用出来るかと思います。</p>
<p>&nbsp;</p>
<p>本当にこういったものはありがたく、</p>
<p>今後とも頑張って提供して頂きたいですね！！</p>
<p>&nbsp;</p>


無料でゲットできちゃう高品質PSD素材！

<p>joomlaの管理画面を日本語化する方法を説明いたします。</p>
<p>特に難しいことはなく、流れに沿っていけばできるかと思います。</p>
<p>&nbsp;</p>
<p>joomlaをインストールされている前提でお話させて頂きます。</p>
<p>&nbsp;</p>
<h3>１．まずは、日本語化のファイルをダウンロードします。</h4>
<p>記事を書いた時点での最新はこちらになります。</p>
<p><a href="http://joomla.jp/news/release-news/213-release-joomla-314.html">Joomla 3.1.4 リリース &#8211; Joomla! JAPAN</a></p>
<p>日本語とパックになったものがありますね。</p>
<p>&nbsp;</p>
<h3>２．管理画面のExtensions &gt; Extension Manager をクリック</h4>
<p><a href="/uploads-archive/2013/07/Extension-manager.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2789" alt="Extension-manager" src="/uploads-archive/2013/07/Extension-manager-1024x541.jpg" width="614" height="325" /></a></p>
<p>&nbsp;</p>
<h3>３．インストール画面からUpload Package File選択をクリックし、ダウンロードしたファイルをアップロード</h4>
<p>&nbsp;</p>
<p><a href="/uploads-archive/2013/07/Extension-manager-Install.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2790" alt="Extension manager - Install" src="/uploads-archive/2013/07/Extension-manager-Install-1024x592.jpg" width="614" height="355" /></a></p>
<p>アップロードが完了したら次の工程に進みます。</p>
<p>&nbsp;</p>
<h3>４．Extensions→Language Managerをクリックし、遷移したら、左にあるメニューの「Installed &#8211;  Administrator」をクリック</h4>
<p>以下のページが表示されます。</p>
<p><a href="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2791" alt="test - Administration - Language Manager- Installed Languages" src="/uploads-archive/2013/07/test-Administration-Language-Manager-Installed-Languages-1024x592.jpg" width="614" height="355" /></a></p>
<p>&nbsp;</p>
<h3>５．Defaltの☆マークの箇所をクリックすれば完了です！</h4>
<p><a href="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640.jpg"><img decoding="async" loading="lazy" class="alignnone  wp-image-2792" alt="test - 管理 - コントロールパネル" src="/uploads-archive/2013/07/de0f0a3fc290761cafc1aff806831640-1024x597.jpg" width="614" height="358" /></a></p>
<p>無事日本語化しました！！</p>
<p>&nbsp;</p>
<p>日本語化できたのですが、やはり項目が多く、まだどういじったらいいかよくわからない状況です笑</p>
<p>実際になにかサイトを作ってみるようなことをしないとわからないかもしれませんね。。。</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>


Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #web制作サポート

2014/07/16

2014/07/09

2014/07/02

2014/06/03

2014/05/13

2014/04/23

2014/03/26

2014/03/04

2013/12/04

2013/11/21

2013/11/12

2013/11/07

2013/10/29

2013/10/23

2013/10/16

2013/09/25

2013/08/21

2013/07/31