Astra + Elementorでウェブサイトを10分で作る方法【無料で初心者でもできます】

無料でサイトを作れるものって結構ありますけど、時間がかかったり、カスタマイズできなかったり、色々とめんどくさいものが多いです。
AstraテーマとElementorの組み合わせて使うと、高速で綺麗なデザインの完成したウェブサイトをほんの10分そこらで構築することができます。
Elementorとは見たままサイトを構築し編集できる、ページビルダーというツールの一種です。

この記事を読み終わる頃には、あなたの新しいウェブサイトが完成してることでしょう。

この記事はもうすでにWordPressをインストールした方を対象としています。
まだインストールしてない方は、この記事にしたがってエックスサーバー でアカウントを作ることをオススメします。
完全に無料です。
＞＞エックスサーバーのアカウント作成からWordPressイントールまで(10~20分)【初心者向け】
大丈夫です。１０日間の無料トライアルがありますので、１０日たって必要ないと思ったら何もしなければ、請求されることはありません。

それでは始めます!

最初にElementorとAstraをインストールしますが、もうすでにそれらをインストールしてある方は『Astraでスターターサイトをインポート』までスキップしてください。

Elementorをインストール

あなたのWordPressのダッシュボードからプラグインセクションに行きます。
そして新規追加を押します。

『Elementor』と検索し、『Elementor Page Builder』が出てきたら『今すぐインストール』を押します。

そして有効化します。
これでElementorが使えるようになりました。

Astraをインストール（完全に無料）

二つのインストール方法がありますので、それぞれ紹介します。

本家のサイトから直接ダウンロード

AstraはAstraの公式サイトからダウンロードすることができます。
＞＞Astraの公式サイトはこちら

大きく表示してある『DOWNLOAD NOW』というボタンを押します。

こういうポップアップが出るので、『No thanks, I just want to download Astra』をクリックします。
そうするとAstraのテーマのファイルのダウンロードが始まります。

ダウンロードしたファイルをインストール

外観からテーマにいき、まずは『新規追加』をクリックします。

『テーマのアップロード』をクリックします。

ここから先ほどダウンロードしたファイルを選択し『今すぐインストール』をクリックします。

『有効化』をクリックします。

これでインストール完了です！

WordPressのテーマサーチからAstraをインストール

もう一つのインストール方法を紹介します。

Astraはテーマなので、ダッシュボードの『外観 → テーマ』へ行きます。
そして『新しいテーマを追加』を押します。

『astra』と検索すれば、すぐにAstraと言うテーマが出てきますので、クリックします。

そして『有効化』を押します。

Astraがインストールされました。
これで準備完了です。

Astraでスターターサイトをインポート

ここではAstraのスターターサイトのテンプレートを使い、プロが作った綺麗なサイトをインポートします。
大丈夫です。
どうやって自由に編集するのかインポート終了後に説明します。

Astraのインポータープラグインをインストール

『外観 → Astra』の設定へ行きます。
そして右側にある『インポータープラグインをインストール』と書いてるリンクをクリックします。

このように表示されるので待ちます。

Elementorを選択する

『Elementor』を選び、『Next』ボタンをクリックします。

Astraのスターターサイトを選ぶ

Astraのスターターサイト一覧が表示されるますので、『Free』と書いてあるタブを選択します。

Astraの無料スターターサイト

これらがAstraの無料スターターサイトです。
全部で51のサイトがあります。

どのサイトを選んでもいいのですが、この記事ではこの画像の『Digital Agency』を使います。
このサイトを見つけて、クリックします。

選択したサイトのインポート

『Import Site』と書いてあるボタンをクリックします。

Astraのサイトのインポートの開始です。2-10くらいで終わると書いてます。
そしてブラウザを閉じないようにと警告しています。
数分で完了しますよ。

お疲れ様です。
これでインポートは完了です!
完了したら『View Site』をクリックします。

• 

• 

• 

この時点でもうあなたのウェブサイトは使える状態にあります。

ページのリンクをクリックしてどんなページがあるのか見てみましょう。
次はいよいよ、インポートしたサイトをElementorで色々と変えていきます。

Elementorでページを編集、カスタマイズ

ダッシュボードに戻り、『固定ページ』にいきます。
Homeと書いてあるページにカーソルを持っていき、『Elementorで編集』をクリックします。

Elementorの編集画面

このような画面が出ます。
左側がElementorのツールです。

タイトルのテキストを変換

『Stunning Business Website』と書いてある部分をクリックします。
すると画像のように、左側にもテキストが表示されます。
それを好きなテキストに変えてみます。

サイトのタイトルが変わりましたね！
このサイトはElementorで構築されてますので、自由になんでも変えられるんです。
ちなみに、これは『タイトル』と呼ばれるウィジェットです。
Elementorはこのような『ウィジェット』を組み合わせてページを構築するんです。

背景画像も変えてみる

では次にこの背景画像を変えてみましょう。

背景画像はセクションにある

まずは、この画像の部分をクリックします。これはElementorの中の概念で、『セクション』と呼ばれるものです。
セクションとはウィジェットを入れるためのコンテナだと思ってください。

左側のElementorのツールの部分が、『セクションの編集』に変わります。
そうたら、『スタイル』タブを選択します。
そして『画像』と書いてある部分の現在使われてる画像をクリックします。

この画面が出ますので、好きな画像をあなたのコンピューターから選択します。

『メディアの挿入』を押します。

これで背景画像がアップロードされました。
因みにこの画像を使いました。
https://unsplash.com/photos/6dW3xyQvcYE

左下の『更新』というボタンを押します。
これであなたのサイトのホームページはアップデートされました。

このように他のページも色々と編集して、自分のサイトにしましょう！

---

Elementorをもっと学びたい方へ

この記事では少しかElementorの使い方を説明していませんね。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

日本唯一のElementorのコミュニティ

私が運営するサロンがありまして、ElementorとDivi(別なページビルダー)を使ってる人が集まっています。
是非チェックしてください。
この記事で説明しています。
＞＞DiviとElementorを日本語でサポートするコミュニティ【メンバー募集中】

読んでいただいて、ありがとうございました！