第三回 ブロック単位で背景色の変更について
背景の色を変更したい！
こういったお問合せを頂きましたので、今回の第三回目はブロック単位で背景色の変更方法についてご説明します。
カスタマイズ方法
カスタマイズ方法については2パターンの方法があります。
１．全ページに反映させる方法！
コントロールパネル＞設定＞SEO対策＞アクセス解析の設定
２．個別ページのみに反映させる方法！
右クリック＞メタタグ＞メタタグの登録
この上記２パターンの方法で背景色の変更が可能です
１．全ページに反映させる方法！
１－１．フリーパーツの作成
背景色変更を分かりやすくする為にフリーパーツを一つ作成します。
右クリック＞レイアウト＞レイアウトを変える＞パーツを追加
コントロールパネル＞作成＞デザイン＞レイアウトを変える＞パーツを追加
※どちらからでも可能
１－２．「アクセス解析の設定」からカスタマイズを行う！
コントロールパネル＞設定＞SEO対策＞アクセス解析の設定
本来はAnalyticsの設定を行う場所ですが、それ以外のソースも反映させることが出来ます。
その他のトラッキングコードの</HEAD>タグ直前 こちらに必要なソースをコピーしてください。
※「アクセル解析の設定」からカスタマイズを行った場合、「サイト公開」ボタンを押さないと反映されません！
また編集画面にログインした状態で背景画像が変更されている事を確認出来ませんので、ログアウトしてご確認ください。
※bottom以外の背景色などを変えたい場合は#bottom→#mainなどに変更してください。詳しくはレイアウトからブロック名をご確認ください。
基本全てのレスポンシブデザイン（bottom/upper）で対応していますが、例外については下記からご確認ください。
▽記述例▽ UPPERブロックの背景色------------------------
<style>
#upper {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding-left: calc((50% - 50vw) * -1); /* 左の余白 */
padding-right: calc((50% - 50vw) * -1); /* 右の余白 */
}
</style>
------------------------
▽記述例▽ BOTTOMブロックの背景色
------------------------
<style>
#bottom {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding-left: calc((50% - 50vw) * -1); /* 左の余白 */
padding-right: calc((50% - 50vw) * -1); /* 右の余白 */
}
</style>
------------------------
例外の場合は下記のソースをご利用ください。
▽記述例▽ type13の見出し2がある場合（upper/bottom） ------------------------
<style>
#bottom {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding: 0 calc((50% - 50vw) * -1) 20px; /* 上下左右の余白 */
}
#bottom h2 {
z-index: 2; /* このデザインの場合見出し2の背景が下に隠れてしまうので調整 */
}
#bottom h2:before {
margin-left: calc(50% - 50vw); /* 見出しの背景をウィンドウ幅で設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 見出しの背景をウィンドウ幅で設定するための右のネガティブマージン */
width: 100vw; /*ウィンドウ幅100%*/
}
</style>
------------------------
▽記述例▽ type14のupperブロックに使う場合 ------------------------
<style>
#upper {
background-color: #a9b5c1 !important; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding: 0 calc((50% - 50vw) * -1) 20px; /* 上下左右の余白 */
}
</style>
------------------------
※type03のBOTTOMブロック
表示は問題ないが、編集サイトでダイレクト編集時のボタンが見えない位置に表示されてしまうので、フリーパーツのダイレクト編集ができない。（ダイアログでの編集は可）
【アクセス解析の設定】ログイン時
【アクセス解析の設定】ログアウト時
２．個別ページに反映させる方法！
２－１．フリーパーツの作成
背景色変更を分かりやすくする為にフリーパーツを一つ作成します。
右クリック＞レイアウト＞レイアウトを変える＞パーツを追加
コントロールパネル＞作成＞デザイン＞レイアウトを変える＞パーツを追加
※どちらからでも可能
２－１．「メタタグの設定」からカスタマイズを行う！
右クリック＞メタタグ＞メタタグの登録
このメタタグの登録から設定を行う場合は設定されたページしか反映されませんのでご注意してください。
上記の点から特定のページだけ反映させたい場合などは、こちらの「メタタグの登録」から設定を行って下さい。
メタタグのエディターを開き、上部のタグの【追加タグ設定】をクリックし</HEAD>タグ直前 に先程と同じソースをコピーしてください。
※bottom以外の背景色などを変えたい場合は#bottom→#mainなどに変更してください。詳しくはレイアウトからブロック名をご確認ください。
基本全てのレスポンシブデザイン（bottom/upper）で対応していますが、例外については下記からご確認ください。
▽記述例▽ UPPERブロックの背景色------------------------
<style>
#upper {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding-left: calc((50% - 50vw) * -1); /* 左の余白 */
padding-right: calc((50% - 50vw) * -1); /* 右の余白 */
}
</style>
------------------------
▽記述例▽ BOTTOMブロックの背景色
------------------------
<style>
#bottom {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding-left: calc((50% - 50vw) * -1); /* 左の余白 */
padding-right: calc((50% - 50vw) * -1); /* 右の余白 */
}
</style>
------------------------
例外の場合は下記のソースをご利用ください。
▽記述例▽ type13の見出し2がある場合（upper/bottom） ------------------------
<style>
#bottom {
background-color: #a9b5c1; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding: 0 calc((50% - 50vw) * -1) 20px; /* 上下左右の余白 */
}
#bottom h2 {
z-index: 2; /* このデザインの場合見出し2の背景が下に隠れてしまうので調整 */
}
#bottom h2:before {
margin-left: calc(50% - 50vw); /* 見出しの背景をウィンドウ幅で設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 見出しの背景をウィンドウ幅で設定するための右のネガティブマージン */
width: 100vw; /*ウィンドウ幅100%*/
}
</style>
------------------------
▽記述例▽ type14のupperブロックに使う場合------------------------
<style>
#upper {
background-color: #a9b5c1 !important; /* 背景色 */
margin-left: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための左のネガティブマージン */
margin-right: calc(50% - 50vw); /* 親の幅を超えて背景色を設定するための右のネガティブマージン */
padding: 0 calc((50% - 50vw) * -1) 20px; /* 上下左右の余白 */
}
</style>
------------------------
※type03のBOTTOMブロック
表示は問題ないが、編集サイトでダイレクト編集時のボタンが見えない位置に表示されてしまうので、フリーパーツのダイレクト編集ができない。（ダイアログでの編集は可）
