dreambird の 覚え書き

素材集(権利いろいろ)

ベクトル系

Love Vector Free
世界地図データ
35 High-Quality Free Vector Packs
商用フリーで使える影絵素材サイト シルエットデザイン
商用利用可能なベクター素材いろいろ
商用可!5000を超えるシルエットベクターデータ配布サイト「All Silhouettes」
人物、動物、魚、恐竜、植物といった様々な無料シルエット画像

アイコン

Mr.Icon検索で探すタイプ。権利いろいろ。
FIND ICONS 検索で探すタイプ。権利いろいろ。
商用可も有り!フリーアイコンを100,000個以上集めたアイコン総合サイト「FREE ICONS!」
PNGおよびICO形式のアイコンが山のように無料ダウンロードできるサイト(Usage commercial が Oui のみ)
超ハイクオリティなアイコンセット「Web Icon Set」
IconFever 商用/個人、利用ライセンス別で探せるアイコン収集サイト
デザイン素材.com 【無料Web素材・イラストアイコン・ライセンスフリー・商用利用可】
iconPot – totally free icons
無料アイコン素材一覧(シンボル・マーク・シルエットにも)
33 Absolutely Free E-Commerce Icon Sets | Naldz Graphics
Royalty Free Icons & Clipart Stock Images ~ Icons Etc.
無料で使えるアイコンサイトいろいろ | DesignWalker
50 Fresh Useful Icon Sets For Your Next Design – Smashing Magazine
ECサイトのためのアイコンセット30
ダウンロードして使えるボタン素材いろいろ | DesignWalker

小アイコン

p.yusukekamiyamane C.C 3.0
famfamfam.comC.C 3.0
1キロバイトの素材屋さん-無料素材の配布/可愛いアイコン- サイトへのリンク必要

フォント

Gray Graphics ひらがな、カタカナ、英語。商用OK!
商用サイトでも無料で利用できる日本語のフリーフォント集
プレビューが見やすいフォントサイト(著作権いろいろ)

画像系

Photoshopのパターン配布サイト(一応個別にライセンス確認)

web アプリ

webツール系

画像に使用されているフォントの名前が分かるオンラインサービス -What Font isNew_icons_10.gif
イベント開催支援ツール アテンド – ATND
WEBのいろんなサービス | あわせて読みたい etc.
エクセルシートをHTMLテーブルに変換しちゃう君New_icons_58.gif
画像に使用されているフォントの名前が分かるオンラインサービス -What Font is

ワイヤーフレーム

cacoo webアプリ。日本語対応!
Mockflow Win アプリでネット同期。off lineできる。無料はページ制限などあり。
mockingbird web上なら mockingbird 使いやすいか。
10 Excellent Tools for Creating Web Design Wireframes
10 Completely Free Wireframe and Mockup Applications – Speckyboy Design Magazine

グラフ作成系

リッチなグラフ作成ツール
JavascriptやFlashを使ったクールなグラフの見せ方
グラフのオンラインジェネレーターnew_32.gif

コード系

エンコードマニアックス – 各種エンコードやハッシュを一発作成
JavaScriptファイルやCSSファイルを圧縮して高速化する
・Minify only, do not obfuscate:圧縮のみで難読化はしない
・Preserve all semicolons:不要なセミコロンを削除しないようにする
・Disable all micro optimizations:標準の最適化をすべて無効にする
HTML文書の文法をチェック
オンラインでドロップダウン型のナビゲーションを簡単作成

画像系

好きなサイズのダミー画像が動的に作れる『Dummy Image』
ファビコン制作
YouTube 動画を流れるようなアニメーションGIFに変換する「GifSoup」
ウェブ上でバーコードが簡単に作られるサイト

SEO & web ツール関連

Yahoo!

Yahoo! アクセス解析
Yahoo! サイトエクスプローラー
Yahoo! アドパートナーYahoo版AdSense

Google

Geocoding – 住所から緯度経度を検索。New_icons_11.gif
Font previewer google経由でfontが埋め込める。フォントの埋め込み方
Google AdSense
Google Analytics
Google ウェブマスターツール
Google アカウント情報
Google ダッシュボード Googleに登録されている情報一覧
Google AdWords
Google AdWords キーワードに近いキーワード調査
Google sets キーワードのカテゴリを調べる
Google ウェブサイト オプティマイザー サイトテストなど
Google プレイス Google Mapに情報を掲載

アフィリエイト

バリューコマース

サイトマップ作成

The Search ツール New_icons_40.gif
XML Sitemaps.com

ユーザー行動分析

userfly

検索エンジン初期登録

Yahoo! 巡回リクエスト
Google に URL を追加
サイトの URL を Bing に登録
Baidu サイトURLの登録申請

SEOツール サイト

The Search ツール
フェレットプラス

DreamWeaver CS3 便利術

