はてなブックマークの自分のブックマークページは、設定画面の「デザインの編集」からカスタマイズすることができます。デザイン編集機能を使って、ブックマークをオリジナルデザインにカスタマイズしましょう。
以下、はてなブックマークのデザイン変更の基本を紹介していきます。
はてなブックマークでは、HTMLの追加やスタイルシートのフルカスタマイズが可能な上、モジュールで好みの機能を追加することもできます。これら機能を利用することで、他にないオリジナルのブックマークデザインが可能となります。
千里の道も一歩から、まずはヘッダの色をカスタマイズをしてみましょう。
「ヘッダの色を選択」から好きな色を選らんで、「プレビュー」ボタンを押してみましょう。ヘッダの色が変更された画面が表示されます。プレビュー時点では、変更はまだ保存されていません。これでいいな、と思ったらプレビューページの下にある「この内容に変更する」ボタンを押して変更を確定しましょう。他の色がいいな、というときは「設定画面に戻る」で設定画面に戻ってやり直しましょう。
このようにプレビュー機能を利用することで何度もやり直してデザイン変更が可能です。思う存分デザインを楽しんでください。
慣れてきたところで、次はページのヘッダ／フッタのカスタマイズをしてみましょう。
「ヘッダ／フッタ／スタイルシートの編集」の欄に、入力欄があります。ページのヘッダやページのフッタの箇所に何でもいいので書き込んで、プレビューしてみましょう。(ヘッダには初期状態でモジュール用のテキストが入っていますが、消去せずに試してみてください。)
ヘッダに書き込んだ内容はブックマークのタイトルの下に、フッタに書き込んだ内容はブックマークが終わった後に表示されます。ヘッダ、フッタ箇所にはこのように任意のテキストを挿入可能となっています。また、HTMLタグが利用可能です。後に解説するスタイルシートと組み合わせることでより柔軟なデザイン変更が可能となるでしょう。
ヘッダ、フッタにはモジュールを使うことができます。モジュールを使う事で、自動的にカレンダーを表示したりといった、いろいろな機能を簡単に実現する事ができます。
試しにヘッダに、
<hatena name="calendar2">
と記入してプレビューしてみましょう。ヘッダ箇所にカレンダーが表示されます。カレンダーにより、特定の日付のブックマークにジャンプすることができます。
このように hatena で始まるタグはモジュールと呼ばれます。モジュールの種類は name="..." の箇所で選択します。ここではcalendar2モジュールを利用しました。
現在はてなブックマークでは以下のモジュールが利用可能です。
タイトルの大きさ、フォントの種類、背景色、リンクの色、タグ一覧の横幅...などなどブックマークのデザインを好みに変更するためには、スタイルシートを編集します。
スタイルシートは、テーマが選択されている状態で編集すると、そのテーマを適用した上で、任意の箇所を編集することができます。ゼロからデザインを作りたいという方は、テーマを「指定なし」にしてスタイルシートを編集すると良いでしょう。
試しに、「テーマの選択」で「基本テーマ」が選択されている状態でスタイルシートに
div.header h2 {
color: green;
font-size: 200%;
}
と記入してプレビューしてみてください。タイトルの文字色が緑になり且つ大きくなり表示されます。
このようにスタイルシートを編集することでブックマーク内の任意の箇所のデザインを変更することができます。スタイルシートでは文字の大きさや色の変更だけでなく、任意の箇所の位置や横幅、縦幅なども調整することができますので、工夫次第で基本テーマとはまったく異なるデザインに仕上げることも可能です。
スタイルシートについて詳しくは「はてなダイアリー - はてなダイアリーガイド「スタイルシートとは」などを参照ください。
現在はてなブックマークでは、ユーザーの皆様が開発した新しいテーマを募集しています。テーマの開発にはどなたでもご参加いただけます。お送りいただきましたテーマは、はてなブックマークに順次追加し、ユーザーの皆様に簡単に利用していただけるようにしていく予定です。ぜひ、開発にご参加ください。
詳しくははてなブックマークテーマ作成時の注意を参照ください。