いつの間にか黄金比抽出ツールの Web計。が使いやすくなってました。 お友達のタケさん作のツールですよ。 画像の縦の長さ、或いは横の長さを 入力するだけでリアルタイムで黄金比 を出してくれるのでとても便利。 そのWeb計がいつの間にかリニューアルしていて、ツールごとにタブで分けられていたのでよりノンストレスになっていましたよ。 デザインもすっきりリニューアルして見やすいです。タブはjQueryを使用。 Web計には黄金比以外にも白銀比ツールや4:3、3:2、16:9を図るツールもありますが、タブのおかげで再入力する必要もなくなりました。 凄く軽量でサクサク移動できるし、他ツールに移動しても前の入力数値は残りますので効率よく図る事が出来ますね。 数値を入れるだけ。クリックも不要でサクッと数値を出してくれますよ。 国産なのも嬉しいですね。わざわざ計算せずとも、ここを覚えておけば作業効率も上がり

マルチユーザーブログでも無い限り、プロフィールすらあまり使われない印象ですが、最近WPを使ったマルチユーザーブログもちらほら見かけるので書いてみます。数行のコードで出来るのでチャレンジしてみてください。 functions.phpに以下のようなコードを加えて終わり。 function my_new_contactmethods( $contactmethods ) { $contactmethods['twitter'] = 'Twitter'; $contactmethods['facebook'] = 'Facebook'; return $contactmethods; } add_filter('user_contactmethods','my_new_contactmethods',10,1);「$contactmethods[‘コードの中に使うテキスト’] = ‘管理画面に表示

