GoogleやYahoo!などの検索エンジン用にウェブサイト（ページ）を最適化する際に役立つ、日本語対応の無料ツールを紹介します。 サイトのSEOに関する基本情報

2009年にリリースしたものを中心に、WordPressのテーマファイルの2009年上半期100+α選を紹介します。

オリジナルのWordPressのテーマファイルを作成するために、簡単にカスタマイズができるシンプルなテーマファイル「Empty Canvas」をRubiqubeから紹介します。 Free WordPress Theme: Empty Canvas preview レイアウトはいたってシンプルで、プライマリナビゲーション、ヘッダ、コンテンツ、サイドバー、フッタで構成されています。 含まれている画像も、RSSと引用時の2つだけです。 Rubiqubeでは、他にもコーポレート用のWordPressのテーマファイルのフレームワークも配布しています。

ファイルタイプごとにアイコンを変更したり、外部リンク・訪問済みリンクのスタイリングなど、リンクの情報をサポートするスタイルシートのテクニックをDesigner Dairy Newsから紹介します。 8 CSS tips for better linking

WebResourcesDepotのエントリーから、特定のエリアのみ（キャプチャの右のエリア）をスクロールしても、同じ場所に表示するスクリプトの紹介です。 Smart Floating Banners デモ:1 デモ:2 スクリプトはjQueryをベースにしたもので、デモでは右に配置されたエリアの特定の一部のみをスクロールしても同じ場所に表示させています。 当サイトが配布している「Page Scroller（スムーズにスクロールするスクリプト）」と、同じ位置に表示するスクリプトの相性が悪い、というのをどこかのブログで見かけたのですが、これを使用すると特に問題無く実装できました。 Page Scrollerと合体させたデモ（「右パネルのtop」と「ページ下のtop」） Page Scrollerは、「$」ではなく「$j」を使用なので、下記のように変更しています。 <textarea name

ENHANCEのエントリーから、ユーザーの入力した内容をAJAXでチェックするフォームのチュートリアルを紹介します。 Creating an Ajax contact form - from start to finish デモ チュートリアルでは、HTML、CSS、JavaScript、PHPごとにサンプルコードが掲載されており、入力内容のチェックにはjQueryが使用されています。 フォームの各項目はolのリスト要素となっています。 olの順次付きリストは必須入力項目だけではないので違和感がありますが、divよりもいいのかな、と思ってきました。 デモではデータの受信状態まで分からないため、日本語で問題ないかどうかは不明です。

Photoshopのブラシ・プラグイン・パターン・テクスチャ・チュートリアルを数多く紹介しているPhotoshop Mosaicの紹介です。

WebTeckerのエントリーから、jQueryやPrototypeやMooToolsなどライブラリを使用するものや、単独で動作するアコーディオンのスクリプトを紹介します。 Great Accordion Scripts

SenCSS Introducing SenCSS デモ SenCSSは全てのエレメントに対して「縦のリズム(Vertical rhythm)」を大切にしており、クロスブラウザでのタイポグラフィ、フォームなどを重視して設計されています。 スタイルシートのリセットは「Eric Meyer's CSS reset」をベースにしており、一旦要素をリセットした後にスタイルの定義を行っています。 スタイルシートは英語圏内のため、英語に最適化されていると思いますが、縦のリズムを大切にする考え方は日本語においても非常に重要だと思います。 SenCSSのバージョンは現在0.4で、いくつかのバグがあるそうです。 Opera, Safari上での、pre, code, kbd, tt。

Free Icons Downloadから、ロイヤリティフリーのシンプルで、ブルー・グリーン・グレー・オレンジ・レッドとカラフルなセットが揃っているピクセルアイコンを紹介します。 Free Icons pixel style ダウンロードできるアイコンはgif形式となっており、サイズは9x9, 18x18の2種類、各色にトーンが異なる「normal」「over」がセットになっています。 グレーには「black」版があります。

Switch On The Codeのエントリーから、テキストエリアや画像のサイズをユーザーが自由に変更できるスクリプトを紹介します。 Generic Resizeable Container（画像） Resizeable Textbox, Part Tres（テキストエリア） テキストエリアや画像のサイズは、右・下のハンドルをマウスで操作することにより、縦横斜めへ変更できます。 テキストエリアをリサイズするスクリプトはパート3となっており、最初のバージョンは下記で公開されています。

Vandelay Website Designのエントリー「テクスチャや背景を作成する40のPhotoshopのチュートリアル」から、紙・木・石・布・水・金属・タイルなどいくつか紹介します。 40 Excellent Photoshop Tutorials for Textures and Backgrounds

mooSlide revampは、div要素のパネルをブラウザの上下の端から、スムーズにスライドで表示したり、フェードで非表示することができるスクリプトです。 mooSlide revamp デモ（Toggle sliderをクリック） オプションで、ボックスの高さ、スライドとフェードのスピード、不透明度など変更することができます。 mooSlide revampはmootoolsのプラグインで、動作にはmootools.jsが必要です。 対応ブラウザは、Fx2.0.0.14, IE6/IE7, Op9.2 and Safari for Windowsとなっています。 mooSlide revampは、以前紹介した「表示される動作が楽しいスライドのスクリプト -mooSlide」の改良版です。

テキストに光・メタル・木・3D・爆発・炎・氷などのエフェクトを使用したPhotoshopのチュートリアルの紹介です。 各サイトは英語ですが、キャプチャ付きで作成方法を説明しています。一部のサイトでは、PSDファイルをダウンロードできます。

Web Designer Wallのエントリーから、画像にテープ、ピン、クリップ、テキスト、フレームなどを使用してデコレーションするスタイルシートを紹介します。

NETTUTSのエントリーから、タブを上下にアニメーションで切り替えるナビゲーションのスタイルシートとjQueryを使用したスクリプトの紹介です。 タブ型のインターフェイスとしては、ちょっと珍しい動きをするナビゲーションです。

QuickRibbonは、指定されたコードを記述するだけで、自分のページにリボンを貼れるオンラインサービスです。 以前、紹介したFree Website Ribbon Generatorではシンプルなリボンでしたが、リボンの縁飾りや色など調整できるのが特徴です。 オンラインのリボン ジェネレーター Online Ribbon Generator Tool リボンの作成は簡単で、リボンのテキスト(日本語未対応)・フォントの種類・フォントの色、リボンの形状・色を指定し、リボンとテキストを作成します。 次に、設置するページの背景色を指定し、「Apply」ボタンをクリックすると、設置できるリボンを画面で確認することができます。 リボンの作成が完了したら、リボンのリンク先とtargetの指定を行い、「Generate Ribbon!」ボタンをクリックすると、ページに設置する際のコードが表示されます。

leigeberのエントリーから、スムーズにスクロールするサムネイルから拡大画像を表示する画像ギャラリーのスクリプトを紹介します。 Dynamic Image Gallery and Slideshow デモ slide.jsはjQueryやPrototypeなど他のスクリプトに依存することなく単独で動作するスクリプトで、動作環境はIE6/IE7, FF, Opera and Safariとなっています。 サムネイルはリスト要素となっており、オプションでは「拡大画像の格納場所の指定」「拡大画像の拡張子の設定」「スピード」などを設定することができます。

font.comのエントリーから、adidasやAppleなどの有名企業のロゴに使用されているようなフォントを紹介します。 ※実際に使用されているものをあるとのことです。 Famous Fonts 右側のタイポは、紹介されている各フォントの「Try Font」で、プレビューしたキャプチャです。