デザインを変更する
ブックマークを自分用にデザインする
はてなブックマークでは、カスタムデザイン機能を利用して、簡単に自分のページをカスタマイズできます。カスタムデザイン機能では、リアルタイムにデザインの変更を確認しながら、テーマや自動カラー配色・背景画像アップロード機能を使って、自分好みのデザインを作成していくことができます。
カスタムデザインの始め方
カスタムデザインを利用するには、ヘッダーメニューの設定から「デザイン」タブ→「デザインの変更」をクリックし、「デザインを変更する」ボタンを押してみましょう。
すると、自分のブックマークページに次の画像のようなウィンドウが表示されたかと思います。このウィンドウを利用し、デザインのカスタマイズを行っていきます。
テーマ
テーマのサムネイル画像をクリックすると簡単にデザインを切り替えることが可能です。
上記のように画像をクリックすると、その場でテーマが反映され、プレビューすることができます。
テーマを変更すると、「カラー」「詳細」タブで設定した色設定などが変更されてしまいます。「カラー」「詳細」タブで細かく色をカスタマイズした場合はご注意下さい。
自動カラー生成
「カラー」タブでは、クール / キュート / シックなど、好みや気分に合わせた配色を自動で作成することができます。クリックごとに毎回変わる配色が作成されるので、好みの色が作成されるまで、何度でもお試しください。
背景画像の設定
背景画像をアップロードして、ブックマークページに設定することができます。
アップロードをクリックして画像を選択すると、リアルタイムに背景画像が更新され、ブックマーク画面の背景が変更されます。
また、アップロードした画像の表示の仕方も変更できます。
- 背景位置
- 画像の背景をどこに配置するかを9か所から選べます。画像を並べて表示する場合、ここで設定した位置を起点に並びます。
- 背景画像がよく見えるように
チェックを入れると、背景画像の手前が半透明になり、画像がよく見えるようになります。
- 画像の位置を固定
- チェックをはずすと、画面のスクロールと同時に背景も移動するようになります。
- チェックが入っていると、スクロールしても画像の位置は変わりません。
- 画像の並べ方
一枚の画像をタイリングして表示させることができます。並べ方も、「並べて表示」「横方向」「縦方向」「並べない」から選ぶことができます。
※ここでアップロードした画像は、自動的にはてなフォトライフにアップロードされています。ただし、フォトライフに保存されたブックマーク背景用の画像は上書きされていきますので、ご注意ください。
ヘッダ色
ユーザページでのヘッダ色を固定することができる機能です。
テーマに合わせた配色や、自分のデザインの配色に合わせて、ヘッダの色を固定することができます。
詳細
細かい配色の設定ができます。
それぞれの項目にカーソルを合わせるとカラーパレットが現れます。好きな色をクリックすると、選択した色の数値が自動的に入力され、リアルタイムに配色設定が変更されます。カラーパレットを使わなくても、自分で好きな色を入力することもできます。
配色によってはブックマークのテキストやリンクが見難くなることもあります。随時画面を見て確認しながら配色を設定してください。
ブックマーク背景の色と「背景画像」の「背景画像がよく見えるように」チェックボックスを入れることで見れる半透明の背景色は連動しています。ブックマーク背景の色を変更することで半透明色を変えることができます。
保存と変更
画像や色を設定し、保存ボタンを押せば設定が反映されます。
デフォルトの状態に戻したいときは、変更を加えた状態で設定画面の「デザイン」タブに行き、「標準のデザインに戻す」ボタンを押します。
直接スタイルシートを指定する
直接スタイルシートを記述できる、上級者向けの設定方法もあります。ヘッダーメニューの設定から「デザイン」タブ→「スタイルシート」(画面下部)にスタイルシートを記述できます。
機能追加等によりユーザページの HTML 構造は予告なく変更する事があります。ご了承ください。