VIVABlog

Links for 2010-03-18 [del.icio.us]

2010-03-19T00:00:00-07:00

AppleScript HTML
AppleScript のソ−スコードを、スタイルを再現する HTML に変換するアプリケーション

Links for 2010-03-13 [del.icio.us]

2010-03-14T00:00:00-08:00

Launchy | Get Launchy at SourceForge.net

Tweetmemeボタンをブログ・RSSに表示する方法

2010-03-10T03:46:57Z

TweetmemeボタンをブログやRSSに埋め込むと、エントリーのTweetされている数が表示されたり、観覧している人がTweetしやすくなったりするということで、導入しているブログが増えてきました。

ここではWordPressとMovableType他ブログでの、Tweetmeme導入方法を簡単に説明します。

WordPressをTweetmemeに対応させる

TweetMeme Button « WordPress Pluginsをインストールして有効化。

Display – アイコンの表示設定
Position – アイコンの位置設定
Styling – アイコンの位置の微調整

RSSのエントリーの最後にだけ表示させたい場合は、Displayを「Display the image button in your feed…」のみチェックして、RSS Positionを「Before」にします。

MovableTypeをTweetmemeに対応させる

MTや他のブログの場合は、下記を参照にして手動でテンプレートに記入する形をとります。

MT3.xのRSSには、以下のようにして<description>内に記入しています。

