waterapplemintrestchainspringvine2009.07.15.ソーシャルブックマークのボタンをつくる最近よく見かけるソーシャルブックマークのボタンを付けてみることにしました。ブックマークするための複数のボタンをまとめて設置できるサービスは、ウェブ上にたくさんあります。簡単すぎておもしろくない。ボタンの形状は、たいていブックマークサービスのアイコンを使用しているので、ボタンに見えるものもあるし、見えないものもある。並べてみても統一感がありません。そんなわけで、当サイトに合わせてアイコンから作ってみました。それぞれのアイコンを作成。サイトのイメージに合わせてあまり目立ちすぎない程度に色調を統一。サイズもそろえてボタンふうにアレンジ。通常のアイコンとマウスを重ねた時用の二種類用意します。クリップ次に、クリックしたときにブックマークサービスに飛んで、タイトルやurlを入れてくれるようにコードを設定します。ここで使ったブックマークサービスは、上から順にtwitter、delicious、Yahoo!ブックマーク、Googleブックマーク、はてなブックマーク、livedoorクリップ。/><span>livedoorクリップ</span></a></li></ul>JavaScriptは使わないのと、WordPlessを前提にしてあります。hidden;}リストにしたソーシャルブックマークボタンを横並びに変えます。ボタンのバックグランド画像(ボタン-02)を設定し、その上にボタンイメージ(ボタン-01)を重ねます。ボタンにマウスカーソルを重ねたとき、ボタン-01を非表示にして、その下のボタン-02が現れるようにします。同時に非表示にしてあったボタンタイトルを表示。作ったので、フリーアイコンとして公開しておきます。気に入ったら使ってみてください。リクエストがあれば他のボタンも作ります(気長に待ってもらえればですが・・・)Downloadsocial_bookmarks.zip(12kb)わざわざこんな手間をかけるより簡単にソーシャルブックマークボタンを並べたい人は、ネット上を探してみて下さい。ブログに貼り付けるだけで設置できるのがいろいろ見つかります。ブログ−:WordPress用:ソーシャルブックマークボタンの設置とブックマーク数を表示する方法かずブログ:ブログ記事にソーシャルブックマークの登録アイコンをたくさん追加する(forMT)MovableType用ですが、基本は同じ。Packとっても美しいブックマーク用アイコン。日本向けじゃないのが残念。仕事のプレゼン用にiPadを購入。2011年作成の設計事務所のウェブサイト。要望に合わせて極めてシンプル。北海道フィンランド協会主催のフィンランド語講座です。大東流というのは合気道の元祖ともいえる武道です。2012年リニューアル。写真以外のアイコンなどもすべて作っています。「父」の字をモチーフしたロゴマークも作らせていただきました。2008.07.27。