DIVE INTO HTML5というサイトを見つけました。 HTML5でサイトを作っていますね。フォントには@font-faceを使って、EOTファイルを使っています。 HTML5からWeb Fontsとして、サーバにフォントファイルをアップロードすることで、ユーザのPCにインストールされていないフォントでも利用できますが、IEはライセンス情報を埋め込んだ特殊なフォントファイル（EOTファイル）のみ認識するため、別途EOTファイルの作成が必要です。その対応をしているようですね。 デザインフォントに見えるところも、テキストになっているので、なかなかいい感じです。 DOCTYPE宣言と文字コード指定もシンプルですね。 HTML5の参考に、ぜひ見てみてください。 Dive Into HTML5 ウィンドウのサイドにFollow meボタンをつけました。と思ったらフォロワーが一気に、いつもより多い

jQuery Wisdomというサイトで、テーブル周りの素晴らしいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 graphTable: graph data from HTML table using flot HTMLのテーブルデータからグラフを作ってくれる tableRowCheckboxToggle jQuery Plugin 行をクリックすることでチェックボックスのオンオフを切り替えられるようにするプラグイン UI Table Edit jQuery Plugin セルをクリックすることで編集可能にするプラグイン Colorize – jQuery Table Plugin マウスオーバーした列の背景をカラーリングしてくれる Animated Sortable Data Table jQuery plugin – jTPS テーブルにページネーションやソート機

Smashing Magazineで、WordPressのコーディングテクニックが紹介されています。 これは自分的にもタイムリー。ざっとご紹介しますね。 エントリーごとのスタイルを変える post_class()を使って、「.henry」「.sticky」「.category-tutorials」「.tag-wordpress」といったクラスにCSSを指定できるようにする。post IDでは例えば「#post-876{} 」にCSSを適用できる 関連するエントリーをサムネイル付きで表示する PHPの画像リサイズスクリプトであるTimbThumbを使って、画像を40 x 40pxにリサイズ トップページの見せ方を変える 新着3件のエントリーを、他と違ったデザインで見せるテクニック 複数のループを使う WPの標準機能である「rewind_posts()」を使って、1番目のループをリセットし、2

遅いエントリーですが、Design Reviverで有料のテーマに匹敵するフリーのWordPressテーマが紹介されています。 ざっといくつかご紹介。 ↑はSubtly Made Phyto WP Premium Theme KeKo Zinmag Futura 背景やサイドバーのあしらいに気の利いたものが多いですね。 ぜひダウンロードして使ってみてはいかがでしょうか？ » 20 free WordPress themes with premium-like functionalities 今日はバウムクーヘンとパンとハーゲンダッツしか食べてないまま一日を終えそうです。おにぎり食べたい。

WOO THEMESで、WooFunctionという商用でも無料で使えるかっこいいアイコンが配布されています。 ↑のような感じでたくさんあって、かなり使えそうですね。 Share these icons: If you find these icons useful we’d like you to pass them on to other who you think might appreciate the set. The URL to share is: http://www.woothemes.com/2009/09/woofunction/. Important: You must link to this article when sharing the Icons, you must not upload these files anywhere else. This ic

webdesigner depotで、オーガニックなWebデザインの作り方が紹介されています。 ざっとご紹介。 ↑はMooi 凝った木のパターンをうまく使って、鮮やかな赤を加えており、オーガニックなイメージを逸脱しないデザインになっている Saddleback Leather Company オーガニックなデザインを考える時に、紙や木、布を使うことはよく考えるが、レザーのような素材はあまり使われない。古地図とマッチしているいいデザイン VixML 青いイメージと丸みのあるデザインで構成されたデザイン Mathieu FURNON 全体的な色や葉、空などがうまく調和したサイト Agami Creative 水彩画タッチの画像と、深くて鮮やかなヘッダの色がオーガニックなイメージを伝えている より自然でオーガニックなサイトが今後増えてくるかもしれませんね。 その他のリストは以下からどうぞ。 »

