コーディングをする上で、いまや必須なのがMT。 クライアントからの要望に答える為だったり、より便利にしてくれる為に、MTプラグインも必要とする時が多々あります。 ソレなのにいつも、「何処だっけ。。。あのプラグインは・・・」と無駄に探してしまうので、私的メモとして個人的によく使うプラグインだったり、利便性を強く感じたプラグインを、最低限の説明とともにリストアップしておきます。 より詳しく探したい人は、小粋空間さんのプラグイン一覧とかが非常に便利。いつも使わせてもらってます。 ※リンクは全て別窓で開かれまする CatEntries ・MTEntriesで特定のカテゴリーを表示・非表示 <MTCatEntries exclude="CategoryName1,CategoryName2"> ・・・ </MTCatEntries> <MTCatEntries include="CategoryNa

2カラムのサンプルを色々作ってみました。 事の発端は、Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download!を見ててですが、こういうレイアウトサンプルサイトは色々あって、P O P * P O Pさんでも紹介されていますね。 IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』 | P O P * P O P http://www.popxpop.com/archives/2007/04/ie7csscss_layouts.html で、まぁ日本語のサイトがあんまり無いっていうのと、どーにもこーにも使い勝手が悪い気がしてならないので、自分が使いやすいだろう2カラムのサンプルを作ったという訳です。 細かく作っていけば限りなく出来

ページの制作において必須とも言えるCSSですが、そのCSSファイルを最適化することによってページの読み込みを早くしてみたり、トラフィックの多いサイトであれば転送料の節約にも貢献できるらしい。 というわけで、現時点で存在するCSS最適化ネットサービスをいろいろと探して列挙してみました。最適化といってもサービスによって方法はいろいろなので、この中から自分の目指す方向の最適化サイトが見つかるかも。 CSSの最適化とファイルサイズ削減をしてくれる無料ネットサービスのリストは以下の通り。 Clean CSS - A Resource for Web Designers - Optmize and Format your CSS http://www.cleancss.com/ コメントを残したり、並べ替えたり、圧縮したり、最適化レベルやオプション指定によってかなりカスタマイズできるCSSファイルの容

ブログのテーマやテンプレートを最初から用意されているもの以外のデザインにしようと思うと、様々な知識が必要になり、結局あきらめてしまう人が多いはず。 しかしこの「Canvas for Wordpress」を使えば、自分の好きな機能の部品をドラッグ＆ドロップで配置するだけでお好みデザインのオリジナリティあふれるブログが完成。デザインについてのCSSやPHPの知識は不要。 ダウンロードは以下から。もちろん無料。 Welcome to Canvas http://www.freshpursuits.com/canvas/download ドラッグ＆ドロップで配置した後、それぞれのプラグインの設定もクリックすることで可能になる それぞれのブロックやプラグインについて複製したり削除したりするのも簡単 また、CSSの知識をあまり必要とせずにカラーやフォントを決めることもできます これが完成図 ベースとな

斜め線や平行線、ドットやグラデーションのパターンのもととなる背景画像を簡単にサクサク作成できる無料サービスです。線と線の間隔や色、背景色、透過するかどうかなどを指定することで、お好みのパターンが作成できます。 Background Image Maker http://lab.rails2u.com/bgmaker/ 条件を指定してから「Make」をクリックすれば右側にサンプルが出てくるので、気に入ったパターンが生成されたら「URL」に表示されているアドレスをコピーして、ブラウザのアドレスバーに貼り付けて表示すれば、元になる画像が表示されます。あとはそれをダウンロードすれば完了。 繰り返しパターンの画像というのは慣れている人はすぐに作成できますが、それでもいろいろな種類をドンドン作るというのはかなり繁雑な作業の繰り返しになるので、こういったサービスは助かります。

9800個もあるフォントを無料でダウンロードできるサイトです。ちゃんとプレビューも表示されるのでダウンロード前にどんな書体か確認もできます。 ダウンロードするには「DOWNLOAD THE FONT」の下にあるフロッピーディスクのアイコンをクリック。ポップアップしたウインドウに表示されるランダムなアルファベット3文字を入力して「Send」をクリック。あとは表示される「click to download the file」をクリックすればダウンロードできます。 9800 Free Fonts, fonts for free, font finder, download free fonts, free typography http://www.creamundo.com/index.php?lang=en ほかにも以下のサイトで無料のフォントを山ほどダウンロードできます。いざというときに備

