Beldadのデモページはご覧いただけましたでしょうか。追加CSSやテーマカスタマイザー機能を利用し、美容・コスメのデモページとは全く異なるデザインに仕上げました。今回のデモサイト作成でおこなったカスタマイズ内容のご説明をさせていただきます。ビルトインセクションの「色」を利用し変更しました。今回は、サイト全体の「メイン色・サブ色」のみを変更しましたが、その他の部分のカラー変更をおこなう事も可能です。ヘッダーロゴの位置変更・フッターのタイトルテキストを画像に変更しました。ヘッダーのロゴ画像を中央寄せにする「追加CSS」を利用し、PCでの表示のみロゴ画像の位置変更をおこなっております。0);}}フッターのロゴ画像を背景画像で表示させるフッターに表示させるロゴ画像をメディアにアップロードし、「追加CSS」から下記のスタイルを適用し背景画像で表示させております。-9999px;}「background-image」で指定する絶対パスのURLは、メディアにアップロードしたロゴ画像の編集画面から「ファイルのURL」に記載されているURLを記入ください。グローバルナビゲーションのデザイン変更PCでの表示の際、グローバルナビゲーションメニューの中央寄せ・ナビゲーションの各トップメニューにアイコン画像を設置しました。グローバルナビゲーションを中央寄せにする「追加CSS」を利用し、PCでの表示のみナビゲーションメニューを中央寄せにしております。ここでは「フォントの大きさ」も調整しています。center;}}各トップメニューにアイコン画像を設置する各トップメニューのアイコン画像は、メディアにアップロードしておいてください。デモサイトではマウスホバー・カレント用の(色違いの)画像も用意しメディアにアップロードしております。デモサイトのような表示にしたい方はホバー・カレント用の画像もご用意ください。アイコン画像は背景画像で表示しております。各トップメニューの上部にアイコン画像を設置するためのマージンを適用させなければいけませんので、「追加CSS」から各メニューに対して下記のスタイルを適用しております。ここではメニューテキストのフォントの太さも調整しています。各メニューのIDを調べるFirefox、Chromeなどに付属されている「要素検証」を利用し各メニューに適用されているIDをお調べください。0;}}「background-image」で指定する絶対パスのURLは、メディアにアップロードしたアイコン画像の編集画面から「ファイルのURL」に記載されているURLを記入ください。※下記の「〇〇」には、各トップメニューのIDが入ります。商品名や記事タイトルのフォントの太さ変更となります。テーマオプション上記、設定ページの「サイドバーを表示する」からトップページの表示・非表示の切り替えがおこなえます。ブロックの非表示こちらも1.と同様「テーマオプション」から表示・非表示の切り替えが可能です。商品名や記事タイトルのフォントの太さ変更こちらは「追加CSS」を利用し下記のスタイルを適用させております。bold;}まとめ今回のデモサイト作成にあたり「追加CSS」に記述したスタイルは下記の通りです。(JIPDEC)から、「プライバシーマーク」付与の認定を取得しています。