サイトの見た目を変更する

デザイン設定ページ

デザイン設定では、あらかじめ用意されたテンプレートから選択したり、デザイン設定項目ごとに任意の値を設定し、サイトの背景や文字の色を自由にカスタマイズすることができます。

「どのデザイン設定がサイト内のどの部分に反映されるのか」は、デザイン設定項目と画面表示の対応をご参照ください。

設定手順

テンプレートを使用しない場合は、2. デザイン設定値を変更する 以降をご参照ください。

1. テンプレートから選択

  • 選択したテンプレートのデザイン設定値をデザイン設定画面に展開することができます。

  • この時点ではサイトの表示は変更されません。3. デザイン設定を保存 することでデザインが反映されます。

デザイン設定ページ上部の「テンプレートを選択」ボタンをクリックします

お好きなテンプレートをクリックします

デザイン設定ページに選択したテンプレートのデザイン設定値が反映されます

2. デザイン設定値を変更する

  • テキストボックスまたはカラーピッカーを使用して、任意のデザイン設定項目のみを変更することができます。

  • この時点ではサイトの表示は変更されません。3. デザイン設定を保存 することでデザインが反映されます。

テキストボックスからデザイン設定値を変更することができます

丸いカラープレビュー要素をクリックすると、カラーピッカーを使用することができます

3. デザイン設定を保存

  • デザイン設定を保存します。

  • デザイン設定の保存完了後、サイトにデザインが反映されます。

「保存」をクリックします

デザイン設定項目と画面表示の対応

ページ共通

サイト全体に適用される基本的な色を変更できます。

デザイン設定項目

  • (01) 背景色:サイト全体の背景色に使われます。

  • (02) 文字色:サイト全体の文字色に使われます。

  • (03) アイコンの色:記事ブロックやカテゴリーブロックのアイコンの色に使われます。

  • (04) アクセントの色:リンクにカーソルを合わせた時に反映されます。主に目立たせるために使われます。

背景色、文字色、アイコンの色、アクセントの色を変更可能です

画面表示

記事、フォルダ、カテゴリなどの各種ページ

トップページ

ヘッダー

サイトの上部に表示されるヘッダーの色を変更できます。

デザイン設定項目

  • (05) 背景色:ヘッダーの背景色に使われます。

  • (06) 文字色:ヘッダーの文字色に使われます。


  • (07) リンクの色:リンクの文字色に使われます。

  • (08) 区切り線の色:ヘッダーと下部コンテンツを区切る線に使われます。

背景色、文字色、リンクの色、区切り線の色を変更可能です

画面表示

ヘッダー

検索セクション

検索ボックスが表示されるセクションの色を変更できます。

デザイン設定項目

  • (09) 背景色:検索セクションの背景色に反映されます。

  • (10) 文字色:検索セクションの文字色に反映されます。

背景色、文字色を変更可能です

画面表示

トップページの検索セクション

よく見られている記事セクション

ホーム画面にある、よく見られている記事セクションの色を変更できます。

デザイン設定項目

  • (11) 背景色:よく見られている記事セクションの背景色に反映されます。

  • (12) 文字色:よく見られている記事セクションの見出しの文字色に反映されます。

背景色、文字色を変更可能です

画面表示

トップページのよく見られている記事セクション

カテゴリーから探すセクション

ホーム画面にある、カテゴリーから探すセクションの色を変更できます。

デザイン設定項目

  • (13) 背景色:カテゴリーから探すセクションの背景色に反映されます。

  • (14) 文字色:カテゴリーから探すセクションの見出しの文字色に反映されます。

背景色、文字色を変更可能です

画面表示

トップページのカテゴリーから探すセクション

フッター

サイトの最下部に表示されるフッターの色を変更できます。

デザイン設定項目

  • (15) 背景色:フッターの背景色に使われます。

  • (16) 文字色:フッターの文字色に使われます。

  • (17) 区切り線の色:フッターと上部コンテンツを区切る線に使われます。

背景色、文字色、区切り線の色を変更可能です

画面表示

フッター
このページはお役に立ちましたか?