みなさん、こんにちは！Donyです。
今回は「DG-STYLE」を利用して、オリジナルデザインのサイトの作り方について説明したいと思います。
まずどのようなものが必要かを見てみましょう。
オリジナルデザインで必要なもの
WordPressで「DG-STYLE」が設置されている前提で説明しますので、まだ準備されてない方は「DG-STYLE」をダウンロードしてから進んでください。
また「DG-STYLE」の設置については「DG-STYLEの設置＆アップデート方法」をご覧ください。
- ロゴイメージ
- Faviconイメージ（背景透明のPNG、サイズは512×512）
- No Image用のイメージ
- デザイン
- 記事（１０記事以上がおすすめ）
上記の４つのものを準備してから進むようにしましょう！
各項目について説明します。
ロゴイメージ
ロゴはそのサイトやブランドの顔とも言えるものですね。「DG-STYLE」でロゴは、PC用とSP用２種類登録できます。
ロゴイメージがない場合は、テキストをロゴとして利用する方法もあります。
今のDG-STYLEはイメージとテキストを混ぜて使っています。（2021年1月28日現在）
Faviconイメージ
ロゴイメージとは別に企業やブログのシンボルとなるもののイメージを用意しましょう。
Faviconは、ブラウザのタブにアイコンとして表示されるものを言います。
またPWAのアイコンとしても使うので、イメージ背景は透明で、サイズは512×512の正方形を準備しましょう。
No Image用イメージ
記事一覧や記事に登録したアイキャッチイメージがない場合に代わりに表示させるための、共通イメージです。
DG-STYLEでは、上記のデフォルトNo Imageがありますが、サイトに合わせたイメージにすることをおすすめします。
デザイン
サイトを作るためのオリジナルデザインを用意しましょう！
デザインは、最低以下のものを用意してください。
- デバイス：スマートフォン、PC
- ページ：TOPページ、記事一覧ページ、記事ページ、404ページ、その他必要なページ
レスポンシブのため、各デバイスに対するページデザインが必要になります。
サイトカラー
「DG-STYLE」で使えるパレットカラーは「メイン」「サブ１」「サブ２」「テキスト」「ベース」５種類です。
５種類以上でも、カラーセットに色を登録して使えるので安心してください。
このように、パレットとカラーセットに色を登録できます。
記事
TOPページのみのサイトの場合はいらないですが、ブログなどのメディア系の場合は記事を先に追加しておきましょう。
まだ記事ができない場合は、テスト用の記事でも大丈夫です。
記事リストや一覧ページでデザインが確認できるようにしましょう。
私が用意したもの
今回、私がテストサイトを作るために用意したものは、以下になります。
ロゴイメージ
Faviconイメージ
No Image用のイメージ
デザイン
練習で使うデザインは他の無料でデザインを配布しているサイトをみて作りたいと思います。
今回で使うサイトは以下になります。
それでは、「DG-STYLE」でオリジナルデザインのサイトを作ってみましょう！