サイトデザインの選択/追加/コピー/削除する方法

サイトデザインの選択/追加/コピー/削除する方法

「DG-style」で基本的なサイトデザインの操作について説明します。

サイトデザインとは?

「DG-style」でサイト公開をするためには、独自機能のサイトビルダーからサイトデザイン(以下デザイン)を作る必要があります。

デザインは無制限で作ることができて、1クリックで簡単サイトリニューアルができます。

デザイン作成が苦手な方は、各目的別のテンプレートを多数用意しているので、テンプレートを利用すれば簡単にサイトを作ることができます。

サイトデザインリスト

サイトデザインの基本操作

サイトビルダー画面ヘッダーメニューの「デザイン選択」をクリックしてからの操作方法となります。

「デザイン選択」をクリック!

各パーツ説明

パーツ説明
  1. 青枠:今、修正しているデザインになります。
  2. 適用ボタン:現在公開中デザイン(オレンジ)/適用する(グレー)
  3. 真ん中の文字(グレー):デザイン名
  4. 緑ボタン:デザインコピー
  5. 赤ボタン:デザイン削除

デザインの切り替え

デザインリストから、変えたいデザイン名をクリックするとデザインが変わります。

※修正中のデザインから変更する場合、お知らせメッセージが表示されます。
保存しなかった場合は「いいえもしくはescキー」をクリックして保存してから切り替えしましょう。

他のデザインをクリックすると変わる!
修正中に切り替えするとメッセージが表示される

デザインの公開

公開方法は2つあります。

  1. ヘッダーメニューの「公開中」をクリック
  2. デザインリストから「このデザインを適用する」をクリック

ヘッダーメニューの「公開中」をクリック

  1. ヘッダーボタンにある「公開中」をクリック
  2. お知らせメッセージが表示されたら「はい」をクリック
  3. 完了メッセージが表示されて終わり!
公開中と修正中のデザイン名が違う
お知らせメッセージの「はい」をクリック
完了メッセージが表示されて終わり!
「公開中」と「修正中」が同じ!

デザインリストから「このデザインを適用する」をクリック

  1. 「このデザインを適用する」をクリック
  2. お知らせメッセージの「はい」をクリック
  3. 完了メッセージが表示されて終わり!
「このデザインを適用する」をクリック
お知らせメッセージの「はい」をクリック
完了メッセージが表示されて終わり!
「公開中」と「修正中」が同じ!

デザインの追加

デザインリストの一番左にあるフォームからデザインを追加できます。

  1. デザイン名入力欄に「半角英数字」でデザイン名を入力
  2. 「+ボタン」をクリックしてデザイン追加完了
デザイン追加フォーム
デザイン名を入力して「+ボタン」クリックすると完了メッセージが表示される
新しいデザインが一番最後に追加された!

デザインのコピー

デザインのバックアップを作りたい場合など、すでにあるデザインをコピーすることができます。

  1. デザインボタンの下部に「緑ボタン」をクリック
  2. 新しいデザイン名を入力して「コピーするボタン」クリック
  3. お知らせメッセージが表示されたら成功!
  4. デザインリストにもコピーしたデザインが追加されてます。
    ※デザインもコピーしたものに切り替わります。
「緑ボタン」をクリック
新しいデザイン名を入力して「コピーするボタン」クリック
お知らせメッセージが表示されたら成功!
コピーしたデザインが追加された!

デザインの削除

使わないデザインを削除する方法を紹介します。

  1. デザインボタンの下部に「赤×ボタン」をクリック
  2. 確認メッセージがでたら「はい」をクリック
  3. 削除完了!
    ※選択中のデザインを削除した場合は公開しているデザインに切り替わります。
    ※公開中のデザインは削除できません。
「赤×ボタン」をクリック
「はい」をクリック

修正が終わったら「保存」を忘れずに!

修正が終わったら、サイトビルダー左上にある「保存」ボタンをクリックして保存してくださいね!

「Ctrl」+「S」のショートカットでも保存できる!

慣れている人はすごく便利な「保存」ボタンを押さなくても、キーボードの「Ctrl」+「S」キーで保存できます!

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

「チュートリアル」で各種機能の使い方を学ぼう!のサムネイル

「チュートリアル」で各種機能の使い方を学ぼう!

DG-STYLE Ver 4.2.0から実装された「チュートリアル」について説明します。チュートリアルとは?DG-STY

2021-10-11
DG-STYLEを使ってランディングページを作ろう!のサムネイル

DG-STYLEを使ってランディングページを作ろう…

設定の前にご確認してください。正常にLPページが404で表示される場合は、WP管理画面より「設定」→「パーマリンク」で再

2021-09-11
サイトViewsパーツの使い方のサムネイル

サイトViewsパーツの使い方

「DG-style」で使える各パーツについて説明します。「サイトViews」パーツの概要DG-STYLE Ver4.1.

2021-09-11
【リニューアル】簡単デザイン機能を使ってみよう!

【リニューアル】簡単デザイン機能を使ってみよう!

DG-STYLE 3.0.0から実装された「簡単デザイン」の使い方を説明します。※Ver3.1.0でさらにパワーアップし

2021-06-13
Gutenbergブロックパターン設定方法のサムネイル

Gutenbergブロックパターン設定方法

WordPress5.5から追加された、ブロックパターンを自由に追加できる機能を実装しました。ブロックパターン再利用ブロ

2021-05-16
独自CSSの追加方法のサムネイル

独自CSSの追加方法

独自CSSとは、パーツ個別にデザイン設定するのではなく、セレクターやプロパティを自由に追加できる専門家用の機能です。独自

2021-05-16
TOP