Pro Blog Designで、WordPressをカスタマイズして自分のものにする方法が紹介されています。 ざっとご紹介。 1. カスタムのgravatarを使う 2. コメントをスタイリングする 3. アバウトページを充実させる 4. フッターを効果的に使う 5. ユニークな404ページを作る 6. SNSのコンテンツを組み入れる 7. 著者のプロフィールを公開する 8. 読者に参加してもらう 9. 使いやすくて全体を網羅するアーカイブを用意する 10. ログインページを自分だけのデザインにする それぞれ、参考になるチュートリアルやツール、素材と、例となるサイトが紹介されています。 いろいろと参考になると思うので一度見てみてください。 » 10 Ways to Customize and Personalize your WordPress Blog snow leopardを勢いで

wpbeginnerで、WordPressを高速化するテクニックが紹介されています。 いくつかご紹介しますね。 ・キャッシュする WP Super Cacheプラグインを使ってページをキャッシュ ・直リンクを禁止する 以下の.htaccessで直リンクを禁止 #disable hotlinking of images with forbidden or custom image option RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC] #RewriteRule \.(gif|jpg)$ %u2013 [F] #RewriteRule \.(gif|jpg)$ http://www.yourdomain

HONGKIATで、新しいWordPressのテクニック&ハックがまとまっています。 いくつかご紹介しますね。 » Antivirus for WordPress 悪質なインジェクションを関知して警告してくれる » Custom ‘Read More’ and Thumbnailed Recent Posts ”もっと読む”メッセージとともに最近のエントリーのサムネイルを表示 » Add shadows to a range of objects 画像やdiv、blockquoteにシャドウをつけるプラグイン。↑のキャプチャはこちら » Alternative way to display dates – WP-RelativeDate 日付を「今日」や「昨日」、「2日前」といった表示にできる » Vote Post Up/Down Diggで見られるようなVote（投票）ボタンをエントリ

WPSHOUTというサイトで、WordPressをカスタマイズするTipsが紹介されています。 いくつかご紹介しますね。 ・カスタムフィールドを使わずにトップページにリサイズされたサムネイル画像を表示する WebDeveloperPlusを参考に実装 ・ピックアップコンテンツギャラリーをjQueryで実装 雑誌のようなデザインの要素の一つに、画像を使った特集コンテンツがある。 WebDeveloperPlusをWordPress用に書き直している ・エントリーの下にソーシャルメディアへのリンクを配置する ソーシャルメディアアイコンはA quick Googleから探せる。 DeliciousやDiggへ追加するパラメータの付け方を紹介 ・人気のあるエントリーを表示する WP-PostViews pluginが便利 結構いい感じのが揃っていると思うので、一度見てみてください。 » 10 Ti

GIANT ROBOTSというサイトで、かっこいいボタンを作る方法が紹介されています。 まずPhotoshopを使ってボタンをデザインしていく方法が書いてありますね。レイヤースタイルが細かく書かれているので参考になるのではないでしょうか。 CSSでの実装方法も書いてあります。↑のキャプチャのCSSスプライトはとてもわかりやすいですね。 一度見てみてください。 » How to make really nice buttons 今日も超いい天気ですね〜。暑い。今週もがんばりましょう。

SOHTANAKAで、CSSを軽くするステップが紹介されています。 同じスタイルを書くときにコロンで区切って書く方法や、同じソースはまとめて1カ所に書く方法、idとclassをうまく使う方法、CSSの簡略表記、@importでスタイルを読み込む方法などがまとまっています。 基本的な例が多いですが、悪い例とともにこうしたらよくなる、というソースが書いてあるので参考になるのではないでしょうか。 一度見てみてください☆ » 5 Step Style Sheet Weight Loss Program 初めて109に入ってみたぞ。セール中だったしなんかすげえ楽しかった♪

WebDesignBoothというサイトで、SEOの順位を上げるためのWordPressプラグインが紹介されています。 ざっとご紹介。 » All in One SEO Pack ページごとにtitle、description、タグを設定できる » Broken Link Checker リンク切れをチェックしてくれる » Google XML Sitemaps Generator Googleサイトマップを作ってくれる » SEO Friendly Images 画像に適切なaltをつけてくれる » No Self Pings 自サイトへのpingbackを削除してくれる » Enforce www. Preference wwwありなしを統一してくれる » Platinum SEO Pack All in One SEO Packと同じ機能を持ち、さらにオプションを設定できる。しかし、

