色デザインの修正と設定方法について
2010年3月9日 ブログ運営記
DiaryNoteではレイアウトを大幅に変更することはできませんが、基準となるレイアウトに沿って色設定をある程度カスタマイズできます。
DiaryNote標準の22種類の色設定の他、完全オリジナルの色デザインにすることも可能です。
今回は、完全オリジナルの色デザインに修正する方法について説明します。
1:管理ページ左サイドメニューより[デザインの変更]をクリック
2:項目「色デザインの変更」下のテキスト中にある[色デザインの変更(詳細)]をクリックし[色デザインの修正]ページを開く
3:日記で表示される各項目の色を、Web設定用の16進数(6桁)で指定する
4:最下部にある[色デザインを変更]ボタンをクリックして完了する
DiaryNoteの日記レイアウトは、大きく次の4項目に分類されます。【画像1】
(1)全体…ブラウザで表示される背景
(2)ヘッダー部分…DiaryNote上部、日記タイトルが表示される場所
(3)メイン部分…DiaryNoteの記事(日記本文)が表示される場所
(4)サブ部分…DiaryNote左のメニュー、カレンダーやテーマ、お気に入り日記が表示される場所
レイアウトの大分類4項目は、さらに下記のように計25項目に細分化されており、右側のテキストボックス(入力フォーム)にWeb設定用の16進数(6桁のRGB設定値)を入力して色を設定します。【画像2】
■全体の設定
背景…ヘッダー(タイトル)・メイン(記事)・サブ(メニュー)の下に表示される全体の背景
■ヘッダー部分の設定
背景…タイトル部分の背景。画像を入れることができる
枠線…タイトル部分を囲む枠線
タイトル…日記タイトル。ここでは「ポケカと黒猫と私」
サブタイトル…タイトルの下に表示される。日記コンセプトを説明するもの
■メイン部分の設定
通常の文字…タイトルと記事以外の文字、ここではタイトル下の日付
背景…記事の背景色
枠線…記事全体を囲む枠線
タイトルの左にあるワンポイント…タイトル左にある長方形のワンポイント
タイトル(未訪問の場合)…未訪問の時の記事タイトル
タイトル(訪問済みの場合)…訪問済みの時の記事タイトル
タイトル(マウスオーバー時)…記事タイトルにマウスポインタを置いた時
本文…記事の文字
リンク(未訪問の場合)…本文中の未訪問のリンク
リンク(訪問済みの場合)…本文中の訪問済みのリンク
リンク(マウスオーバー時)…本文中のリンクにマウスポインタを置いた時
■サブ部分の設定
通常の文字…リンクやタイトル文字以外の色、カレンダーの曜日やお気に入り日記を更新したユーザ名、月日・時間など
背景…各メニューボックス内の背景色
全体の枠線…メニュー全体を囲む枠線
個別のボックスの枠線…各メニューボックスを囲む枠線
タイトルの背景…メニュータイトルの背景
タイトル…メニュータイトル、「最新の日記」や「お気に入り日記の更新」など
リンク(未訪問の場合)…メニュー内の未訪問のリンク
リンク(訪問済みの場合)…メニュー内の訪問済みのリンク
リンク(マウスオーバー時)…メニュー内のリンクにマウスポインタを置いた時
これらの25項目をひとつずつ入力して色を設定していきます。
色を使い過ぎるとごちゃごちゃして見づらくなってしまうので、メインの色+1~2色でまとめると綺麗です。
さて、私がよく参考にしているWeb版の色見本帳をご紹介します。
Web設定用の16進数とブラウザ上の表示色を同時に確認できるので便利です。
(手入力するとDiaryNote設定値に自動修正されるので、16進数をコピー&ペーストすることをお薦めします。)
■Webセーフカラー web216 - Web Safe Colors
http://www.colordic.org/s/
Webセーフカラーとは、Windows・Macintosh両方でほぼ同じように表示されるであろう216色を差します。どんな環境でも同じように表示したい場所(サイトのシンボルカラー、共通の画像など)に使うと良い色です。
216色だけでデザインするのは厳しいので、Webセーフカラー以外の色もよく使われています。個人的にはWebの基準色として使うのが良いと思います。
同じサイトより、今回ポイントに使用した色の見本帳です。
■世界の伝統色 洋色大辞典 - Traditional World Color Names
http://www.colordic.org/y/
この日記「ポケカと黒猫と私(仮)」を始めるにあたり、色違いブラッキーを意識したカラーコーディネートにしてみました。(2010年3月9日~5月19日)
ヘッダやメニューまわりは黒、背景やポイント色は下記の設定にしています。
全体背景:
ムーングレイ moon gray #d4d9dc
ヘッダータイトル、メインのワンポイント、リンク(マウスオーバー時):
ホライズンブルー horizon blue #82cddd
ヘッダーサブタイトル、サブのタイトル:
カナリヤ canary yellow #fff462
この記事が、DiaryNoteカスタマイズの一助になれば幸いです。
…って、超長くなってしまった!
☆追記:20100520
ヘッダとアイコンのデザイン変更に伴い、色デザインも大幅に変更した為、この記事の色指定は現状と異なります。
DiaryNote標準の22種類の色設定の他、完全オリジナルの色デザインにすることも可能です。
今回は、完全オリジナルの色デザインに修正する方法について説明します。
1:管理ページ左サイドメニューより[デザインの変更]をクリック
2:項目「色デザインの変更」下のテキスト中にある[色デザインの変更(詳細)]をクリックし[色デザインの修正]ページを開く
3:日記で表示される各項目の色を、Web設定用の16進数(6桁)で指定する
4:最下部にある[色デザインを変更]ボタンをクリックして完了する
DiaryNoteの日記レイアウトは、大きく次の4項目に分類されます。【画像1】
(1)全体…ブラウザで表示される背景
(2)ヘッダー部分…DiaryNote上部、日記タイトルが表示される場所
(3)メイン部分…DiaryNoteの記事(日記本文)が表示される場所
(4)サブ部分…DiaryNote左のメニュー、カレンダーやテーマ、お気に入り日記が表示される場所
レイアウトの大分類4項目は、さらに下記のように計25項目に細分化されており、右側のテキストボックス(入力フォーム)にWeb設定用の16進数(6桁のRGB設定値)を入力して色を設定します。【画像2】
■全体の設定
背景…ヘッダー(タイトル)・メイン(記事)・サブ(メニュー)の下に表示される全体の背景
■ヘッダー部分の設定
背景…タイトル部分の背景。画像を入れることができる
枠線…タイトル部分を囲む枠線
タイトル…日記タイトル。ここでは「ポケカと黒猫と私」
サブタイトル…タイトルの下に表示される。日記コンセプトを説明するもの
■メイン部分の設定
通常の文字…タイトルと記事以外の文字、ここではタイトル下の日付
背景…記事の背景色
枠線…記事全体を囲む枠線
タイトルの左にあるワンポイント…タイトル左にある長方形のワンポイント
タイトル(未訪問の場合)…未訪問の時の記事タイトル
タイトル(訪問済みの場合)…訪問済みの時の記事タイトル
タイトル(マウスオーバー時)…記事タイトルにマウスポインタを置いた時
本文…記事の文字
リンク(未訪問の場合)…本文中の未訪問のリンク
リンク(訪問済みの場合)…本文中の訪問済みのリンク
リンク(マウスオーバー時)…本文中のリンクにマウスポインタを置いた時
■サブ部分の設定
通常の文字…リンクやタイトル文字以外の色、カレンダーの曜日やお気に入り日記を更新したユーザ名、月日・時間など
背景…各メニューボックス内の背景色
全体の枠線…メニュー全体を囲む枠線
個別のボックスの枠線…各メニューボックスを囲む枠線
タイトルの背景…メニュータイトルの背景
タイトル…メニュータイトル、「最新の日記」や「お気に入り日記の更新」など
リンク(未訪問の場合)…メニュー内の未訪問のリンク
リンク(訪問済みの場合)…メニュー内の訪問済みのリンク
リンク(マウスオーバー時)…メニュー内のリンクにマウスポインタを置いた時
これらの25項目をひとつずつ入力して色を設定していきます。
色を使い過ぎるとごちゃごちゃして見づらくなってしまうので、メインの色+1~2色でまとめると綺麗です。
さて、私がよく参考にしているWeb版の色見本帳をご紹介します。
Web設定用の16進数とブラウザ上の表示色を同時に確認できるので便利です。
(手入力するとDiaryNote設定値に自動修正されるので、16進数をコピー&ペーストすることをお薦めします。)
■Webセーフカラー web216 - Web Safe Colors
http://www.colordic.org/s/
Webセーフカラーとは、Windows・Macintosh両方でほぼ同じように表示されるであろう216色を差します。どんな環境でも同じように表示したい場所(サイトのシンボルカラー、共通の画像など)に使うと良い色です。
216色だけでデザインするのは厳しいので、Webセーフカラー以外の色もよく使われています。個人的にはWebの基準色として使うのが良いと思います。
同じサイトより、今回ポイントに使用した色の見本帳です。
■世界の伝統色 洋色大辞典 - Traditional World Color Names
http://www.colordic.org/y/
この日記「ポケカと黒猫と私(仮)」を始めるにあたり、色違いブラッキーを意識したカラーコーディネートにしてみました。(2010年3月9日~5月19日)
ヘッダやメニューまわりは黒、背景やポイント色は下記の設定にしています。
全体背景:
ムーングレイ moon gray #d4d9dc
ヘッダータイトル、メインのワンポイント、リンク(マウスオーバー時):
ホライズンブルー horizon blue #82cddd
ヘッダーサブタイトル、サブのタイトル:
カナリヤ canary yellow #fff462
この記事が、DiaryNoteカスタマイズの一助になれば幸いです。
…って、超長くなってしまった!
☆追記:20100520
ヘッダとアイコンのデザイン変更に伴い、色デザインも大幅に変更した為、この記事の色指定は現状と異なります。
コメント