cssやプログラミングシンプルで良さそうだったので メモ。コンテンツをスライドさせ る事が出来る、380バイト程度 の軽量なスクリプトです。軽い ですな、これは・・使い勝手も 良さそうです。 シンプルで良さそうだったので メモ。コンテンツをスライドさせ る事が出来る、380バイト程度 の軽量なスクリプトです。軽い ですな、これは・・使い勝手も 良さそうです。 シンプルなスクリプトですがとにかく軽量ですね。 Lightest jquery content slider ever – 380 bytes div要素ごとスライドさせる軽量コンテンツスライダーです。コードはほんの数行で済むみたい。 $(document).ready(function (){ $('#button a').click(function(){ var integer = $(this).attr('rel'); $(

Photoshopなどで、写真の中から不要な物を消したいとき、初心者にとってはなかなか高度なテクニックが必要になりますよね。 そんな行為をカンタンに行えてしまうのが今回ご紹介するオンラインツールです。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 写真から被写体をカンタンに消せるオンラインツール 「www.webinpaint.com」は、アップロードした写真から、不要な被写体をカンタンに消すことができるオンラインサービス。 まるで消しゴムを使うようにモノを消し込んでいくと、背景を保ちつつモノを消し去ってくれます。（ただし若干不自然になることもあります。） 写真から不要なものをカンタンに消せる ↑今回消してみるのは、駐車スペースに停まっているこの軽ワゴンです。 ↑先程の画像を、オンラインへアップ

管理画面でWebサイトの要素を ドラッグ&ドロップで追加出来る オープンソースのCMS。直感で 作成出来そうですね。このタイプ のCMSはいくつか見かけた気が しますが、ImpressPagesの精度 もなかなかです。 ImpressPagesはPHP製のオープンソースCMSです。エンドユーザー向けなのか、直感で手軽に要素を作成、追加出来ます。 ユーザーフレンドリーなCMS、というのがコンセプトっぽいです。確かにインターフェースもシンプルで操作しやすい印象です。選択中のテーマにドラッグ&ドロップでテキストや画像などのコンテンツを追加、WYSIWYGで編集、という感じです。 PHP5.3、MySQL5以上で稼動、ライセンスはGPL。mod_rewriteがインストールされている必要があります。以下に特徴を挙げておきます。 要素の追加はドラッグ&ドロップで ページへの要素の追加はドラッグ&ドロ

cssやプログラミングとっても便利そうなjQueryプラグインが あったのでメモ。国産です。IE6、7でも 確認しましたが、Chrome等のブラウザ と相違なく動いてくれます。動きもとても スムーズで素敵。透過PNGにも対応し ていますが、他のライブラリと併用する形。 とっても便利そうなjQueryプラグインが あったのでメモ。国産です。IE6、7でも 確認しましたが、Chrome等のブラウザ と相違なく動いてくれます。動きもとても スムーズで素敵。透過PNGにも対応し ていますが、他のライブラリと併用する形。 本当はこのライブラリを配布してくれているサイト自体がとっても素敵だったのでご紹介しようと思っていたのですが、素敵なライブラリも配布してくれていたのでこちらを合わせてご紹介します。 smoothRollOver.js from 日本電子工藝社 ユニークな社名ですね。スキルの高そうなW

オープンソースデザイン等に一般的に利用されている PhotoshopやDWなどのAdobe製品は 高機能で仕事では必須のツールです。 しかしながら高額で、手軽に購入出来る という訳には行きません。無料で手に 入る代替ソフトがありますので、まずは コツを掴むのにフリーソフトから使って みてはいかがでしょうか。 デザイン等に一般的に利用されているPhotoshopやDWなどのAdobe製品は高機能で仕事では必須のツールです。しかしながら高額で、手軽に購入出来るという訳には行きません。無料で手に入る代替ソフトがありますので、まずはコツを掴むのにフリーソフトから使ってみてはいかがでしょうか。 全く同じとは行きませんが、例えばPhotoshopの代替ソフトとして有名なGIMPはPhotoshop専用の拡張子であるPSDファイルも開く事が出来ますし、GIMPで作ったファイルをPSDに変換する事も可能で

Webツールデザインしたい！ 友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 友人がブログを始めたのですが、 Web制作もデザインも全く経験が 無いけど、普通な感じがすごく嫌 らしく、知識が無くても加工出来る、 とか良いサイトとかソフトは無いのか、 と聞かれて教えたWebサービスや ソフトが、同じ境遇の方に役立つかも と思って記事にします。 普通に写真や画像を掲載するのではなく、ちょっと個性的な感じにしたい、出来れば無料がいい、でも自分でデザイン作業は出来ないから良いサイトとか無い？とのことでした。 どうしたいのか良く分からなかったので、あんまり一貫性は無いんですが、教えたの

ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 ちょこちょこ紹介されている HTML5を使ったテンプレート で少しずつ学び始めていま すが、そんな中で最近知った テンプレートを備忘録的に記事 にまとめておきます。 いままでに出ているHTML5のテンプレートは以下の記事をご参照下さい。 ・HTML5で構築されたテンプレート・フレームワークいろいろ – DesignWalker ・10+ Free HTML5-CSS3 Website Templates 以下はここに紹介されて無いテンプレートです。実践で学ぶタイプの人間なのでこういったテンプレートはありがたいです。 Music Portfolio Template 音楽関連のサイト向けにデザインされ、コンテンツを作ってあります

cssやプログラミングcss+jQuery jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 jQueryを使用したcssナビゲーション メニューのまとめです。フェードや スライド、滑らかにドロップダウンする、 などなど色々なメニューをまとめました。 それほど多用はしませんが、必要な 時に探すのが面倒なので備忘録的に。 という訳で、個人的なjQuery+cssメニューの総集編です。 全部で73個。複数ブラウザでの確認はしていません。順不同です。少し重いかも・・ Large Drop Down Menu スライド&ドロップダウンメニュー Search Box with Filter and Large Drop Do

久々に感動。これは使わないと損 すると感じました。使う場面は個人 的にそうそう無いんですが、使いた くなるくらい凄い便利。たった1行の ショートコードを入れるだけで、サクッ と動画ギャラリーを構築できる動画 インポートのプラグインです。 まだ昨日知ったばかりで細かく調べていないのですが、デフォルトの設定でも簡単に動画ギャラリーを作れました。 こんな感じの動画ギャラリーが1行のコードでサクッと実装出来ます。もちろん、ページでも記事にでも可能。 量が多い場合は自動でページネーションも作ってくれますよ。想像以上に動作は重くなりませんでした。というかむしろ軽量です。 デモを見てもらったほうが早いですかね・・→デモ [note]※ページネーションの移動にAjax使っていますが、これは自分で付けるっぽいです。[/note] 細かい設定が可能 管理画面での設定画面です。かなり細かい設定が可能。Vimeo

探すの面倒なのでまとめてある 記事をまとめます。タイプ別とか 色々な形式でまとめてくれている のは個人的にありがたい。一応 無料で手に入るテーマに絞って います。 探すの面倒なのでまとめてある 記事をまとめます。タイプ別とか 色々な形式でまとめてくれている のは個人的にありがたい。一応 無料で手に入るテーマに絞って います。 というわけでまとめのまとめです。当然重複しているテーマもあるのでご了承下さい。量が多いので重いです。 総合的な感じのまとめ記事クオリティが高いテーマのまとめとか、とにかく集めた！みたいな感じのまとめ記事いろいろ。 40 Free High-Quality WordPress Themes クオリティの高いフリーのテーマ40個 Link:40 Free High-Quality WordPress Themes 40 FREE PREMIUM-QUALITY WORDP

これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。 各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。 左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。 例・transformcssSandpaperを使用した際のtransfor

フォントを探したいけど英語が苦手で ライセンスが心配、という方も少なく 無さそうですが、Fonts2u.comという サイトの日本語はほぼ完璧な日本語 なのでそういった不安も無く利用でき ますよ。 フォントを探したいけど英語が苦手で ライセンスが心配、という方も少なく 無さそうですが、Fonts2u.comという サイトの日本語はほぼ完璧な日本語 なのでそういった不安も無く利用でき ますよ。 基本的に多言語化されているサイトですが、日本人が運営してるかと思うくらい日本語が完璧です。というか日本人じゃないかな・・ フォントの種類もベトナム語、ドイツ語などなど、少し変わったものもあります。ゴシックなども、「ケルト」、「モダン」などの表記で分かりやすいですね。 ライセンスも日本語表記ですよ。この場合は「個人利用」ですね。 ライセンスはフォントごとに表記がありますが、Fonts2u.comには以下

ビジネスデザイン名刺 名刺を新しくしようと考えていて 少しギャラリーを見て周ったので すが、もう一度見なしそうなので ついでにメモ。ギャラリーや、名刺 のまとめられているサイトをいくつか。 名刺を新しくしようと考えていて 少しギャラリーを見て周ったので すが、もう一度見なしそうなので ついでにメモ。ギャラリーや、名刺 のまとめられているサイトと、発注 する時にいいかも、と個人的に 思った名刺屋さんをいくつか。 まずはデザイン名刺のインスピレーション向上用のギャラリーやFlickrのグループなどのまとめから。 Creattica とりあえずデザインといえばここですね。ロゴでもお世話になっているギャラリーサイトです。 Creattica-Business Cards Card Nerd 凄く綺麗にまとまっているギャラリーサイトです。シンプルでとても見やすい。上4つは広告です。 Card Ner

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。 ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。 今回はこうしたウェブ開発を仕事としている人が利用しそうなツールをまとめてみたいと思います。 スケジュール管理 Googleカレンダー もはや説明不要のスケジュール管理システム。 ドラッグによる複数日数のスケジュール投稿は、なにかと連日作業になるウェブ製作にぴったり。 また、タスク管理も結合されたため、細かい作業などの記入も可能。なにより複数人での予定の共有もできるのが便利です。 メール Gmail もう使っている人も多数いるかもしれませんが、Googleが提供するGmailはかなり強烈なアプリケーションです。

WebデザインHTML5 Canvas ようやくHTML5に興味を持ち 始めました。サンプルを以前 記事にして、凄いなーと思っ ていましたが、なかなか時間 がなく、先延ばしに。 ようやくHTML5に興味を持ち始めました。 サンプルを以前記事にして、凄いなーと 思っていましたが、なかなか時間がなく、 先延ばしに。で、ようやく頭に入れ始めま した。なにするにも行動が遅くて困ります。 HTML5でも話題になっているCanvasを勉強し始めました。そんな中で、勉強の参考になりそうなサイトをブクマしたのでこれから学ぼう、とお考えの方とシェアしたいと思ってエントリー。 というわけで、基本的な情報がほとんどです。大量の情報を見ても混乱するのである程度絞っています。 html5.jp リファレンスサイトです。リンク先はcanvasカテゴリに。ここからスタート、というか最後までたぶんお世話になりそう。 ht