Posted on January 2, 2007 at 11:52 pm

はてなブックマークのデザイン編集機能

自由自在にデザインできる

お気に入り探しが目的でお正月からはてなブックマークを使い始めました。
とりあえずデザイン編集機能を使ってCSSをいじってみました。
せっかくデザインをいじれるんですもん。

はてなブックマークでは、HTMLの追加やスタイルシートのフルカスタマイズが可能な上、モジュールで好みの機能を追加することもできます。これら機能を利用することで、他にないオリジナルのブックマークデザインが可能となります。

[ はてなブックマークデザインガイド ]より引用
Accessed Date:2007年1月2日 23:10:46

はてなブックマークは思った以上にいろんなことができるみたい。

  • テーマの選択
  • ヘッダ色の変更
  • ヘッダ、フッタのカスタマイズ
  • スタイルシートのカスタマイズ
  • はてなモジュール

スタイルシートが編集できるってすごいですね。
やろうと思えばかなり自由度の高いデザインができそう。

でもミラーサイトにそこまでするのもアレなんで1番いじりやすそうなテーマ「hatena-mondrian」をベースに色を変えたりしてみました。

あれこれ非表示にしてみた

やっていいものかわかりませんが、CSSのフルカスタマイズが可能と公式のヘルプでも謳ってるくらいなので個人的にいらないと思ったものはサクッと非表示にしてしまいました。


はてなの利用規約には「本サービス利用上不適切な行為」として「当社が標準的に表示しているヘッダ、フッタ、広告及び著作権表示を当社の許諾なく非公開にする行為」を禁止しているそうです。
バナーとロゴは表示するようにしました。

はてなのバナー

PLAIN TEXT
CSS:
  1. #banner {
  2. display: none;
  3. }

はてなのロゴ

PLAIN TEXT
CSS:
  1. img.logo {
  2. display: none;
  3. }

ヘッダーの検索窓

PLAIN TEXT
CSS:
  1. form.searchform {
  2. display: none;
  3. }

カテゴリー

PLAIN TEXT
CSS:
  1. .category {
  2. display: none;
  3. }
  4. .category img {
  5. display: none;
  6. }

はてなキーワード

PLAIN TEXT
CSS:
  1. .keyword {
  2. display: none;
  3. }
  4. .keyword img {
  5. display: none;
  6. }

カテゴリーもキーワードもアイコンは背景画像じゃないんですね。

アイコンがあんまりかわいくないのでSilk Iconsに変えたいくらいでしたが。

ワタシははてブのカテゴリーもキーワードも使わないんで邪魔だなーと思ってしまったんですが他のユーザーの皆様的にはどうなんだろう?
個人的には非表示にした方がスッキリしていいかなって思いました。

なぞのはてなモジュール

気になるというかよくわからないのがはてなモジュールです。

ヘッダ、フッタにはモジュールを使うことができます。モジュールを使う事で、自動的にカレンダーを表示したりといった、いろいろな機能を簡単に実現する事ができます。

[ はてなブックマークデザインガイド ]より引用
Accessed Date:2007年1月2日 23:36:51

RSSモジュールで好きなRSSの最新情報も表示できるみたい。
なかなか面白いですね。
adsenseモジュールとcounterモジュールって有料なんですね!
ビックリ!

とりあえず完成

1から作ったらもっと楽しいかもしれませんがとりあえず完成。

はてなブックマークのデザイン編集機能

ちなみにキューブ型のかわいいアイコンは↓のものを使わせていただきました。

  • UtomBox » Blog Archive » My works

    • はてなブックマークははてなダイアリーの中のコンテンツのひとつとして成り立たせるためにこれだけ自由にデザインできるのかな?
    はてブテーマのコンテストとかあっても面白いかも?
    (すでにあったらスイマセン)

    Tags: , ,

    2 Responses to “はてなブックマークのデザイン編集機能”

    1. akz on January 3rd, 2007 at 2:43 AM says:

      こんにちは。del.icio.usなどでお世話になっていますが、こちらでははじめまして。

      はてなのヘッダ (ロゴ、バナーなど) なのですが、利用規約によると非表示にするのは禁止のようです。
      http://www.hatena.ne.jp/rule/rule#kiyaku06
      個人的にはもっとわかりやすいところに書いておけよと思うのですが。

      あとカテゴリーとキーワードは僕も使ってませんし、いらないと思ってるんですが惰性で表示させてますね。
      次回デザインをいじることがあれば消そうかなと思ってますがいつになるやら……。

    2. lomo on January 3rd, 2007 at 10:20 AM says:

      ＞akzさん
      はじめまして!
      こちらこそdel.icio.usではお世話になってます!
      ワタシの脳内ではakzさんはかなりオシャレでカッコイイに違いないと妄想をふくらませてます :P

      はてなのヘッダ (ロゴ、バナーなど) なのですが、利用規約によると非表示にするのは禁止のようです。

      わわわっっ
      どうもありがとうございます!!
      利用規約は読んだことがありませんでした。
      さっそく今から表示しようと思います。
      よく読まなかったワタシが悪いのですが「はてなブックマークデザインガイド 」にCSS編集の注意点として書いておいていただきたいです。

    Leave a Reply