CSSでデザインされたサイトを集めた「csstux」は、CSSを使ってかっこよくデザインされたサイトがいろいろノミネートされており、それぞれにトラックバックを送ったり、コメントを付けたりすることが可能です。また、各サイトはレートによる格付けがされているので、人気の高いデザインがどれなのかもすぐにわかるようになっています。 これ以外にも同様のサイトはいろいろあるので、知る限りのCSSデザイン格付けサイトをまとめてみました。ウェブデザインの際の参考になるのではないかと。 今回最初に紹介する「csstux」はこれらのCSSデザイン格付けサイトの中ではかなり新参の部類なので、知らない人も多いのではないかと。 以下のフォームから自分のサイトをノミネートさせることも可能です。 csstux - Submit your site 2つめは「CSSElite」 ノミネートするには以下のページに書いてあるメ

Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d

ITバブルの頃に叶えられなかったもろもろが、積年の技術革新と蓄積、ネット利用者の増加によってついに実現可能になったのが「Web2.0」という潮流であるとするならば、そのWeb2.0的サービスを提供する各企業やサービスには「ロゴ画像」が存在するわけです。一種のシンボルですね。そういう特徴を端的に表しているWeb2.0関連のロゴを山ほど集めたサイトが「Web2Logo」です。 単純にロゴを集めているわけではなく、それぞれのロゴにはタグが付けられており、タグ自体もタグクラウド化しているので、「こういうジャンルのロゴには共通の傾向や特徴はあるのだろうか？」といった事も知ることができます。単純にデザインの参考にする場合でもお役立ち。 詳細は以下から。 Web 2.0 - Web2.0Logos http://www.web2logo.com/ 例えば、タスクとかToDoリストなどのいわゆるタスクマネ

いろいろなユーザーがデザインしたカラーパレットに対して投票を行っており、そのデータを見ることができるサイト。それぞれの色には名前が付けられており、その組み合わせであるカラーパレットにも全部名前が付いています。カラーパレットはユーザー投票によってスコアが決まっており、どういう色の組み合わせの人気が高いのかが分かります。また、さまざまな条件でカラーパレットを検索することができ、HEXやRGBも表示されるので、配色に迷った場合には役に立ちます。 詳細は以下の通り。 COLOURlovers Coup.0 :: Color Trends & Palettes http://www.colourlovers.com/ 中でもかなり面白いのが、既存の雑誌の表紙デザインをもとにしてカラーパレットを抽出しているトレンドのコーナー。 COLOURlovers Coup.0 :: Trends たとえばこれは

これを使えば無料で恐ろしく見栄えのするフラッシュでできたグラフをPHPで作成することができるようになります。標準的なグラフを表示するだけでなく、アニメーションを使った様々なビジュアル効果を加えたり、印刷ボタンや切り替えボタン、グラフを見る方向の変更、複数のグラフの混在なども簡単にできるので、一風変わったグラフ表示をお手軽にしたい人には最適ではないかと。 PHP/SWF Charts http://www.maani.us/charts/index.php その他のグラフのサンプルは以下を参照 http://www.maani.us/charts/index.php?menu=Gallery ダウンロードはこちらから http://www.maani.us/charts/index.php?menu=Download ほかにも有用なものがあるので、多彩な表現方法を手間無く使いたい人は必見。

解像度は1200×900から1600×1200まで。ファイルサイズは400KBから1.5MB程度。ちょっとだけ日本語対応。 ジャンルは12、テクスチャ、動物と昆虫、テクノロジー関係、植物、液体・気体・光、建物・家・インテリア、いろいろな物、雲、景色・風景、花、季節のイベント、パターン、といった感じです。 ダウンロードは下記から。 Free Royalty Free Stock Photography - Home http://www.adigitaldreamer.com/gallery/index.php こんな感じでディレクトリの中が丸ごと見えるので、ダウンロード支援ソフトで一括ダウンロードしてしまうのも良いかも。 Index of /gallery/albums/animals http://www.adigitaldreamer.com/gallery/albums/animal

まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配

CSSを使って吹き出しを作成することができるCSSファイルとJSファイル、それから画像ファイルをひとまとめにしたセットです。XHTML1.0準拠で、Internet Explorer 6 と 7、Firefox 2.0、Safari 2.0、Opera 9.0で動作確認ができています。 ダウンロードは以下から。 willmayo.com >> CSS Speech Bubbles 実際のサンプルは以下にあります。 CSS Speech Bubbles 角をまるくしているのは、「curvyCorners」を使用しているとのこと。 ほかにもこの吹き出し方のものは以下に多くあります。 入力欄（フォーム）部分をマウスでクリックすると吹き出しが出てくるタイプ Tooltip for forms リンクの上にマウスを乗せると吹き出しが表示されるタイプ Ajax tooltip リンクの上にマウスを乗せ

現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック

色彩構成を決めるのはなかなか難しいものがありますが、この「ColorJack: Sphere」を使えば、色彩の理屈にぴったり合った感覚のみに頼らない正確な色彩構成が可能です。 詳細は以下の通り。 ColorJack: Sphere 例えばこの「Neutral」なら連続した色を簡単に選ぶことができます 「Analogous」ならもうちょっと間隔を開けて選択するので色彩に幅ができます 「Clash」は補色の関係を考えるのに使える 「Six-Tone」あたりは割と使いやすい 「Websafe」にするといわゆるセーフカラーのみで選択可能になります 元々の色の組み合わせ自体をスペクトラム風以外にもいろいろと変更可能で、カスタム設定すればこんなことも可能です

ダウンロード数に基づいて人気のあるフリーフォント500個をピックアップされています。ダウンロード数が多いものを選んでいるだけあって、どこかで見たようなフォントもチラホラ見られますが、どれも有用そうです。 詳細は以下から。 Fonts 500 http://www.fonts500.com/ ダウンロードしたいフォントは、プレビュー画像をクリックすればダウンロードできます。現在はちょっと重いので画像が表示されなかったり、サイトにつながりにくいこともあるようです。 Use custom textに好きな文字列を入れてボタンを押すと、プレビュー画像に反映。 その他のフリーフォントは以下の記事を参照してください。

ということで、今まで数限りなくネットのあちこちで紹介されてきたCSSデザイン関連のサイトがリスト化されてまとめられたようです。これだけあれば当分はブログなどのデザインのネタに困ることはなさそう。インスピレーションを得るのに使うもよし、デザインの参考にするのもよし、知っておいて損はないものばかりです。 リストは以下の通り。 CSS Beauty | CSS Design, News, Jobs, Community, Web Standards http://www.cssbeauty.com/ CSS Drive- Categorized CSS gallery and examples. http://www.cssdrive.com/ Stylegala - Web Design Publication http://www.stylegala.com/ CSS Mania http:

16×16、22×22、32×32、48×48、64×64、128×128までの各サイズがそれぞれ600個以上、全合計で3600個ぐらいある無料で利用可能なアイコン集、それが「Crystal Clear」です。クリエイティブコモンズライセンスで提供されており、PNG形式で提供されています。 ダウンロードは以下から。 Everaldo.com : Crystal Icons http://www.everaldo.com/crystal.html アイコンの一覧は以下から見ることができます。 Crystal Clear - Wikimedia Commons http://commons.wikimedia.org/wiki/Crystal_Clear もともとは以下の画像のように、LinuxのKDEのために作られたアイコンセットと言うことで、そのライセンスが適用されているようです。

サイトをデザインする際や、ソフトウェアのツールバーなどにも利用可能。いろいろな種類のアイコンがあるので、とりあえず持っておけばいつか役立つことは確実。 含まれている全種類のアイコンのプレビューは以下の通り。 famfamfam.com: Silk Icons Preview http://www.famfamfam.com/lab/icons/silk/preview.php ダウンロードは下記から。 famfamfam.com: Silk Icons http://www.famfamfam.com/lab/icons/silk/ ほかにもこのサイトには無料で利用できるアイコンがあります。 famfamfam.com: Mini Icons http://www.famfamfam.com/lab/icons/mini/ famfamfam.com: Flag Icons http://