PR

無料テーマ「Astra」で、デモサイト(工務店)を作ってみた。

WordPressの無料テーマ「Astra」は、コーディングの知識がなくても簡単に見栄えのするサイトを構築できます。無料のアドオンpluginで、スターターテンプレートをインポートできる機能があり、ページ単位ではなくて、サイトまるごとのテンプレートをインポートできます。各テンプレートはカスタマイズ可能で、人気のページビルダーElemenorと互換性があります。また、Astraテーマは、ファイルサイズが軽いため、ページの表示速度が早いでのが特徴です。
今回、Astraテーマを使い、Elementorでカスタマイズして、DEMOサイトとしてコーポレイトサイト(工務店)を作ってみましたので、作り方などをご紹介します。

完成したDEMOサイトは、こちらです。

【初心者でも安心】たった10分で出来るWordPressブログの始め方 初心者のためのブログ始め方講座
スポンサーリンク

テーマのインストール

ASTRAのインストール

「新規追加」をクリック

外観のテーマから、新規追加をクリックします。

テーマの新規追加

テーマのインストール

ASTRAを選択
ASTRAの選択
ASTRAの有効化完了
有効化の完了
スポンサーリンク

ページビルダーのインストール

Elementorのインストール

「新規追加」をクリック

プラグインの「新規追加」をクリックします。

プラグインの新規追加

Elementor Website Builderの選択

検索窓からElementorと入力して検索します。

Elementor Website Builderの選択

Elementorのインストール

Elementorをインストールして、有効化します。

Elementorのインストール

テンプレートの取得

ASTRAデモデータの取得

Astraにはテンプレート(デモデータ)を取り入れることができます。デモデータを使ってサイトを構築していきます。

「Starter Templates」をクリック

テンプレート一覧

赤丸で囲っているものは有償となりますので、無料のものを選択します。

テンプレートの選択

ここでは、「Roofing Services」を選択します。

選択されたテンプレート

テンプレートのダウンロード

「Import Complete Site」をクリック
Import Complete Siteボタン
サイトの目的、名前、email等の入力
サイトの目的、名前、email等の入力

ASTRAデモデータの確認

テンプレートの表示

ViewSiteをクリックするとテンプレートが表示されます。

選択されたテンブレートの表示

固定ページの確認

テンプレートがダウンロードされましたので、どのようなデモデータが作成されているか?を確認します。

WordPressのダッシュボードに戻る
ダッシュボードの選択
固定ページの確認
固定ページの確認

HOMEの編集

ヘッダー文章の編集

「編集」をクリック

HOMEの編集ボタン

「Elementorで編集」をクリック

「Elmentorで編集」ボタン

タイトルの変更

ペンマークをクリック
ペンマーク
コンテンツの編集
タイトルの編集画面
変更の確認
変更の確認

テキストの変更

テキストのカラムのペンマークをクリックして、コンテンツの変更をします。

「見出しの編集」ボタン

ボタンの編集

ボタンの編集

フォント、サイズの変更

お勧めは、「Note Serif JP」です。サイズはバーで調整します。

フォント、サイズの変更
書式のコピー

テキストも同様にフォントを変えますので、書式をコピーします。HappyCareにカーソルを位置づけて右クリックからコピー

書式のコピー

そして、スローガンにカーソルを位置づけて右クリックから、スタイル貼り付けをクリック

スタイルの貼り付け
サイズの変更

文字サイズもコピーされますので、サイズを変更します。

サイズの変更
スペースの調整

お問い合わせとSNSの間にスペーサーを入れます。

スペースの調整

パディングの変更

セクションの編集をクリックして、調整します。

パディングの変更

ヘッダー画像の差し換え

「セクションの編集」をクリック

セクションの編集

「スタイル」をクリック

スタイルのクリック

「画像の選択」をクリック

画像の選択

画像の差し換え

画像が取り込めました。が、背景の画像が明るすぎて、文字がみえませんので、背景画像を暗くします。

背景画像「ソファーでくつろぐ親子」

背景オーバーレイに画像挿入

背景オーバーレイの選択

背景オーバーレイのスタイルから、背景タイプの「クラッシック」をクリック

背景オーバーレイの選択
画像の挿入

オーバーレイに同じ画像を挿入します。

背景画像の削除

