このブログは、開発知識のない初心者の方でもWordpressを使った本格的なウェブサイトを作ってみよう！というテーマで皆様に情報をお届けしています。
今回のシリーズでは、Wordpressの人気テーマ、「Divi(Elegant Themes)」という有料テーマを使って、簡単で超本格的なウェブサイトを作ってみます。
Diviを初心者の方にオススメする理由は、人気のビジュアルビルダーを搭載しているので、WEB制作の経験がない初心者の方でもドラッグ&ドロップだけで簡単に超本格的なウェブサイトが作れてしまうからです。このブログでも何度かご紹介していますが、今回は2019年最新版の使い方を、初めての方でもわかりやすいようStep By Stepでご紹介しちゃいます。
第１回目は、Wordpressへのインストール方法から基本設定までをご紹介していきたいと思います。
 
Elegant Theme購入ページはこちら→　https://www.elegantthemes.com/
※日本語対応のテーマですが、本家サイトは英語のみとなっておりますので、購入の仕方がわからない場合はこちらの記事をご参考ください。

STEP 1 : WordPressにインストール

まずは、ダッシュボードから外観»テーマ»新規追加の順にクリックします。
 

 
次に、テーマのアップロードをクリックし、先ほどElegant ThemeからダウンロードしたDivi.zipファイルを選択、もしくはドラッグ&ドロップでアップロードしたら、今すぐインストールをクリックします。
*zipファイルは解凍せず、zipファイルのままアップロードしてください。
 
インストールが終了したら、有効化をクリックしテーマをアクティベートします。
アクティベートに成功していたら、下記画像のようにダッシュボードのサイドバーにDIVIが追加され、テーマ一覧にDiviのサムネイルが表示されています（有効化になっているかもチェック）。
 

STEP 2 : 固定ページを作成

次に固定ページを作成していきます。固定ページ»新規追加の順にクリックして、新規ページを作成していきます。
*Wordpress5になってから、Gutenbergというエディターが標準になっています。個人的に使いづらくあまり好きではないので、classic editorという無料プラグインをインストールしています。こちらをインストールすることにより、旧バージョンのエディターを使用することができます。
 
クラシックエディターを既定のエディターに設定するには、設定»投稿設定の順にクリックし、すべてのユーザーのデフォルトエディターセクションのクラシックエディターにチェックを入れます。
 

 
クラシックエディターを設定したら、先ほどの固定ページの新規作成のページに戻り、ページタイトルを入力します。今回はコンテンツをすべてDiviで作成していくので、とりあえずタイトルだけ入力したら公開ボタンをクリックします。
 

 
ここで入力した固定ページのタイトルは、後々メニューに使用します。
今回はデモなので、ベーシックに

• Home
• About
• Service
• Blog
• Contact

の５ページを作成しました。

STEP 3 : メインメニューを作成

次にメインメニューを作成します。外観»メニューの順にクリックし、新規メニューを作成します。
メニュー名はなんでも大丈夫ですが、今回はPrimary Menuと名付けることにします。
メニュー名を入力したら、メニュー作成ボタンをクリックします。
 

 
メニューを作成すると、左側に先ほど作成した固定ページの一覧が表示されます。
メニューに追加したいものだけにチェックを入れて、メニューに追加ボタンをクリックすると下記画像のように、先ほど作成したPrimary Menuにメニューが追加されます。
 

 
メインメニューの順番は、ドラッグ&ドロップで変更することができます。
順番を変更したら、最後にメニュー設定の中のメインメニューにチェックを入れます。
設定がすべて完了したら、メニューの保存ボタンをクリックするのをお忘れなく！

FINAL STEP : 固定ページをメインページに設定

既定の設定では、ブログの投稿ページがメインページになっています。
今回はブログサイトではなく、シンプルな普通のウェブサイトを作成したいので、先ほど作成した固定ページの中の「HOME」をメインページにしたいと思います。
サイドバーにあるDivi»テーマカスタマイザー»ホームページ設定をクリックします。
 
ホームページの表示の中にある固定ページにチェックを入れると、下記のように固定ページを選択できるメニューが出現します。
 

 
今回はホームページにHome、投稿ページにBlogという固定ページを選択しました。
設定が完了したら、公開ボタンをクリックします。
これで初期設定はすべて完了です。
何かわからない点などあったら、お気軽にご質問ください^^
次回はいよいよビジュアルビルダーを使っていきたいと思います。
 
それではまた次回のチュートリアルでお会いしましょう。See you later<3