Jimdoのサイトでは、ページの背景として画像、スライド表示、動画、カラーの4パターンを設定することが出来ます。ここでは、次の手順でカラーを設定しました。
1 管理メニューデザイン→背景→カラーの指定
2 CSSでメインの部分（container）を白色に設定
3 CSSでh1の表示と背景カラーとの間隔を設定
カラーの指定
1 管理メニュー→デザイン→背景と辿ります。
2 背景設定画面で「背景設定の機能が・・・・・・・」部分は単なる告知なので「OK」ボタンをクリックして消します。
3 大きな「+」ボタンをクリックします。
4 カラーをクリックします。
5 カラー設定画面でカラーを設定します。
6 プレビューで確認して「保存」ボタンをクリックします。
ページ全体が指定した色で塗りつぶしされます。
画像の指定
1 管理メニュー→デザイン→背景と辿ります。
2 背景設定画面で「背景設定の機能が・・・・・・・」部分は単なる告知なので「OK」ボタンをクリックして消します。
3 大きな「+」ボタンをクリックします。
4 画像をクリックします。
5 背景画像ファイルを選択し、［開く］をクリックします。
6 背景画像がアップロードされます。
7 自動的にプレビューが表示されるので、ページの全体的な雰囲気を確認します。
8 背景を別の画像で試してみる場合は［やり直す］をクリックし、選択し直します。
9 画像を全てのページの背景に適用するかどうかを判断し、必要に応じて［この背景画像を全てのページに設定する］ボタンをクリックします。
10 背景がこの画像で良い場合は［保存］ボタンをクリックします。
11 画面右上にある「✕（閉じる）」をクリックして、背景設定画面を閉じます。
スライド表示の指定
1 管理メニュー→デザイン→背景と辿ります。
2 背景設定画面で「背景設定の機能が・・・・・・・」部分は単なる告知なので「OK」ボタンをクリックして消します。
3 大きな「+」ボタンをクリックします。
4 スライド表示をクリックします。
5 背景スライドに使う画像ファイルを選択し、［開く］をクリックします。
6 背景画像がアップロードされ、プレビューが始まります。
7 ページの全体的な雰囲気を確認します。
8 画像を全てのページの背景に適用するかどうかを判断し、必要に応じて［この背景画像を全てのページに設定する］ボタンをクリックします。
9 背景がこのスライド表示で良い場合は［保存］ボタンをクリックします。
10 画面右上にある「✕（閉じる）」をクリックして、背景設定画面を閉じます。
メイン部分の背景を白色に設定
独自のレイアウト「HTML」で確認するとメイン部分は<div id="container">から</div>で囲まれた部分であるので、次の手順でCSSの「#container」に背景色を白色に設定します。
1 管理メニューからデザインの「独自のレイアウト」を選択します。
2 独自のレイアウトで「ＣＳＳ」タブをクリックします。
3 CSSの最終行に下記を入力します。
/* Container カスタマイズ
-----------------------------------------------*/
#container {
background-color:#fff;
}
- ここで/*と*/で囲まれた部分はノートでCSSには関与しない。メモとして分かり易いように記載する。
- 「#fff」は16進法で表した白色で「white」としても同じ。
- CSSを文末に記載したのはカスタマイズしたのを分かり易くするため
4 「保存」ボタンをクリックします。
5 編集画面に戻り更新してcontainer部分の背景色は白色になっていること確認します。
タイトル表示と背景カラーとの間隔を設定
上図のとおりh1の表示「ボランティア活動に頑張っています」と背景色の間隔がなくせせこましい状態になっています。次の手順で#containerに内部余白paddingを設定します。
1 管理メニューからデザインの「独自のレイアウト」を選択します。
2 独自のレイアウトで「ＣＳＳ」タブをクリックします。
3 上記で設定した#containerに「padding:5px;」を追加設定し下記のとおりとします。
/* Container カスタマイズ
-----------------------------------------------*/
#container {
background-color:#fff;
padding:5px;
}
赤字が追記した部分
4「保存」ボタンをクリックします。
5 編集画面に戻り更新してcontainerに余白が設定されたこと確認します。
メイン部分の上下の間隔を設定
上図のとおりメイン部分は、上部はページの上端に配置され、下部は下図のとおりコピーライト部分とつながっています。
次の手順で#containerに外部余白marginを設定します。併せてborder-radiusで角丸を設定します。
1 管理メニューからデザインの「独自のレイアウト」を選択します。
2 独自のレイアウトで「ＣＳＳ」タブをクリックします。
3 先に設定した#containerに「border-radius:10px;margin:20px auto;」を追加設定し下記のとおりとします。
/* Container カスタマイズ
-----------------------------------------------*/
#container {
background-color:#fff;
padding:5px;
border-radius:10px;
margin:20px auto;
}
赤字が追加した部分
4「保存」ボタンをクリックします。
5 編集画面に戻り更新してcontainerの上下に余白と角丸が設定されたこと確認します。