<![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;"><a href="http://api.tweetmeme.com/share?url=<$MTEntryPermalink encode_xml="1"$>&service=bit.ly"><img src="http://api.tweetmeme.com/imagebutton.gif?url=<$MTEntryPermalink encode_xml="1"$>" height="61" width="51" /></a></div>]]>

Links for 2010-03-04 [del.icio.us]

2010-03-05T00:00:00-08:00

CSS3 Dropdown Menu

Links for 2010-02-26 [del.icio.us]

2010-02-27T00:00:00-08:00

Social Media Network Icons | Komodo Media
Konjak Translation Plugin
mt4用翻訳プラグイン

Links for 2010-02-22 [del.icio.us]

2010-02-23T00:00:00-08:00

iPhoneのメモ帳をモチーフにしたWordPressテーマ

2010-02-19T16:07:38Z

n.designから、iPhoneのメモ帳をモチーフにしたデザインのWordPressテーマ「Notepad」がリリースされました。今までの最高傑作といっても良い程の素晴らしい出来となっていて、この先しばらくは至る所で目にすることになりそうです。

[ Notepad ]

Links for 2010-02-16 [del.icio.us]

2010-02-17T00:00:00-08:00

Drop Box - Google Chrome 拡張機能ギャラリー

Links for 2010-02-13 [del.icio.us]

2010-02-14T00:00:00-08:00

CSS3 Gradient Generator

WIndows用のカラーピッカー「ColorMania」

2010-02-13T16:00:51Z

Windowsで使えるカラーピッカー「ColorMania」は、フリーソフトでありながらもなかなか多機能で、カラーの生成、生成したカラーパレットの保存、カラーでのフォントの見え方チェック等が行え、デザインもまとまっていて使いやすくてオススメです。

スポイトツールは、クリックしたままで対象までドラッグして使います。

[ ColorMania ]

CSS3のグラデーション生成ツール

2010-02-22T18:34:16Z

CSS3で可能になったグラデーション。
角丸やtext-shadowと組み合わせれば、画像を一切使わずに立体的なボタンを作成したりすることもできます。

グラデーションは手動でやるにはやや面倒なので、こういったジェネレーターを利用すると良いでしょう。-webkit-gradient と -moz-linear-gradient のどちらにも対応しています。

適応する際は、background: -moz-linear-gradient (); background: -webkit-gradient (); とします。

[ CSS3 Gradient Generator ]

Tumblrを上手に使うコツ

2010-02-08T05:58:24Z

Twitterと連動させる

TumblrとTwitterを連動させると、Tumblrの投稿をTwitterに通知したり、TwittterのつぶやきをTumblrのダッシュボードに表示できたりします。

ここで1つ注意したいのは、連動させる設定にはTumblr Dashbordの「Account > Preferences」から行うのと、「Customize > Services」から行うのと2つの項目が存在するので、Twitterアカウントに変更があった場合は、両方の項目を変更する必要があるということです。

「ちゃんと設定はしたハズなのに、投稿が反映されていない。」といった場合には、一度見直してみましょう。

便利なツール

Firefox – tombloo
Google Chrome – Taberareloo
Adobe AIR – Tumblweed

アップローダーの画像のリダイレクト対策

一部の画像アップローダーで、アップされている画像URLをTumblrに投稿してから暫くしてその画像のリンク先にアクセスすると、出会い系の胡散臭いサイトにリダイレクトされてしまうという事がありました。恐らく、ログが流れて画像が無くなる（404）と出会い系のサイトにリダイレクトする設定にしているのでしょう。

こういった画像アップローダーの画像を貼る際には、一度投稿した後で、Editから画像URLを削除します。こうすると、Amazonのやっているストレージサーバーにアップされた画像にURLが切り替わるので、ログが流れてもリンク先が消えたり、変なサイトに飛ばされたりといったことは無くなります。

（くれぐれも、著作権関係には配慮を怠らないようにしてください。）

text-shadowで文字を立体的に、または陥没させる

2010-02-04T13:50:20Z

（text-shadowを使用した例）

フォントの上下左右に影を作って、立体感や陥没を作り出すCSSプロパティ「text-shadow」。

昔はダサめのサイトでしか使われていなかったのに、ここ最近は、デザインに凝ったセンスの良いサイトでは必ずといって良いほど使われるようになりました。

いきなりtext-shadowを見掛けるようになった理由としては、ぼかしが値が指定できるようになった事、IE以外のブラウザ（Firefox, Google Chrome, Safari, Opera）でサポートされた事、マシンパワーの飛躍的な向上とブログの普及に伴って、重いサイトへの耐性が出来た事などが考えられますが、ただ単に「流行」というのもあるでしょう。

どちらにしても、今が使い時なのは確かです。

text-shadow: Xpx Ypx Zpx #000 ;

X=左右の陰影。プラスで右、マイナスで左方向へ。
Y=上下の陰影。プラスで下、マイナスで上方向へ。
Z=ぼかしの大きさ。

値は何がよいのか分からないという人は、まずは、全て1pxでやってみて、値を変更しつつ自分のサイトに合わせるのが良いでしょう。このプロパティは、特に平面で単一なカラーの背景よりも、グラデーションやグラフィカルな背景で使うとより効果的です。

text-shadow: 1px 1px 2px #999 ;

text-shadowプロパティ

text-shadow: 0px 1px 1px #fff ;

text-shadowプロパティ

text-shadow: 0px 0px 2px #000 ;

text-shadowプロパティ

Webサービス会社の自作サーバー

2009-11-27T07:35:42Z

Cnetの記事にて、はてな、アメーバピグ、pixivなどのサイトで実際に運用している自作サーバーの詳細が公開されています。その中でも、pixivのサーバーは、AthlonにECC無しメモリに玄人志向の電源と、非常に身近に感じる構成。HDDは、2.5インチののものが多いです。

マザー：GA-MA785GM-US2H
CPU：Athlon II X4 605e（TDP45W）
MEM：DDR2-800 8Gバイト（ECCなし）
HDD：HTS545016B9A300（2.5inch 160Gバイト）
電源：玄人志向 KRPW-V400W

自宅サーバーをする人は、これらを参考にすると良いかも知れません。

この他、面白かったのが、サグールという会社のサーバー置き場。
データセンターではコストがかかるということで、一軒家を借りてサーバー置き場にしているとのことです。火事やトラブルに気を使えるのならば大変安く上がるようです。

当然メリットばかりではなく、騒音や廃熱、電気代、セキュリティ、サーバーダウン時の対応等のデメリットもあるので、個人ブログレベルでは、やはりレンタルサーバーを借りるのが最善だと言えますが、Webサービスをしたい人には、サーバーリソースを自由に使える自宅サーバーが良いでしょう。

[ はてな、アメーバ、pixivら、注目企業の自作サーバを一挙公開 ]

よさげなWordPress テーマ18種類

2009-11-05T07:51:48Z

フリーのWindows用アイコンエディター

2009-10-27T10:08:59Z

IcoFX

Mac用アイコンを読み込みWin用アイコンに変換したり、画像を読み込んでアイコンに変換することが可能。40以上のエフェクトで様々なアイコンを作成可能と、バランスのいいアイコンエディター。

Greenfish Icon Editor Pro

Photoshopライクなアイコンエディター。
レイヤーを使えるので、複雑なデザインにも対応できる。

Sib Icon Editor

ICO, ICPR, BMP, JPEG, PNG フォーマットに対応。多機能とシンプルの中間的なUI。

LiquidIcon XP

ドット打ちでアイコンを作成するのに最適な、シンプルアイコンエディター。

(via webdesignbooth)

無料で使えるセレブ系写真「picapp」

2009-10-23T09:41:27Z

ブログ向けの写真素材サイトとして「picapp」という所を教えてもらったのですが、想像したものと違って、見たことのない海外セレブの写真ばっかり。どうやら、パートナーサイトからの写真提供のみで、素人の投稿写真などは無いみたい。

もう少し充実しないと使う気にはなれませんが、ブックマークしておく？

[ PicApp - the best content for the best publishers ]

貼ってみた例↓