こんにちは。サービスグループの武田です。 社内で、「ブログでリンクを追加するときどうしてる？」という話題で盛り上がりました。 大きく次の4とおりの意見がありました。 WordPressのLinkボタンで追加する Markdownだから気にせず書いちゃう ブックマークレットを登録して使っている ChromeのCreate Linkプラグインを使っている 今回は最後のCreate Linkを自分でも使ってみたので紹介します。また「自分はこうしてるよ！」という情報ももらえたので、それも併せて紹介します。 Create Linkのインストール インストールおよび基本的な使い方は、過去に解説した記事がありますのでそちらを見てください。 ブログに Web ページを貼るときは「Create Link」が便利！ フォーマットのカスタマイズ インストールが完了したらデフォルトでは次の4つが設定されています。
CSSのレイアウトで思うようにいかない時に、最初に確認すべきことはページ上のすべての要素がどのようにレイアウトされているかです。これを知るには、各要素が区別できるように、要素ごとに異なるカラーのアウトラインをつけると便利です。 ページ上のすべての要素に、要素ごとに異なるカラーのアウトラインをつけ、親子関係も一目で分かる便利なChromeの機能拡張を紹介します。 Pesticide Pesticide -GitHub 以前当ブログで紹介したことがありますが、バージョンアップされており、更に便利になっています。 Pesticideは、2つの方法で利用できます。 Chromeの機能拡張（Pesticide for Chrome） スタイルシートファイル（外部CSS・CDNで利用可） 外部スタイルシートとしても提供されているので、ローカル環境でブラウザを問わず利用することもできます。 簡単なのでC
consoleではUncaught TypeError: Cannot read property '$apply' of undefined となってしまいAngularJSが使えません。 このようなissueも結構上がっています。 https://github.com/angular/angularjs-batarang/issues/207 代わりはないものかと探していたら「ng-inspector」というようなものを見つけました。 ng-inspector 特徴的なのはChromeだけでなくSafari Extentionも提供されていることです。(Firefox版も開発中) 使い方は簡単で、導入したらAngularJSを使ってるページでツールバーのボタンを押すだけ。 適当なサンプル・アプリケーションで試すとこんな感じ。 http://todomvc.com/examples/an
デザイン制作の大半をPhotoshopで作業する人も多くいらっしゃいます。 そんなPhotoshopですから、自分仕様に環境を整えておくことで作業の快適具合も大きく変わってきます。 今回は、Photoshopでの作業を効率化する使い勝手の良いプラグインを28個に絞りご紹介します。 フォトショッププラグインとは、標準機能を拡張するファイルのことです。必要に応じてインストールすることで作業効率を飛躍的にアップさせることが可能です。 全てインストールする必要はありませんが、気になるものがあれば是非一度使ってみてください。 便利すぎるPhotoshopのプラグイン23選 1.Velositey わずか数回のクリックであっという間にホームページのレイアウトを作るプラグインです。 ヘッダからコンテンツ、フッターなどがそれぞれ10種類以上収録されており、Photoshopを起動後4回選択すればレイアウト
こんにちは。デザイナーのハルエです。 普段Webデザインを制作する上でPhotoshopを使用している方は多いかと思いますが、いかに自分に合った環境にカスタマイズするかで作業効率は大きく変わってきます。 今回はいつものPhotoshopがさらに快適になる無料プラグインをご紹介させていただきます。 【こちらもおすすめ】 おすすめPhotoshopプラグイン WebINK http://www.webink.com/webfontplugin/ ※現在このサービスはご利用いただけません。 Google Web FontなどのWebフォントをPhotoshop上で表示、利用することができます。 最初の同期に少し時間がかかりますが、あとはデザインしながら手の届くところでWebフォントがさくさく選べてしまうので、非常に捗ります。 Photoshop CS5から対応しています。 flaticon ht
Burning Phoenix, is a beautiful fantasy theme for the fantasy lovers
100+ Best Photoshop Plugins for Web Designers Photoshop is the most commonly used design tool, it is the best and versatile design tool for website Designing. But sometimes photoshop is limited for some reason, but with the use of proper plugins photoshop might work like a dream. Today we are showcasing some of the best photoshop plugins for web designers to speed up workflow. Free Photoshop Plugi
突然ですが、皆さんはレイアウト指示書、好きですか？ レイアウト指示書とは、デザイナーが開発メンバーにパーツと一緒に渡すドキュメントです。「このパーツとこのパーツの間は10px」とか「このフォントサイズは 34pt でカラーは…」みたいなレイアウトの詳細が記載されています（ぐぐるとそれっぽい画像が見られます）。 開発側にカンプ 1 枚渡して「じゃ、これと同じで」なんてことはできないので、お互いのコミュニケーションに必須なのです。 しかしですねー、この指示書というものを作るのがかなり面倒だったのですよ。 僕の場合、カンプは Photoshop で 指示書は Illustrator だったので、Photoshop でフォントサイズ確認して Illustrator に入力して〜とか、レイヤー効果分ピクセルを測ってオブジェクトサイズに足した数値を〜とか、記載する仕様とオブジェクトを線で繋げたり〜とか
普段コーディングをしているときに使うブラウザの開発者ツールですが、みなさんはどのツールを使用していますか？ 有名な「Firebug」などを使用している人も多いと思いますが、私はFirefoxにデフォルトで入っている「要素を調査」をオススメしたいです。 開発者ツールとは 開発者ツールとは各ブラウザに入っているWEB制作者向けのツールです。これを使用することによって要素にどのスタイルが掛かっているのかチェックすることが出来ます。WEB制作をしている人なら誰もが使ったことがあるツールです。 インスペクタ – 開発ツール | MDN 開発者ツールの使い方 タグをチェックしたいページで右クリックをし「要素を調査」を選択します。 すると、ブラウザの下にHTMLとCSSのソースが出てきます。 左下にある「マウスで要素を選択」をクリックすると要素を直接選択することが出来ます。 要素を選択するとその要素に掛
目に青葉山ほととぎす初鰹。みなさまいかがお過ごしでしょうか。ディレクターをしているluckyと申します。ゴールデンウィークが終わり、早くも夏休みに思いを馳せている方々も多いかと思います。私もそのひとりですが… ここはひとつ気合を入れるべく、ビシッ！と業務改善に繋がるようなGoogle Chromeのアドオンをご紹介させていただきます。今回はディレクター業務を行う上で便利だと感じた、ごく基本的なものを10個チョイスしてみました。 目次 そもそもアドオンってなに？ Awesome Screenshot QRcode maker ColorZilla 文字数カウンタ Cache Killer Page Ruler ウェブタイムマシン Ghostery AdMatrix Analytics Evernote Web Clipper 結論 そもそもアドオンってなに？ ・ブラウザに新機能を追加できる簡
Hey! I made a script. Again. This time (I hope) it will help you with group layer renaming. Script can append, prepend or replace layer name with entered text. Should be useful if you are layer organization geek or if you use applications like Slicy or new Photoshop CC feature called Image Assets, that can export layers using tags in their names. Download Requires Adobe Photoshop CS5, CS6, CC2014
Firefox Extension to debug any AS3 SWF on the web FlashFirebug (now Flash Debugger) gives you the ability to debug any AS3 Flash on the web. Inspect the DisplayList, change properties on the fly and see the warnings, errors and traces directly in the extension. Use the inspector to hone in on elements, transform objects on the fly and use the console to run AS3 commands on the active SWF. FlashFir
Firefox 29.0にアップデートされたユーザーの中には、AustralisデザインとなったUIを新鮮に感じている方もいれば、以前のUIと大きく変わったことにとまどいを感じている方もいらっしゃると思います。 最近のアップデートの中でも、今回のUI変更はかなりのインパクトがあり、スッキリしていいデザインだと思う反面、アドオンバーやAppボタンが無くなったことや、丸みを帯びたタブに違和感を感じるのも当然だと思います。 このUI変更に満足できないユーザーのために、以前のデザインに戻すことができたり、アドオンバーなど省略されたものを取り戻すことができるアドオンがすでにいくつか公開されており、こうしたアドオンを導入することで、従来のFirefoxに近い感覚で機能を利用したり、見た目を元に戻したりすることができます。 今回は、そんなアドオンの中から、UIデザインや機能をカスタマイズし、以前のFir
Facebook, Twitter, Google+など、主要なソーシャルサービスの各ページ用のPSD素材が1クリックで利用できるPhotoshop用の機能拡張を紹介します。 アップデート機能も備えているので、常に最新のものが利用できるのは便利ですね。 機能拡張もPSD素材も無料で利用できます。 Social Kit Social Kitのインストール・使い方 各ソーシャルサービスのテンプレート Social Kitのインストール・使い方 Photoshop CS6 for OS Xの日本語環境に入れてみましたが、問題無く使用できているので、簡単にインストール方法を紹介します。 まずは、Social Kitのインストーラーをダウンロードします。 ページの中央「Download from source」ボタンをクリックします。 Social Kit ダウンロードする際は、Twitter, F
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く