オーバーレイに同じ画像を挿入し、背景と重なっていますので、背景から画像を削除します。

背景画像の削除

背景オーバーレイの調整

不透明度の調整

背景オーバーレイの画像がすこし暗すぎるので、少し不透明度を高めます。

不透明度の調整
サイズの調整

サイズは、「カバー」を選択します。

サイズの調整

SNSの設定

ペンマークをクリック

「ソーシャルアイコンを編集」をクリックして、コンテンツで調整します。不要なアイコンは削除して、URLを設定します。

SNSの設定

サービスの編集

4カラムを3カラムにして、そこにサービス内容を記述します。

カラムの変更

画像の差し換え

スタイルの選択

こちらの本体の画像は、カラムに入っているので、ノートマークをクリックして、スタイルを選択します。

スタイルの選択
画像の差し換え

サイズはカバー、不透明度を調整します。

画像の差し換え
画像の差し換え完了

同様に他のカラムの画像も差し替えます。

差し替え完了した3カラム
リンクの設定
リンクの設定

注意:文章も差し替えを行っていますが、ここでは省略しています。

お問い合わせの設置

WPFormの設定

デフォルトの状態でWPFormが入っていますので、WPFormを使います。

フォームの編集

WPFormから、Contact fromの「編集」をクリックします。

wpformの編集

Nameの枠内(破線)をクリックします。

Name枠内の破線

項目の編集

項目の編集
ラベルの変更
ラベルの変更
プレースホルダーの設定

「Advanced」タグを選択して、プレースホルダーを入力します。

プレイスホルダーの設定

保存

設定の保存

ショートコードの取得

ショートコードの取得

お問い合わせの編集

固定ページで「お問い合わせ」というページを新規作成します。そして、「ショートコード」ウィジェットを挿入して、ショートコードを記述します。

ショートコードの設定

メニューの作成

メニューの追加

メニューの編集は、Elementorではなく、ASTRAとなるので、外観からカスタマイズをクリックします。

外観からカスタマイズの選択

ページの追加

新しいページの追加

ページを追加して、メニューに挿入します。

ページの追加
追加の確認
追加されたページ

固定ページにも追加されています。

ページの追加された固定ページ一覧

メニュー項目名の変更

メニュー項目名の変更
メニューの表示
表示されたメニュー
HOMEの選択

メニュー項目名をHOMEから、ホームへ変更します。

ホームの名称変更

フォントの変更

ベースタイポグラフィの選択
ベースタイポグラフィの選択
本文フォントファミリーの変更

Noto Self JPとしました。サイズは16

本文フォントファミリーの変更

メニューの編集

メニューの背景、色の変更

右と左の2カラムで構成されていますので、両方の調整が必要です。

メニューの編集ボタン
左カラム

背景を黒とします。

背景黒の選択
右カラム

右カラムも同様、背景を変更します。

メニューの編集ボタン

こちらは、テキストもありますので、テキストの色、ホバー時の色も設定します。

テキスト色の選択

フッターの編集

フッターのカラム構成

3つのカラム全体と先頭のカラム
真ん中のカラム

フッターウィジェットの設定

フッターウィジェット

よくある質問の設置

「よくある質問」ページの作成

新規ページの作成

固定ページで、「よくある質問」として新規ページを作成します。

新規作成した「よくある質問」ページ

画像の挿入

画像の挿入

注意:ウィジェットは、「アコーディオン」ではなく、「切り替え」を使いました。

レイアウト(セクション)

コンテンツの幅:ボックス、高さ:最小の高さ

幅、高さの調整
スタイル
カバーの選択

タイトルの挿入

コンテンツ(カラム)
タイトルの設定
スタイル
スタイルの設定

スマホの調整

現象

特定のページのみ画像の高さの調整が効かない。「注文の流れ」ページは、最小の高さのバーは、何も入力せずとも画像は正しく表示されるが、会社案内では画像が伸びている。

正しい
正しい画像
誤り
誤った画像

但し、「画面幅に合わせる」を選択すると、正しく表示される。

「画面幅に合わせる」を選択した画像

原因

不明。スマホを「画面幅に合わせる」と設定すると、PC側が「画面幅に合わせる」に変わってしまうので、この対処はできない。

対応

最小の高さのバーの箇所に0を入力すると、正しく表示される。