HowToMakeMyBlogというブログで、ダウンロード数の多いWordPressプラグインTOP18が紹介されています。 それぞれ20万回以上ダウンロードされているようですね。 ざっといくつかご紹介。 » NextGEN Gallery イメージギャラリープラグイン » WP Super Cache 静的なHTMLファイルをはきだすキャッシュエンジン » Contact Form 7 シンプルだけどフレキシブルなコンタクトフォームプラグイン » Viper’s Video Quicktags YouTubeやVimeoから簡単に動画をポストできるプラグイン » WP-PageNavi 機能的なページングを追加できるプラグイン その他のリストは以下からどうぞ。 » Top 18 most downloaded WordPress plugins ever ちょいまったり、と。やっぱり早起

devSnippetsで、WordPressをこじゃれたものにするためのテクニックが紹介されています。 ざっといくつかご紹介。 » Implement a Nice & Clean jQuery Sliding Panel in WordPress 2.7+ ログインパネルをスライディングパネルにして短いWelcomメッセージを表示 » jBreadCrumb パンくず要素が長すぎる場合にスマートに折り畳んでくれる » Sliding Boxes and Captions with jQuery マウスオーバーするとスライドして画像が切り替わるインターフェース » Fantastic News Ticker Newsvine-like using Mootools mootoolsを使って縦にスクロールするニュースティッカー » J Post Slider 画像をローテーションしたりして記

HONGKIATで、かっこいいWordPressテーマが紹介されています。 ざっといくつかご紹介。 ↑はFREEmium。 WaterColor Deskspace Maasahan Zinmag Futura かなりかっこいいデザインが揃っていますね。 その他のリストとダウンロードは以下からどうぞ。 » 41 Great Looking Free WordPress Themes 今日はいい天気ですねー。超気持ちいい。

dzineblogで、いいデザイナーになるために参考になるサイトがたくさん紹介されています。 ざっといくつかご紹介。 チュートリアル » Tutorial9 » Photoshop Lady » HV Designs » Tutorial Dog デザインフォーラム » Designers Talk » Graphic design forum コミュニティー » Humble Voice » Deviant Art » Carbonmade デザインブログ » Design Melt Down » A list Apart » Design Mag 有名なものからちょっとマイナーなものまで、よくまとまっていますね。 ぜひ見てみてください。 » 50 Sites That Will Help You To Become a Better Designer MacBookのスピーカーの音がよ

ランチに行ったカフェ。イタリアンバールってことで、パスタやピザのメニューが豊富ですね。 ↑は海老とマッシュルームのトマトクリーム。めちゃうまかったぞ。 場所は裏原ですね。まだ道覚えてないけど、次は夜に行きたいなー。 店内の雰囲気もとてもいいですよ。 » DOUP CAFE 行ってた学校の友達と飲み。楽しかった。先生の結婚が決まったり、みんな順調そうでよかった。2軒目で久々にイタリア人と話したぞ。まだいけるもんだ。

My Ink Blogで、「4 Principles of Good Design for Websites」と題していいデザインをするための4原則が紹介されています。 4原則とは、Contrast（コントラスト）・Repetition（反復）・Alignment（整列）・Proximity（近接）のことですね。 それぞれ具体的なサイトを挙げて説明しているのでわかりやすいですね。 例えばコントラストだと、「画像のコントラスト・色のコントラスト・フォントのコントラスト」が紹介されていて、↑のキャプチャの「Instabox」は、画像のコントラストをうまく使った例。色は落として、画像の大きさを強調しているから目を引きますね。 Final Thoughtsとして、 It’s unbelievable how much better your designs will become when you

「AREA 1」で、60 Layout design tutorialsと題してレイアウトデザインを学ぶためのチュートリアルが紹介されています。 12ページあって見るのは大変ですが、WordPressデザインやポートフォリオサイト、コーポレートサイトなど、クールなデザインレイアウトのチュートリアルがたくさん見られます。 以下にざっとご紹介。 ↑はGreenPress WordPress Theme Design。 Website Gallery Layout Design Tutorial Site Blog Design Chocolate Pro WordPress Style Layout Portfolio Web Layout #5 Tutorial Wedding Layout その他は以下からどうぞ。 » 60 Layout design tutorials デザインに迷った