DreamweaverでWordPressサイトを作るならいれておくべき機能拡張 2本
テンプレート開発用 & mxi制作用スニペット
CS3版 スペシャルコードヒント
control + space → PHPのコードヒント表示(Mac OS X の Spolight ショートカットの変更の必要あり)
Dreamweaver MXで作るPHPアプリケーション
Dreamweaver Templateの使い方 〜パンくずリスト
タグライブラリを使えば、HTML5のコードヒントを自作、修正できます。New_icons_02.gif

常勝CSS

ネガティブマージン系

3カラムサンプル18種|CSS HappyLife
IE 6で min-width、max-width を使うライブラリ minmax.js

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ
ネガティブマージンの理解を深め、活用するテクニック集
ナビゲーションの区切り線をホバー時にすっきりさせるスタイルシート 左にネガティブマージンを設定することで、隙間を埋める。
水平に配置するblockをスマートに実装するスタイルシート

リスト系

リスト要素をスタイルするベストプラクティス
リスト要素を使用したスタイルシートの5つのトリック

中央配置系

複数のボックス要素をまとめてセンタリングする方法
複数行のテキストを天地左右中央に配置するスタイルシート
CSSで中央配置するときのメモ

テクニック集

スタイルシートの実用的なテクニック集:エレメント・CSS3・Tips編
スタイルシートの実用的なテクニック集:レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編

その他

IE6対策のまとめnew_31.gif
span二重囲いでサイズに合わせたボタンを生成(例)
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック
とっても使えるoverflowプロパティ。その使い方色々。
たった一行のスタイルシートでグリッドレイアウトを実装するフレームワーク
(恐らく)最も簡単な、対IE用CSSハック術
わかりやすいCSSハック、条件付きコメントのページ
IEでAdSenseにドロップダウンメニューなんかがかぶると裏に回っちゃう現象への対応
:ins, iframe{position: static !important; display: inline !important;}
CSS+HTML のみで実装出来る、クロスブラウザ対応のWebデザインテクニック集New_icons_42.gif

デザイナーに優しい jQuery

演習ページ

Web制作の現場で使えるjQuery UIデザイン入門

セレクターAPIについてわかりやすいページ

CSS2のセレクター
CSS3のセレクター前編 後編

使い勝手がよかったライブラリ

