CSSだけでサイトを作りたい

CSSだけでサイトを作りたい

「DG-STYLE」は、CSSさえ分かればJavascriptやPHPの知識がなくても自由度の高いサイトを作ることができます。

サイトビルダーでは、JavascriptやPHP設定が必要な部分をオプションを修正するだけで実装できるようになっているためです。

また0からサイト制作ができることから、テンプレートじゃない自分だけのオリジナルサイトを作ることができます。

サイトビルダーの主な機能を紹介します。

デザイン設定

例)デザイン設定

デザイン設定は、CSSを直接書いてデザイン変更ができる機能です。

シミュレーターにリアルタイムで反映されるので、CSSを書きながらデザインを確認することができます。

各CSS設定に名前を付けたり、関連する設定をグループ化、カテゴリー分けできるので、編集する時もわかりやすくて作業しやすくなります。

人気記事&関連記事

例)人気記事設定
例)関連記事追加

WordPress利用者がよく使うプラグインとして、人気記事や関連記事を表示するプラグインがあります。

「DG-STYLE」では、「記事リスト」「関連記事リスト」パーツで簡単に人気記事や関連記事を設定することができます。

レスポンシブ

例)デバイス例

「DG-STYLE」は、最大10個のブレイクポイントでCSS設定ができます。

またスマートフォンデザインをベースで作るため、スマートフォンでのCSSサイズを軽くすることができます。

カラーパレット

例)パレットで色変更

「DG-STYLE」では、パレットに登録した色をCSSに設定することで、CSSを修正せず、パレット色を変えるだけでサイト色を変えることができます。

ダークモード

例)ダークモード

最近導入するところが多くなった、ダークモード設定も「DG-STYLE」では、簡単に設定できます。

カラーパレットとCSS変数を利用して、ダークモード時のデザインを設定できます。

また「テキスト」「イメージ」パーツより、ユーザーがダークモードじゃなくても、切り替えられるボタンを付けることができます。

スクロールイベント

例)スクロールイベント

スマートフォンの場合、ヘッダーメニューを通常は非表示で、上にスクロールした時にだけ表示したり、ある要素を通り過ぎたら表示するなど

スクロールによるイベントをオプションからマウスでクリックして、数字を入力するだけです。

スライドショー

例)スライドショー

エリアや記事リストパーツなど、スライドショーを設定できるパーツがあります。

設定方法もマウスでクリックしたり、数字を入力するだけ!

CSSアニメーション

例)CSSアニメーション

最近のサイトはアニメーションを使った動的なサイトがよく見られます。

「DG-STYLE」でも、CSSアニメーションを利用してサイトに色んなアニメーションを使うことができます。

アコーディオン&タブ

例)アコーディオン
例)タブ

「DG-STYLE」では、「テキスト」「イメージ」パーツで指定した要素にClassを切り替える機能が設定できるので、それを利用してアコーディオンやメニューをONOFFできるアコーディオン機能を追加できます。

またエリアオプションで、タブ設定ができてエリア内のパーツをタブコンテンツとして表示することができます。

Writer Profile

donyのサムネイル

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

Recommend Post

Gutenbergブロックパターン

Gutenbergブロックパターン

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

2021-06-20
簡単デザイン機能を使ってみよう!

簡単デザイン機能を使ってみよう!

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

2021-06-20
検索順位を上位にしたい

検索順位を上位にしたい

「DG-STYLE」では、検索順位が上位になりやすいように、内部SEO対策と運営者がSEO対策するための機能を実装してお

2021-06-20
アフィリエイトサイトを作りたい

アフィリエイトサイトを作りたい

「DG-STYLE」を開発したきっかけが、「複数のアフィリエイトサイトをオリジナルデザインで作りたい!」を実現するために

2021-06-20
オリジナルGutenbergブロック

オリジナルGutenbergブロック

会話式ブロックDonyDG-STYLEオリジナルGutenbergブロックを紹介します。まずは最近流行りの会話式コンテン

2020-12-26
独自サイトビルダーとは

独自サイトビルダーとは

「DG-STYLE」の最大の特徴と言える機能の「サイトビルダー」を紹介します。サイトビルダー例上記イメージで表示されてい

2020-10-11
TOP