みなさん、こんにちは!Donyです。

今回は「DG-STYLE」を利用して、オリジナルデザインのサイトの作り方について説明したいと思います。

まずどのようなものが必要かを見てみましょう。

オリジナルデザインで必要なもの

WordPressで「DG-STYLE」が設置されている前提で説明しますので、まだ準備されてない方は「DG-STYLE」をダウンロードしてから進んでください。

また「DG-STYLE」の設置については「DG-STYLEの設置&アップデート方法」をご覧ください。

  • ロゴイメージ
  • Faviconイメージ(背景透明のPNG、サイズは512×512)
  • No Image用のイメージ
  • デザイン
  • 記事(10記事以上がおすすめ)

上記の4つのものを準備してから進むようにしましょう!

各項目について説明します。

ロゴイメージ

ロゴはそのサイトやブランドの顔とも言えるものですね。「DG-STYLE」でロゴは、PC用とSP用2種類登録できます。

ロゴイメージがない場合は、テキストをロゴとして利用する方法もあります。

今のDG-STYLEはイメージとテキストを混ぜて使っています。(2021年1月28日現在)

ロゴ例

Faviconイメージ

ロゴイメージとは別に企業やブログのシンボルとなるもののイメージを用意しましょう。

Faviconは、ブラウザのタブにアイコンとして表示されるものを言います。

Faviconの例

またPWAのアイコンとしても使うので、イメージ背景は透明で、サイズは512×512の正方形を準備しましょう。

No Image用イメージ

記事一覧や記事に登録したアイキャッチイメージがない場合に代わりに表示させるための、共通イメージです。

デフォルトのNo Image

DG-STYLEでは、上記のデフォルトNo Imageがありますが、サイトに合わせたイメージにすることをおすすめします。

デザイン

サイトを作るためのオリジナルデザインを用意しましょう!

デザインは、最低以下のものを用意してください。

  • デバイス:スマートフォン、PC
  • ページ:TOPページ、記事一覧ページ、記事ページ、404ページ、その他必要なページ

レスポンシブのため、各デバイスに対するページデザインが必要になります。

サイトカラー

「DG-STYLE」で使えるパレットカラーは「メイン」「サブ1」「サブ2」「テキスト」「ベース」5種類です。

5種類以上でも、カラーセットに色を登録して使えるので安心してください。

カラーパレット

このように、パレットとカラーセットに色を登録できます。

記事

TOPページのみのサイトの場合はいらないですが、ブログなどのメディア系の場合は記事を先に追加しておきましょう。

まだ記事ができない場合は、テスト用の記事でも大丈夫です。

記事リストや一覧ページでデザインが確認できるようにしましょう。

私が用意したもの

今回、私がテストサイトを作るために用意したものは、以下になります。

ロゴイメージ

ロゴ

Faviconイメージ

Favicon

No Image用のイメージ

デフォルトのNo Image

デザイン

練習で使うデザインは他の無料でデザインを配布しているサイトをみて作りたいと思います。

今回で使うサイトは以下になります。

参考デザインサイト「Eden」

それでは、「DG-STYLE」でオリジナルデザインのサイトを作ってみましょう!

TOP