[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト – ボタン等へ使用
Simple Tabs with CSS & jQuery
lightbox系の使いやすいcolorbox
jQuery lightBox plugin軽めのjQuery lightbox
アニメーションの動きがキモチイイ、アコーディオンのスクリプトシンプルで使いやすい

phpについて

cssの拡張子をphpで…。? header(‘Content-Type: text/css’); ? を記述すればok

WordPress の便利情報

関数リファレンス

カスタマイズ

改行を実現
WordPressのダッシュボードハックス管理画面カスタマイズ
WordPressをカスタマイズする30のテクニック
wordpress+jQueryで実現するテクニックチュートリアル30選
WordPressをカスタマイズするTips10
著作権放棄のWP2.9の管理画面の操作マニュアルを無料配布します
新しいWordPressのテクニック&ハック30+
WordPressを高速化するテクニック18
WordPressで記事の最終更新日を表示する方法
簡単な作業でWordPressのセキュリティをアップするチップス
WordPressのコーディングテクニック10
WordPressでパンくずリストを表示するシンプルなコード
任意のPHPコードをWordPressのウィジェットに変換してくれる『Widgetifyr』

常勝 Javascript

「Hyphenator.js」文字の途中改行に自動でハイフンがつけることができる New_icons_02.gif
IE9、IE8、IE7 – クロスブラウザコーディングテクニックNew_icons_02.gif

アクセシビリティとSEOを考慮したポップアップウィンドウ
JavaScript/ウィンドウ/サブウィンドウのオプション一覧

EC-CUBE 関数 & 変数 etc

商品名
{$arrProducts[cnt].product_code_min}

Photoshop 便利術

いろいろ情報

サポートファイル

50 Photoshop Brush Collections – 1000s of Brushes 要ライセンス確認
Photoshop パターン、ブラシ、アクションなど 要ライセンス確認
氷をイメージさせる PhotoShopパターンセット リンク先他も物により商用可
Photoshop ブラシなど 要ライセンス確認

チュートリアル

Ultimate Roundup of 750+ Free Photoshop Layer Styles 効果の使い方などの参考にnew_46.gif
肌補正などチュートリアル26
Photoshop ブレンドモードを使いこなしてワンランク上の画像合成

Tips

Photoshop Tips レイヤーをcommand(Ctrl) + Tで変形したいときなど、オプションバーの「W」と「H」は%で表示されますが、pxで指定することが可能です。
http://blog.creamu.com/mt/2010/01/photoshop2.html
JPEG画像をより美しく、より軽量に最適化するテクニック
レイヤー1枚追加するだけでPhotoshopのファイルサイズをぐっと小さくしてくれる裏技
複数のマシンでフォトショップの設定を共有する方法
あなたが知らなかったかもしれないPhotoshopの「切り抜き」ツールにまつわる小技いろいろ

ショートカット集

レイヤー関連

レイヤーグループの三角を「 com+ クリック 」でレイヤーグループを全て閉じる/開く
 選択ツールで移動する単位を「グループ or レイヤー」の変更
com + [ ] → レイヤーの前後を移動
com + shift + [ ] → レイヤーの前後をいっきに移動
opt + [ ] → 選択レイヤーを移動
opt + shift + [ ] → 選択レイヤーを加えながら移動
com + shift + < > → 前後のレイヤーをいっきに選択

ブラシ関連

[ ] → ブラシのサイズを変更
shift + [ ] → ブラシのぼけ足を変更
< > → 登録してるブラシを順番に変更
shift + < > → 登録してるブラシの種類を順番に変更

数字キー → 流量を変更
shift + 数字キー → 不透明度を変更
opt + shift + P → エアブラシ機能をon/off

塗りつぶし

opt + shift + delete → レイヤーに書かれているものを選択して、描画色で塗りつぶし
com + shift + delete → レイヤーに書かれているものを選択して、背景色で塗りつぶし

ブレンドモード関連

shift + ; = → ブレンドモードを前後に移動
opt + shift + ブレンドの頭文字 → ブレンドモードを直接変更
各キーの表

テキスト

com + H → テキストの選択範囲を表示/非表示
com + return または enter → 修正しているテキストを選択終了

com + shift + < > → 2ptづつ文字のサイズを変更
com + shift + opt + < > → 10ptづつ文字のサイズを変更
opt + ▲ ▼ → 行間を2ptづつ調整
opt + com + ▲ ▼ → 行間を10ptづつ調整
com + shift + B → bold(その他単語で対応)

com + shift + Y → boldなどitalicなどすべて外す
com + shift + X → 文字の横比率を100%にもどす
com + opt + shift + X → 文字の縦比率を100%にもどす
com + opt + shift + A → 行間を(自動)にもどす

ダイアログ内

P → プレビューのon/off
com → デフォルトに戻るボタンに変更(変わらない場合もある)

ショートカット参考

Illustrator 便利情報

ショートカット

自分で設定したやつ

com + @ → ぼかし(アピアランス)
com + opt + @ → ドロップシャドウ(アピアランス)
com + _ → 配置
opt + com + A → アピアランスを分解

デフォルト

com + / → アピアランスの新規塗りを追加
com+ opt + / → アピアランスの新規線を追加

いろいろ

Mastering Illustrator Effects 効果の利用法
Illustrator の「変形」がすごかった。

実用性の高いオープンソース など

魔法のメールフォーム
JavaScript/フォーム/自動計算フォームAタイプ(消費税あり) – TAG index Webサイト
アンケート・お問い合わせ・注文フォーム phpのみで書かれているのでinclude仕様に変更できるかも

営業カレンダー- ホームページ更新CGI

google API key 取得ページ

Google AJAX Feed API 「PR-」を除く記事一覧を表示するJavascript
Google AJAX Feed API サンプルinnerHTML IE6動く ver
HTMLエンティティ化

リスト要素で実装したサイトマップを美しくスタイルする -SlickMap CSS

UvumiTools Dropdown Menu

 

IE6 透過png対処ソース
DD_belatedPNG.js imgで貼り込むなら
IE PNG FIX 2 背景なら。少しハック必要。- 実用厳しいかな
Google コード(ie7-js) 少し表示怪しい。- 実用厳しいかな

グラフのビジュアルをよくする

データをリッチにビジュアル化するフレームワーク
見栄えのよいグラフを容易に作成できる「FusionCharts Free」
JSを使って描画するグラフ

Mac OS X 便利術

知らない人は損してると思うMacの使い方
33. フォルダ名に「.app」をつけるとDockに登録できる。登録したあとは.appを外す。
31. ctrl+スクロールでズームイン!
78. 調べたい語句などをそのままサファリアイコンにドラッグで検索
82. カラム表示の仕切りをoptionを押しながら広げるたりすると位置が記憶されれる
84. メモしたい所を範囲選択してそのままデスクトップにドラッグすると簡単にメモをとれる
196. 写真を手軽にwebページにする方法
 ハードディスク>システム>ライブラリ>Image Capture>Autmatic Tasks のなかにある「webページ作成」に写真をフォルダごと突っ込めば一発で作ってくれる。
314. iPhoto
 E イベントビューに切り替え
 Space イベントビューのキー写真設定
 0,1,2,3 サイズを変更
446. option押しながらクイックルックするとフルスクリーンになる。
458. jpegなどの画像に文字を入れたい場合はプレビューの注釈で入れられる。

Mac OS X のキーボードショートカット
opt + com + Y → その場で画像のスライドショー
control + command + I → 複数項目の情報を、1ウィンドウで表示
command + I → ダウンロードしたファイル、HTMLの情報を見る
command + tab の後 + Q → アプリを次々終了

Snow Leopardになって覚えた、ちょっとした便利な操作

いろいろなスクリーンショットの撮り方

「iPhoto Library」を移動させる方法

 

 

↑ このページの一番上へ