こんにちは。はてなデザインチームの 
id:kyabana です。
4/1はエイプリルフールだったので、いたるところでお祭り騒ぎのようでした。
エイプリルフールに便乗しているサイトまとめ2014年版 - GIGAZINE
その日は、はてなにもエイプリルフールが訪れていて…
嘘をつきたい人と、気持ちよく騙されたい人をマッチングし、エイプリルフールにより年に1度行われるオンライン上のお祭り（マーケティング）を活性化して、嘘エコシステム（Ecosystem for Hoaxes）の循環を加速させる新サービス「はてなだまされまスター」をリリースいたしました。 嘘主と騙され手をマッチング！ 嘘エコシステムの循環を加速させる新サービス「はてなだまされまスター」をリリースしました - はてなの日記 - 機能変更、お知らせなど
自然と集まってくるエイプリルフールネタにだまされましたの気持ちを表す「だまされまスター」をつけましょう、というサービスです。
はてなブックマークのサブカテゴリ + はてなスター + はてなブログのお題
「はてなだまされまスター」は新サービスとは言うものの、新しくなにかを開発したというわけではなく「はてなブックマークのサブカテゴリ『エイプリルフール』に、はてなスターを表示してCSSでデザインを変更したもの」です。くわえて、はてなブログのお題を使って簡単に嘘記事を投稿できるようにしました。
はてなブックマークのサブカテゴリとは
はてなブックマークのカテゴリページに、より範囲を限定したジャンルやワードから人気／新着エントリーを確認できる「サブカテゴリ機能」を追加しました。範囲を限定することで、これまで読み逃していた記事を発見しやすくなります。
新しい視点で記事を発見！ カテゴリページに「サブカテゴリ」を新設しました - はてなブックマーク開発ブログ
はてなブログ/ダイアリーでスターを変更する方法
はてなスターの画像は、自分の好きなものに変更できるのをご存知ですか？ 「はてなだまされまスター」でも、スターを専用の画像に差し替えています。その変更方法をご紹介します。はてなブログのはてなスターの構造は、以下のようになっています。
※おおよその構成です。id、classを網羅しているわけではありません。2014.04.04現在の構成。
はてなスターの代わりに使いたい画像をインターネット上にアップロード（はてなフォトライフなど）してから、設定画面に次のようなCSSを追記します。
.hatena-star-star-image { background-image: url(はてなスターの代わりに使いたい画像のURL); }
すると上の構成図のimg.hatena-star-star （スター画像）が置き換わります。
カラースターの変更やAddボタンの変更方法などは、こちらをご覧ください。
はてなスターのボタン画像を変更する - はてなダイアリーのヘルプ
だまされまスターはこういうコードで変更しました
「だまされまスター」は、上記のスター画像を変更するCSSのほかに、もともと指定されているCSSを打ち消したり、img.hatena-star-user （プロフィール画像）やimg.hatena-star-star （スター画像）に大きさや位置の指定をしたりする次のようなCSSを用意しました。.hatena-star-star-container a { display: inline-block; vertical-align: middle; width: 52px; height: 52px; position: relative; } .hatena-big-star-star-container { width: 48px; height: 48px; position: relative; } .hatena-big-star-star-container > .hatena-star-star { background: transparent; } .hatena-star-star { padding: 0px; border: none; width: 48px; height: 48px; position: absolute; top: 0; left: 0; } .hatena-star-user { padding: 0px; border: none; border-radius: 0; width: 16px; height: 16px; position: absolute; top: 30px; left: 17px; }
また、高解像度のディスプレイに対応するため、実際に表示される大きさの2倍の画像を用意しました。
| 変更前 |  |
|---|---|
| 変更後 |  |
すると、ビックリした星の口からプロフィールアイコンが覗くような見た目になりました。
| 変更前 |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 変更後 |  |
|
 |
 |
 |
 |
この「だまされまスター」は、はてなブログやはてなダイアリーでも設置することを想定しているので、以下の1行をはてなブログの、ブログの管理画面>デザイン>カスタマイズ>デザインCSSの欄の1番上に貼付けて「変更を保存する」ボタンをクリックで設定できます。
@import "[]http://s.hatena.ne.jp/images/aprilfool2014/damasare.css[]";
はてなダイアリーの場合は、こちらをご覧ください。
以上、「はてなだまされまスター」についてと、はてなスターのカスタマイズ方法でした。はてなスターをあなたのブログにあわせてカスタマイズしてみるのはいかがですか？
デザイナーを募集しています
新卒デザイナー職エントリー締め切りは 4/24（木）正午 です。キャリア採用は随時行っています。
