9:サイトデザインを好みにカスタマイズしよう!

サイトのデザインのカスタマイズなどに関しての設定についてご説明します。

背景画像の設定方法

ダッシュボード内の「デザインスタジオ」内の背景を開くとサイトの背景(バックグラウンド)の設定画面が立ち上がります。
Screen shot 2013 06 03 at 11.28.08 PM 9:サイトデザインを好みにカスタマイズしよう!

  1. 背景画像カテゴリ一覧
    既存の背景画像のカテゴリの一覧です。
  2. 背景画像アップロードボタン
    ここをクリックしてお好みの背景画像をアップできます。
  3. Remove Background Image
    現在設定されている背景画像をはずすことができます。
  4. Scaling:背景画像の並び方になります。
    Normal:画像を繰り返さずオリジナルサイズで表示します。
    並べて表示:画像を繰り返して表示します。
    フルスクリーン:画像をブラウザサイズに引き延ばし表示します。
  5. Scrolling:サイトをスクロールした場合の背景画像の設定になります。
    Scroll:画像も一緒にスクロールされます。
    Fixed:背景画像は固定されて表示され続けます。
  6. Alignment:背景画像の配置箇所を指定できます。

 

サイトの配色の設定について

ダッシュボード内の「デザインスタジオ」内の色を開くとサイトの配色の設定画面が立ち上がります。
Screen shot 2013 06 03 at 11.28.28 PM 9:サイトデザインを好みにカスタマイズしよう!

  1. カラー配色サンプル
    カラー配色のサンプルが予め用意されております。クリックすると選択可能です。
  2. Customize Colors:配色を更に細かく設定できます。
    • ヘッダのバックグラウンド
      ヘッダーの背景色を設定できます。
    • Site Name
      サイトタイトルのテキストの色を設定できます。
    • ナビゲーション
      メニューのテキストの色を設定できます。
    • 本文のバックグラウンド
      サイトの背景色を設定できます。
    • Content Background
      サイトのメインコンテンツ部分の外枠を設定できます。
    • Content Wrapper
      サイトの各コーナーを設定できます。
    • テキスト
      サイトのテキスト色を設定できます。
    • Link
      サイトのリンク部分の色を設定できます。
  3. 配色ピッカー
    Screen shot 2013 06 03 at 11.47.09 PM 9:サイトデザインを好みにカスタマイズしよう!

    • 配色サンプル
      サイトに合った配色が予め用意されています。
    • 配色一覧
      配色一覧をパネル状で選択できます。
    • カラーピッカー
      色を調整しながら選択できます。
    • 画像アップロード
      背景画像としてアップロードできます。画像をドラッグ&ドロップしてアップロードします。
    • カラーコード
      RGBの16進数で色指定する機能です。
    • opacity(透過度)
      配色の透過度を設定できます。
    • Revert
      初期値に戻す機能です。

サイトに合ったデザインにカスタマイズしてみてましょう!

ステップ一覧

  • step1 9:サイトデザインを好みにカスタマイズしよう!
  • step2 9:サイトデザインを好みにカスタマイズしよう!
  • step3 9:サイトデザインを好みにカスタマイズしよう!
  • step4 9:サイトデザインを好みにカスタマイズしよう!
  • step5 9:サイトデザインを好みにカスタマイズしよう!
  • step6 9:サイトデザインを好みにカスタマイズしよう!
  • step7 9:サイトデザインを好みにカスタマイズしよう!
  • step8 9:サイトデザインを好みにカスタマイズしよう!
  • step9 9:サイトデザインを好みにカスタマイズしよう!
  • step10 9:サイトデザインを好みにカスタマイズしよう!
  • step11 9:サイトデザインを好みにカスタマイズしよう!
  • step0 9:サイトデザインを好みにカスタマイズしよう!
  • Ningサポートサービス