カンタン作成ガイド STEP2 カラーテーマを決める
次にカラーテーマを決めます。
下記の中からお好きなカラーテーマを選択してください。
春 ▽HTMLソース |
夏 ▽HTMLソース |
秋 ▽HTMLソース |
冬 ▽HTMLソース |
気にいったカラーテーマは決まりましたか？
カラーテーマも後から変更が可能なので、ひとまずお好きな色を選んでくださいね。
カラーテーマを選択したら、「HTMLソース」を全てコピーしておきましょう。そして、前のステップでダウンロードした基本テンプレート「index.html」「2nd.html」の2つのファイルを「メモ帳」などのテキストエディタで開きます。
▲テキストエディタで開く。
中身を見ると、
<!--カラーテーマの設定-->
<body bgcolor="#FFFFFF" text="#000000">
<body bgcolor="#FFFFFF" text="#000000">
と記述している部分がありますので、この<body>要素の部分を、先ほどコピーしておいた、カラーテーマのHTMLソースで上書きでペーストしてください。
例えば、「春」のカラーテーマを選んだ場合であれば、まず、HTMLソースの部分をコピーし、基本テンプレートの下記の部分を、
【デフォルトの記述】
<!--カラーテーマの設定-->
<body bgcolor="#FFFFFF" text="#000000">
<!--カラーテーマの設定-->
<body bgcolor="#FFFFFF" text="#000000">
▼上書きでHTMLソースをコピーペースト
【ペーストした後の記述】
<!--カラーテーマの設定-->
<body bgcolor="#FFCCCC" text="#FF0099" link="#CC0066" vlink="#CC6666">
<!--カラーテーマの設定-->
<body bgcolor="#FFCCCC" text="#FF0099" link="#CC0066" vlink="#CC6666">
このように差し替えます。
※「index.html」「2nd.html」の両ファイルとも同じようにコピーペーストしてください。
コピーペーストの作業が終わったら、「index.html」「2nd.html」のファイルをそれぞれブラウザで見てみましょう。
すると、ページの色が、あなたが選んだカラーテーマの色に変わっているはずです。
ページ全体の色を変える場合は、この<body>要素の部分に属性を追加することで変更することができます。
カラーテーマを決め、<body>要素を差し替えることが出来たら、あとはコンテンツを作るだけです。
※サンプル以外の色の組み合わせを試してみたい方はシミュレータを活用してください。
⇒配色シミュレータ
⇒配色シミュレータ
