WEBサイトのテーマを設定する

ページ全体のテーマカラーを変更したり、CSSを追加してお好きなデザインにカスタマイズできます。

1_5.png設定画面を開きます

[設定]機能 > [テーマ]を開いてください

2016-06-06_17h30_342.png

 

2_5.pngカラーを選択します

クリックするとサイトのテーマカラーを選択できます。

2016-06-06_17h14_52.png

 

3_5.pngCSSを追加します

サイト全体に対してCSSの追加や上書きを行うことができます。

2016-06-06_17h24_28.png

 [CSS追加]より、CSSの追加・上書きを行ってください。

  • こちらに記述したCSSは最も優先されます
  • <style>~</style>の記述は不要です

mark_warning04.gifCSS自体の記述方法に関するお問い合わせは受けかねます。


4_5.pngHTMLブロックを追加してCSSを記述する方法

CSSを指定したいページの任意のエリアにHTMLブロックを追加して、CSSを記述します。

5_5.pngアップロードしたCSSファイルを読み込む方法

CSSファイルを[ファイル管理]からアップロードして、トラッキングコードにファイルを読み込む為の記述を設定します。

6_5.pngプレビュー反映/保存/初期化について

設定_テーマ_プレビュー反映ボタン.PNGを押下すると、現時点のプレビューをご確認頂けます。

編集が終了した際、設定_テーマ_保存ボタン.PNGボタンを忘れずに押下してください。

初期の状態に戻したい場合には shokika.png ボタンを押してください。

※初期化ボタンを押下すると、「カラー選択」と「CSS追加」がCloud CMOの初期状態に戻ります。十分ご注意ください。

その他

point8_7s.png全てのページで文字のフォントを変更する場合のCSSの記述例

例:文字のフォントをゴシック体にする。

h1, h2, h3, h4, h5, h6, p{
font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
}

point8_7s.png全てのページでフッターの文字色や背景色を変更する場合のCSSの記述例
※「#32cd32」を任意のカラーコードに変更してください

#footer,
#footer a{
color: #32cd32;
}

#footer_wrap{
background: #32cd32;
}

関連記事