以前にWordPressでOGPを実装させるプラグイン「WP-OGP」について書いたことがありますが、このプラグインはスペルミスがあったりするなど、ちぃっとばかり不完全な仕上がりのままアップデートされることもなく放置されている状態。 で、そんな「WP-OGP」をベースに改良を加えられたプラグイン「WP-OGP Customized」があったので、そちらを導入することにしました。 「WP-OGP Customized」は「WP-OGP」の困ったちゃんなところを修正してくれている上に、さらに機能的にもパワーアップさせてあるプラグインです。 ベースとなっている「WP-OGP」だと、設定で入力できるのは[fb:admins]と[fb:app_id]の2項目のみだったんですが、「WP-OGP Customized」では、それに加えて以下のことができるようになっています。 [og:descriptio

現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS

iPhoneやらAndroid端末の普及に伴って、徐々にWeb側の新標準になりつつある「レスポンシブデザイン」。 そんな「レスポンシブデザイン」の美しい海外系Webサイトを9つ集めてみました。 いずれのサイトも見事なレスポンシブ具合です。 Microsoft Microsoft Home Page | Devices and Services Bigyouth Big Youth Gareth Lawn Gareth Lawn // Print & Web Design SIYELO Web design and development : Siyelo Build Build 2012 Coworchicago.com Coworkchicago.com Fiafo We bring ideas to life on Mobile, Web and the Cloud | fiafo™

コグレさん(kogure)とするぷくん(@isloop)によるプロブロガー本や立花さん(@ttachi)のノマド本なんかの影響もあるのか、最近またブログやろうかなという声がチラホラ聞こえてきたりします。 そんなブログ熱に冒された人たちの参考になりそうなギャラリーサイトがありましたよ。 それが、こちらの「Blog Design Archive」というサイト。 知っている人はすでに知っているサイトなのではないかなと思われますが、国内のユニークな、あるいは優れたブログのデザインをまとめることをコンセプトに、現時点で250近いブログをサムネイルで見ることができます。 そういえば、Webデザインのギャラリーというのは今までもありましたが、ブログに特化したギャラリーサイトというのは今までになかったかも。 トップから延々とつらつら見続けるのもいいですが、ブログの背景色やキーカラー、レイアウトでフィルター

昨日公開した当ブログのスマートフォン版デザイン。 このデザインを作成するにあたって、ちょっとカスタマイズしたのが、Facebookのソーシャルプラグイン「Like Box」です。 デフォルトだと固定幅レイアウトになるので、スマートフォンサイトでは可変幅になるようCSSで調整しました。その実装方法をご紹介します。 Page Pluginでは不要です 追記 「Like Box」が取下げられ、その代替として「Page Plugin」というソーシャルプラグインが登場しました。 こちらのプラグインは、最大幅が500pxしかありませんが、自動的にデバイスに合わせて幅が可変されるようになっており、本記事で紹介しているカスタマイズが不要になります。 「Like Box」は今後一切使えなくなりますので、速やかに新しいコードへ移行することをオススメします。 実装するとこんな感じになります! まずは縦向きで表示

うちでは1台はSparrowで、もう1台ではブラウザでGmailを開くようにしているんですが、ブラウザでGmailを開いたところ、なんか新しい機能が追加されたというお知らせが。 どうやら、画面遷移をせずに新規メールを書くことができるようになったみたいですね。 こちらが表示されたお知らせ。「新しい作成画面のプレビュー」。 受信トレイから直接メッセージを作成でき、すっきりした使いやすいデザインになり、入力しながらメールチェックでき、1度に2通のメールを作成することもできるほど便利とかなんとか。 「Try it now」をクリックすると、こんな感じで新しい作成画面が使えるようになります。 イメージ的にはFacebookのメッセージ(チャット)をブラウザで利用している時の状態に近いですね。Facebook使ってる人にしかわからないかもしれんけど。 添付ファイルやらリッチテキストの書式設定やらは、メ

こんな拡張機能がGoogleオフィシャルで提供されていました。 Webページを高速化するためのポイントを、解析して提案してくれる「Page Speed Insights」という拡張です。 Webページを高速化させたいけど、どこをどうしたら･･･という人には、いいツールになりそうですねー。 Chrome ウェブストア – PageSpeed Insights (by Google) 導入するのに特別なことは一切必要ありません。Chromeウェブストアでインストールするだけです。 拡張機能のインストールが完了したら、Chromeの[表示]→[開発/管理]→[デベロッパー ツール]を立ちあげてみましょう。 すると、デベロッパーツールのタブの一番右端に「PageSpeed」というのが追加されます。 あとは分析ボタンをクリックしてやれば自動的にリロードされ、どの部分が表示スピードの妨げになっているの

いやー、これはかなり面白いアプリが出てきましたね。 リクルートが無料で提供開始したカメラアプリ「cameran」。 名前が「さくらん」っぽい感じなのですが、それもそのはず人気写真家にして「さくらん」の監督を務めた蜷川実花氏が監修したカメラアプリなのです。 cameran 蜷川実花監修カメラアプリ このアプリを使って写真を撮れば、あの蜷川実花の極彩色にいろどられた世界観が簡単に誰にでも再現できてしまうというんですから、そりゃダウンロードするでしょ。 アプリを立ち上げると、ご覧のとおりあの蜷川ワールド。個人的にも写真家蜷川実花の色使いが非常に好きで、以前一緒に仕事をしていたモデルちゃんが参加した写真集「over the rainbow」を持っているんですが、デザイン仕事のときなんかに活かしたいなーと何度も見返したりしてます。 まぁ、つってもなかなかあの色使いの感性は身につくものじゃないんですけ

Firefox 16ユーザーがMTでの更新時に、カテゴリを選択できなくなったという不具合が発生。その修正パッチがリリースされました。 将来的なことを踏まえての話ですが、MTユーザーは今回リリースされた修正パッチを必ず当てておくのが無難かもしれないっていう話です。 というわけで、修正パッチがリリースされました。 これはFirefox16以降のブラウザで、ブログ記事編集画面でのカテゴリ選択、ウェブページ編集画面でのフォルダ選択、アイテムアップロード画面でのフォルダ選択などをしようとすると、それができないというバグに対応したものです。 一見すると修正パッチの対象はMTの指定があったバージョンを使っていて、なおかつFirefox16以降をメインブラウザとしているユーザーとも思えますが、実はこれ、メインブラウザがFirefox16以降でなくても、対象指定バージョンのMTを利用しているなら当てておくべ

今も根強く利用されているFacebookの「Share」ボタンですが、「Like Button」への統合が進み、ついには公式の「Share」ボタンは廃止となりました。 公式では代替手段として「sharer.php」を紹介していましたが、とうとうそのドキュメントが削除され、いよいよ「sharer.php」の存続も危うい状況かもしれません。 追記/ 2013年4月24日 Feed Dialogでサムネイル取得の部分がうまく取得できていなかったため、修正しました。 また、現在はLike Buttonにもカウントが反映されるようになっています。 そこで、同様の動作をする方法として実装をおすすめしたいのが、「Feed Dialog(フィードダイアログ)」です。 実装すると、ページ遷移やポップアップすることなく、上図のダイアログが表示され、リンクをシェアすることができるようになります。 なぜこちらをお