2005年8月29日
背景色の変更
今回は、背景色の変更方法について説明します。簡単にカスタマイズすることができますので、是非、チャレンジしてくださいね。
背景色の変更方法として、まず、ページ全体の背景色を変更する方法を例にして説明します。
■ CSS(スタイルシート)の編集
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述があります。
<スタイルシート>
初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページ全体の背景色を変更することができます。
編集後は保存して再構築すると完了です。
色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。
■ カラーチャート表(標準カラー16色)
■ カラーチャート表(Webセーフカラー216色)
Webセーフカラーとは、8ビットディスプレイでも正しく再現できる色のことです。しかし、現在のディスプレイは16ビット(65,536色)~32ビット(1677万7216色)などが標準ですので、目安程度に捉えてもらって結構です。
背景色を指定するには、background-color プロパティを使用します。ここでは、色の指定方法について、もう少し詳しく説明します。
■ カラーコード指定(#+3桁のカラーコード)
<記述例>
左から「赤、緑、青」という順番で光の3原色の値を指定します。値は、0からFまでの16進数で0に近いほど暗く、Fに近いほど明るくなります。
■ カラーコード指定(#+6桁のカラーコード)
<記述例>
左から「赤赤、緑緑、青青」という順番で光の3原色の値を指定します。上の指定では8ビット(1桁)で各色の濃さを指定していましたが、この指定では、2桁で指定します。
■ カラーネーム指定
<記述例>
定められたカラーネームで指定することができます。
背景色の変更方法について、ページ全体の背景色の変更方法を例として説明しましたが、バナー部分やサイドバー部分などの背景色を変更する場合は、その該当クラスで、background-color プロパティを追加します。
MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景色を変更させたいクラスを編集してください。
以上、背景色の変更方法について説明しました。
ブログランキングに参加中です。応援お願いします。
| ページ全体の背景色を変更するには |
背景色の変更方法として、まず、ページ全体の背景色を変更する方法を例にして説明します。
■ CSS(スタイルシート)の編集
デフォルトテンプレートのスタイルシートを見ていただくと、下記のような記述があります。
<スタイルシート>
| body { background-color:#8FABBE; } |
初期設定のページ背景色は、「#8FABBE」と指定されています。
この「#8FABBE」という数値を変更することで、ページ全体の背景色を変更することができます。
編集後は保存して再構築すると完了です。
色の指定は、16進数の数値、あるいは、カラーネームで指定できますので、下記のカラーチャート表を参考にして、いろいろ試してくださいね。
■ カラーチャート表(標準カラー16色)
| Aqua #00FFFF |
Yellow #FFFF00 |
Fuchsia #FF00FF |
White #FFFFFF |
| Teal #008080 |
Olive #808000 |
Purple #800080 |
Gray #808080 |
| Blue #0000FF |
Lime #00FF00 |
Red #FF0000 |
Silver #C0C0C0 |
| Navy #000080 |
Green #008000 |
Maroon #800000 |
Black #000000 |
■ カラーチャート表(Webセーフカラー216色)
Webセーフカラーとは、8ビットディスプレイでも正しく再現できる色のことです。しかし、現在のディスプレイは16ビット(65,536色)~32ビット(1677万7216色)などが標準ですので、目安程度に捉えてもらって結構です。
| 000000 | ffffcc | 99ff99 | 66ffff | 3333ff | ff00ff |
| 333333 | ffff99 | 66ff66 | 33ffff | 0000ff | ff00cc |
| 666666 | ffff66 | 33ff33 | 00ffff | 3300ff | cc0099 |
| 999999 | ffff33 | 00ff00 | 00ccff | 3300cc | ff33cc |
| cccccc | ffff00 | 00ff33 | 0099cc | 6633ff | 990066 |
| ffffff | ccff00 | 00cc33 | 33ccff | 330099 | cc3399 |
| ff3300 | 99cc00 | 33ff66 | 006699 | 6633cc | ff66cc |
| cc3300 | ccff33 | 009933 | 3399cc | 9966ff | ff0099 |
| ff6633 | 669900 | 33cc66 | 66ccff | 6600ff | 660033 |
| 993300 | 99cc33 | 66ff99 | 0099ff | 330066 | 993366 |
| cc6633 | ccff66 | 00ff66 | 003366 | 663399 | cc6699 |
| ff9966 | 99ff00 | 006633 | 336699 | 9966cc | cc0066 |
| ff6600 | 336600 | 339966 | 6699cc | 6600cc | ff99cc |
| 663300 | 669933 | 66cc99 | 0066cc | cc99ff | ff3399 |
| 996633 | 99cc66 | 00cc66 | 99ccff | 9933ff | ff0066 |
| cc9966 | 66cc00 | 99ffcc | 3399ff | 9900ff | 990033 |
| cc6600 | ccff99 | 33ff99 | 0066ff | 660099 | cc3366 |
| ffcc99 | 99ff33 | 00ff99 | 003399 | 9933cc | ff6699 |
| ff9933 | 66ff00 | 009966 | 3366cc | cc66ff | cc0033 |
| ff9900 | 339900 | 33cc99 | 6699ff | 9900cc | ff3366 |
| 996600 | 66cc33 | 66ffcc | 0033cc | cc33ff | ff0033 |
| cc9933 | 99ff66 | 00cc99 | 3366ff | cc00ff | 330000 |
| ffcc66 | 33cc00 | 33ffcc | 0033ff | 330033 | 663333 |
| cc9900 | 66ff33 | 00ffcc | 000033 | 663366 | 660000 |
| ffcc33 | 33ff00 | 003333 | 333366 | 660066 | 996666 |
| ffcc00 | 003300 | 336666 | 000066 | 996699 | 993333 |
| 333300 | 336633 | 006666 | 666699 | 993399 | 990000 |
| 666633 | 006600 | 669999 | 333399 | 990099 | cc9999 |
| 666600 | 669966 | 339999 | 000099 | cc99cc | cc6666 |
| 999966 | 339933 | 009999 | 9999cc | cc66cc | cc3333 |
| 999933 | 009900 | 99cccc | 6666cc | cc33cc | cc0000 |
| 999900 | 99cc99 | 66cccc | 3333cc | cc00cc | ffcccc |
| cccc99 | 66cc66 | 33cccc | 0000cc | ffccff | ff9999 |
| cccc66 | 33cc33 | 00cccc | ccccff | ff99ff | ff6666 |
| cccc33 | 00cc00 | ccffff | 9999ff | ff66ff | ff3333 |
| cccc00 | ccffcc | 99ffff | 6666ff | ff33ff | ff0000 |
| 背景色の指定 : background-color |
背景色を指定するには、background-color プロパティを使用します。ここでは、色の指定方法について、もう少し詳しく説明します。
■ カラーコード指定(#+3桁のカラーコード)
<記述例>
| background-color : #FFF; |
左から「赤、緑、青」という順番で光の3原色の値を指定します。値は、0からFまでの16進数で0に近いほど暗く、Fに近いほど明るくなります。
■ カラーコード指定(#+6桁のカラーコード)
<記述例>
| background-color : #8FABBE; |
左から「赤赤、緑緑、青青」という順番で光の3原色の値を指定します。上の指定では8ビット(1桁)で各色の濃さを指定していましたが、この指定では、2桁で指定します。
■ カラーネーム指定
<記述例>
| background-color : blue; |
定められたカラーネームで指定することができます。
| 他の部分の背景色を変更するには |
背景色の変更方法について、ページ全体の背景色の変更方法を例として説明しましたが、バナー部分やサイドバー部分などの背景色を変更する場合は、その該当クラスで、background-color プロパティを追加します。
MovableTypeで使用されているクラス、セレクタはMovableTyoeのスタイルシート解析を参考にして、背景色を変更させたいクラスを編集してください。
以上、背景色の変更方法について説明しました。
ブログランキングに参加中です。応援お願いします。
パーマリンク | 投稿者 りっち | 2005年8月29日 10:40
|
|
はてなブックマークに追加
|
Yahooブックマークに登録
関連記事
トラックバック
このエントリーのトラックバックURL:
コメント
コメントしてください
