こんにちは根本です
今回はAstraっていうWordPressテーマの使い方を
ご紹介していきたいと思います
このAstraっていうのはElementorと
相性の良いテーマとして1位2位を争うくらい
有名なWordPressテーマになっています
このAstraを使うメリットとしては表示スピードが早かったりとか
あとは他のプラグインとの相性がいいっていうのがあります
Elementorはもちろんなんですけど
他にもWooCommerceとかLearnDashとかですね
そういうECサイトオンラインショップを作ったりとか
オンラインスクールを作成するのにも適した
WordPressテーマになっていますので
シンプルにホームページとかブログだけではなくて
そういうサイトも作っていきたいっていうふうに思っている方は
ぜひ使ってみてください
じゃあ今回Astraをインストールして
基本的なカスタマイズ方法だったりとか
あとはちょっとした便利な機能もあったりしますので
それをご紹介していきたいと思います

Astraテーマインストール方法

じゃまずはAstraテーマのインストールから
やっていきたいと思います
WordPressにログインをしていただいて
外観のテーマに移動します
そして新規追加というボタンをクリックして
Astraで検索をしてみてください
そしたらこちらですね。インストールをして有効化します
これで有効化が終わりました
じゃあ次に実際に設定についてご紹介していくんですけど
その前にAstraのスターターサイトっていうのがあるので
それをご紹介していきたいと思います
このAstraスターターサイトって何かっていうと
Elementorのテンプレートが
パッケージ化されているものなんですね
まあこれからElementorを使って
サイトを運営していきたいっていうふうに思っている方は
そのパッケージ化されているので統一感のあるサイトを
ぱぱっと簡単に作成することができるようになっています
もちろんElementorのテンプレートを使っても
全然OKなんですけどそういう統一感のあるサイトを
作りたいって方はぜひ使ってみてください

Astraスターターサイト使い方

でそのAstraのスターターサイトの使い方を
どうすればいいかっていうと
外観のAstra設定に移動してください
プラグインをインストールすることもできるんですけど
Astraの設定に移動します
そしたらこちらですね。インポータープラグインをインストール
っていうリンクがありますのでこれをクリックします
で次の画面ではセレクトページビルダー
ページビルダープラグインを選択してくださいっていうふうに
言われているんですけど使っているものを選択してください
まあ基本的にはElementorですね
今回はElementorを使っていきますので
Elementorを選択して
次にテンプレートを取り込んでいきます
まあたくさんあるんですけど一つ注意していただきたいのは
このエージェンシーのタグですね
このタグが付いている場合は有料プランでしか使えませんので
ついていないものを選択して取り込んでください
まあ無料で使えるものをたくさんありますので
まあ悩んでしまうと思うんですけど
好きなものを選択してそしてインポートをしていきます
でインポートの種類は2つあって
すべてのこのページをインストールするのか
それともまあ個別に例えばホームページだけとか
アバウトページだけとかそういう単体で取り込みたいって場合は
右のインポートアバウトテンプレートこのボタンをクリックして
取り込んでいきます
すべてインポートしたい場合はインポートコンプリートサイト
っていうボタンをクリックしてください
ちなみにこちら一番左のボタンでは新しいタブを開いて
テンプレートを確認することができます
まあ外観を細かくチェックしたいって方はプレビューしてみてください
はいじゃあインポートコンプリートサイトして
全てのテンプレートを取り込んでしまいたいと思います
そしてインポートですね
で取り込んでいる最中に別途プラグインをインストールされる
可能性があります。先ほどはWP Formっていうプラグインが
インストールされていたんですけど
それはお問い合わせフォームを作成するプラグインですね
が自動的にインストールされるようになっています
はい。で無事に取り込むことができましたら
ビューサイトで外観をチェックしてみてください
ホームページはこんな感じですね
で設定されていてアバウトページ。それからサービスページ
プロジェクト。あとはお問い合わせですね
がこのような感じで自動的に生成されますので
あとはElementorを使ってテキストを変更したりとか
あとはこのフォームを変更したりっていうのをやってみてください
例えばホームページを変更したいっていう場合は
ホームページを開いた状態でElementorで編集します
はい。そうするとElementorの編集画面が表示されますので
こちらでテキスト変更していってください
あとはボタンにリンクを追加したりですね
それからElementorの編集画面でも
Astraのスターターテンプレートをインストールすることができます
こちらのアイコンをクリックしてページとかブロック
ブロックだと1ページまるまるっていうわけではなくて
セクション毎ですね。にテンプレートが作成されていますので
部分的に追加をしたいっていう場合はブロックに切り替えて
テンプレートを追加してみてください
ページの場合はページに切り替えて先ほどご紹介したように
エージェンシーは使えませんのでまあ無料では使えませんので
ついていないものを選択をして取り込んでみてください
例えばこのマウンテンってホームページを選択して
でインポートテンプレートをします
はい。こうすることによってページの下に新しいテンプレートが
反映されるようになります
このような感じでインポートしたテンプレートを編集してみてください

Astraテーマカスタマイズ方法

そしたら次にAstraテーマのカスタマイズ方法を
ご紹介していきたいと思います
このページの編集の仕方ではなくてテーマのカスタマイズ
テーマの編集方法をご紹介していきます
ページを変更した場合はアップデート更新をして
左上の三本線をクリック。そしてダッシュボードに戻ってください
はい。でダッシュボードに戻ってきたら
外観のカスタマイズに移動します
そうするとこのような画面が表示されますので
こちらで設定をしていきたいと思います
まずは全般設定を開いてください
そうするとタイポグラフィとか色とかコンテナ
あとはボタンっていう4種類設定項目があって
タイポグラフィではテキストとかですねの変更ができます
ファミリーではフォントを選択することができて
次のバリエーションではボールドするのかとかあとは
ノーマルとかですね。あとイタリックっていうのもあったりします
それからテキストの大きさ。これは通常の文章ですね
こういう見出しではなくて
通常のこういうところの文字の大きさになります
ここを変更することによって通常の文章の大きさが切り替わります
あとは太さとか文字の変形
例えば先頭の文字を大きくしたいっていう場合は
まあ大文字にしたいっていう場合は先頭大文字を選ぶことによって
こんな感じで先ほどは文頭だけが大文字になっていたんですけど
単語の一番最初の文字がすべて大文字に切り替わりますね
それから行の高さこの行の高さっていうのは
このような感じで2行にわたるとかそういった場合は
そのここの隙間が調節することができます
であとは段落の下部マージンっていうところで
段落が複数にわたるっていう場合は
その段落の下に余白をつけることが出来ます
これがタイポグラフィですね
で次の見出しに関してはこういう通常の文章ではなくて
ヘッディングH1からH6の設定になります
その見出しのその見出しのフォントとかバリエーション
ボールドしたりイタリックにしたりとかあとは太さとかですね
まあ先ほどとだいたい同じなんですけど
H1からH6までを細かく設定することができるようになっています
そしたら次色ですね。色では基本色っていうのがあって
ここでは通常のテキストの色とかまたテーマの色リンクの色
リンクホバー色っていうのがあったりします
この文字の色とか見出しの色とかに関しては
Elementorの編集画面で変更することができます
これはデフォルトの色ってことですね
それからリンクのホバー色っていうのは
リンクにマウスカーソルを置いたときの色になります
例えばこのテキストにリンクを追加した場合
そのリンクテキストに関してはここのリンク色が
反映されるんですけどリンクホバー色に関しては
マウスカーソルを置いた時だけ反映されます
はいこれが基本色ですね。このテーマの色とかリンクの色
リンクホバー色に関してはElementorの編集画面では
変更することできませんのでこちらで設定をしてみてください

コンテナ(ページレイアウト)

じゃ次はコンテナについてご紹介していきます
このコンテナって何かっていうとページのレイアウトですね
固定ページとかブログ記事とかを表示しながら設定をしてみてください
今回ブログ記事を開いて確認をしていきたいと思います
まず一番上の幅についてはこれは横幅ですね
デフォルトで1200になっていますけど
これを一番右の1920にして公開をしてみると
デフォルトの横幅はこんな感じになっています
今横幅を広くしましたのでこんな感じでコンテンツの幅が
横に長くなるわけですね
で次のレイアウトについてはいろいろタイプがあって
ポックスとかコンテンツのみボックスと全幅
収めるとかストレッチとか色々あって
表記を切り替えることができます。こんな感じですね
先ほどサイドバーに関してもまあボックス形式になっていたんですけど
それがなくなったりとかレイヤーと変更することができますので
好きなものをドロップダウンから選択をして公開してみてください
でちなみにその下の固定ページレイアウトとか個別投稿レイアウト
アーカイブレイアウトのデフォルトについては
このレイアウトが反映されます
例えば今コンテンツのみボックスになっていますけど
これが今デフォルトになってるわけですね
でこれをボックスに切り替えると
今度はボックスがデフォルトになります
なのでもし固定ページとか一般的なブログ記事で
レイアウトをバラバラにしたいっていう場合は
デフォルトからボックスに切り替えたり
投稿ページだと全幅収めるに切り替えることによって
別々のレイアウトにすることができます
このように好きなレイアウトを選択して公開しておいてください

ボタン設定

はいじゃあ次はボタンですね
ここではこういうボタンの色デフォルトの色が設定できます
まず色を開いていただいて今回のテンプレートに関しては
ピンク色が設定されているんですけどこんな感じで色を切り替えたり
これはサイト全体で切り替わりますね
あとは文字の色それからマウスオーバーに切り替えると
マウスカーソルを置いたときの色も設定できるようになっています
で次の枠線についてはこのボタンの外枠ですね
幅をちょっと大きくして設定をしてみるとこんな感じで
デフォルトだとピンク色になっているんですけど
その色を例えば黒とかあとはホバー時の色
あと丸みですね。この丸みっていうのはこの4つの角の丸み
例えば0にすると直角になりますし数値を上げていくと
どんどん丸くなっていきます
もし透明にしたいっていう場合はもう一度色を開いて
色一番左に持っていってください
で次はタイポグラフィですね。ボタンテキストのフォントとか
太さとか大きさが設定できます
で一番下の間隔についてはパディングですね
パディングってなにかっていうとこの外枠と中のコンテンツ
テキストの隙間を調節することができます
まあ上下左右バラバラに設定することできるんですけど
もし同じ値を設定したいっていう場合は
まあ別々に設定してもOKなんですけど一番左を
連結させることによって同じ値を設定することができます
バラバラにしたいっていう場合は一旦解除をして
それから大きさを整えてみてください
こんな感じですね。はいこれがボタンの設定になります

ヘッダー

では次はヘッダーについてご紹介していきます
このヘッダーっていうのはサイトのこのヘッダーとか
メニューの部分ですね
まずサイト基本情報についてご紹介していきます
じゃあまずはサイトのロゴについてですね
サイトのロゴはまあ表示しなくてもOKです
テキスト形式のタイトルを表示したければ画像を削除して
でその下のサイトタイトルここを表示に切り替えてください
こうすることによって画像ではなくて
テキスト表示することができます
でもし画像設定した場合はロゴ幅っていうところで画像の大きさが
調整できますので好きなように設定してみてください
でちなみにこのレティナ用ロゴについてはレティナの端末を
使っている場合ですね。で反映されます
で次はサイトタイトル。まあ今設定した項目なんですけど
もしサイトのロゴ。画像とテキスト形式のタイトルを同時に
表示したければインラインロゴサイトタイトル
ここにチェックを入れることによってちょっとロゴ設定してみますね
こうすることによってロゴの画像とテキスト両方表示することができます
あとはサイトのキャッチフレーズですね
まあこれは基本的に表示しなくていいんじゃないかなと思います
サブタイトルみたいなものなんですけどもし表示したければ
チェックを入れてこんな感じで表示してみてください
まあ表示するのであれば画像は非表示にした方が
いいかもしれないですね
はいそれからサイトタイトルとかキャッチフレーズを表示する場合は
そのタイポグラフィ文字の大きさも調整できますので
設定しておいてください
で一番下のサイトアイコンについてはこれはファビコンになります
例えばYouTubeであればここのChromeのタブを
見てみるとページの名前の左側にロゴが表示されていますけど
これをファビコン。サイトアイコンっていうふうに言います
これは正方形の画像を作っておいてそれを設定しておいてください
まあ今回は正方形の画像ないんですけどこんな感じで
選択をして画像を切り抜いて反映させます
まあここにも書いてありますね。プラウザのアイコンとして使うことが
できますっていうのが書かれています
はいこれがサイトアイコンになります

メインヘッダー

じゃあ次はメインヘッダーについてご紹介していきます
このAstraでは全部でレイアウトが3つあります
サイトのロゴを一番左に持ってきて
右側にメニューを表示するパターンですね
それからロゴ上でメニューを下にするパターンと
ロゴを右側で左側にメニューを表示するパターンの
全部で3種類あります
好きなものを選択して設定してみてください
ちょっと画像が邪魔なので
はいじゃ続きを見ていきたいと思います
じゃあ次の幅についてですね
次の幅は全幅とコンテンツの幅2つタイプがありますので
好きな方を選んでおいてください
で下部ボーダーサイズ。これなにかっていうと
このサイトのヘッダーの部分と下に表示されるコンテンツですね
ここの境目を見せるかどうかになります
数値を大きくしていくとボーダーが表示されますので
どこからがヘッダーなのかっていうのがちゃんと
見えるようになります
あとはボーダーを追加した場合はそのボーダーの色ですね
を好きな色で設定しておいてください
あとは色を設定するだけではなくて透明度も調整できますので
まああまり目立たせたくないっていう場合は
つまみを左のほうに持っていくといいんじゃないかなと思います
で一番下についてはモバイルヘッダーですね
タブレットとかモバイルに外観を切り替えてチェックしてみてください
こんな感じでレイアウトが2種類ありますので
好きな方を選択して公開します。はいこれがメインヘッダーですね

メインメニュー

じゃ次メインメニューをご紹介していきます
まずはメニューを無効化。このホームとかアバウトとか
サービスとかこれを表示したくなければ
ここにチェック入れておいてください
まぁでも基本的にはチェック入れておかなくて
いいんじゃないかなと思います
あとはメニューの最後の項目っていうところでは
ここですねテイクアクションっていうボタンをなしにするのか
それとも検索アイコンに切り替えるのか
あとはボタンとかテキストウィジェットにすることもできます
それからスマホとかタブレットでは今回検索アイコンですね
これを非表示にしたいという場合はチェック入れておきます

サブメニュー

じゃ次はサブメニューについてご紹介していきたいと思います
サブメニューって何かっていうと
これは副項目を追加している場合ですね
ダッシュボードの外観のメニューに来ていただいて
こちらでメニューが設定できますけど
例えばこのホームの下にアバウトページを副項目として
追加する場合にここで設定した項目が反映されるようになります
アニメーションでその副項目を表示する場合の
アニメーションが設定できてあとはコンテナですね
まあちょっとわかりづらいので一旦メニューを保存して
反映してみたいと思います
こんな感じでホームの下にアバウトが表示されてますけど
ここのアニメーションそれからコンテナの枠線ですね
デフォルトだと上に2ピクセルだけオーダーが追加されています
ここの枠線が調整できるわけですね。はいそれから枠線の色
今ピンクなっていますけどこれを黒に切り替えたりとかっていうのが
できたりします

モバイルメニュー

じゃあ次はモバイルのメニューについてです
この一番最初のブレークポイントって何かっていうと
モバイルに切り替えるとこれメニューがトグルされますよね
このトグルされる幅を設定します
例えば1000って入力すると1000ピクセル以下の画面だと
メニューがトグルされるっていう設定になります
あとラベルをつけることができてこんな感じでとトグルの中に
テキストを追加したりとかあとはボタンのスタイルですね
アウトライン。ミニマル。全部で3種類ありますので
好きなものを選択してあと枠線の丸みですね
これは先ほどのボタンと同じです

ドロップダウンターゲット

で一番最後のドロップダウンターゲット
これなにかっていうとアイコンを選択すると副項目がアイコンを
クリックしないと表示されないんですけどリンクを選ぶことによって
メニューテキストをクリックすれば副項目を表示することができるって
いうような設定になっています
まあ特に設定はデフォルトのままでいいんじゃないかなと思います

透過ヘッダー

はいそしたら次透過ヘッダーですね
これ何かっていうとこのヘッダーを透明化させることができます
インポートしたサイトテンプレートについては全てのページで
ヘッダーが透明化されているんですけど
記事を確認してみると背景が白くなっています
これをもしサイト全体で透明化したいっていう場合は
ここにチェックを入れてあとは透明化したくないものがありましたら
チェックこんな感じで外してみてください
あとはこの透明化をデスクトップだけで有効化するのか
それともモバイルだけデスクトップもモバイルも両方でするのか
っていう設定ができたりします
であとは透明化した場合のサイトのロゴと
あとは透明化していない場合のサイトのロゴを
別々で設定したいっていう場合はその下で透明化した場合の
ロゴを設定してみてください
ここら辺はサイトの基本情報と同じですね
設定項目が同じになっていますのでここは飛ばしたいと思います

パンくずリスト

はいじゃあ次はパンくずリストについてご紹介していきたいと思います
このパンくずリストって何かっていうと
その表示しているページのまあ位置関係ですね
デフォルトなしになっているのでちょっとタイトルの前に
設定をしてみるとこんな感じで
ホーム2021年1月13日で記事6っていうタイトルが表示されてますけど
サイトの構成上この記事6っていうのがどの位置にあたるのかっていうのが
こんな感じでパンくずリストとして表示してくれるようになります
でこのパンくずリストをどの位置に表示するのかっていうのを
この位置で選択するわけですね
ヘッダーの内側とかヘッダーの後とかまあヘッダーの後にすると
こんな感じでヘッダーの中に追加されます
あと次の区切りっていうところで今回は矢印になっていますけど
これを例えばハイフンで区切ったりですね
こんな感じで変更することができます
はい。でその下はチェックボックスが用意されていて
ホームページで無効化したりとか投稿一覧ページ検索ページとかで
このパンくずリストを無効化することができます
はい。あとは配置だったりとかコンテンツの色ですね
背景色。文字の色。リンクの色。区切りの色とかが
細かく設定することができるようになっています
で次のコンテンツに関してはフォントとかサイズですね
なので飛ばしたいと思います
で一番下の間隔についてはこれはパンくずリストの
コンテンツの枠組みです。このパンくずリストの範囲をもうちょっと
広くしたい場合はどんどんこの間隔を上げていってください
はい。そうすることによってこんな感じでちょっと幅を
広くすることができますね

ブログ

じゃあ次はブログについてご紹介していきます
まずブログとアーカイブについてはこれは記事一覧ですね
での設定になります。でその下の個別投稿については
一般的なブログ記事ですね。こちらの外観になります
でこのブログアーカイブを設定する場合は
記事一覧を表示してみてください
投稿のカテゴリーに移動して設定している
カテゴリーページを開いてみてください
今回未分類っていうのがありましたので
この未分類を表示したまま設定をしていきます
まずコンテンツの幅についてはこれは先ほどもやりましたよね
カスタムに切り替えることによってブログ一覧ページ
アーカイブページの横幅が設定できます
こんな感じです。それから次の投稿構造については
デフォルトでアイキャッチ画像とタイトルとブログのメタ情報
っていう3つ表されています。ここですね
アイキャッチ画像とタイトルとこのコメントするとか
未分類とかこういうのをメタ情報っていうんですけど
これを表示するかどうかの設定コンクになります
表示したくなければ例えばブログとタイトルとブログメタ
これを非表示にして公開をするとこんな感じで
アイキャッチ画像だけが表示されるようになります
でもしこのタイトル＆ブログメタこれをオンにすると
その下にメタ情報っていうのが表示されてこちらでコメントとか
カテゴリーとか表示したいメタ情報をそれぞれオンにして
表示することができます。こんな感じですね
で次の投稿コンテンツ記事一覧では複数の記事が表示されますけど
全ての記事の全文を表示したければ全文に切り替えてみてください
まああまり全文を使うっていう場合はないと思うんですけど
もし全文表示したければ全文に切り替えて設定をしてみてください
そして最後タイポグラフィっていうところで
文字の大きさアーカイブタイトルとか記事タイトルの大きさを
設定することができます

サイドバー

はいじゃあ次はサイドバーについてご紹介していきます
このサイドバーに関しても固定ページとかブログページとか
あとアーカイブページでバラバラに設定することができます
まあ一番トップのこのデフォルトのレイアウトについては
先ほど全般のコンテナと同じ使い方です
ここでサイト全体でのデフォルトのレイアウト
右にサイドバーを置いたりとか左にサイドバー置いたり
もしくはサイドバーなしにすることもできます
それでページを開いてみるとこんな感じで
サイドはなくすことができるわけですね
でサイドバーはバラバラに固定ページとかブログページで
バラバラに設定したい場合はそれぞれのドロップダウンから
サイドバーなし固定ページでもサイドバーなしにして
ブログ記事では右にサイドバーを置いたりっていうのが
できたりします
あとはそのサイドバーの幅も一番下のところで
調整できるようになっていますので
好きなように微調整をして公開してください
でちなみにこのサイドバーのコンテンツについては
ダッシュボードのまあ知ってる方は多いと思うんですけど
外観のウィジェットに移動してこちらで設定することができます
サイドバーに関してはこのメインスライダーというところですね
で設定することができます。はいこれがサイドバーの設定です

フッター

じゃあ最後にフッターについてご紹介して終わりたいと思います
フッターはというとまずフッターウィジェットですね
フッターを表示するかどうかの設定ですね
デフォルトで無効化になっているんですけど
このページの下側ちょっとスクロールをしてください
で右のこのレイアウトに切り替えることによって
4カラム表することができます
そしてまずトップボーダーのサイズ。ここでちょっと数値を上げて
こんな感じで設定をしてみるとメインのコンテンツと
このフッターの境目ボーダーが表示できるようになります
そして設定をした場合はこのトップボーダーの色っていうところで
色の設定をしてみてください
であとは背景を開いてバックグランドカラーを変更したりとか
それからコンテンツタイトルの色。文字の色
あとはリンクの色ですね。が設定できるようになっていますので
デフォルトのままだと嫌だっていう場合は
こちらの設定もやってみてください
はい。であとはフッターバーですね
フッターバーっていうのもあってこれは本当に一番下の
項目になります。コピーライトの部分とかですね
ここをなしにしたりとか一つ目のセクションを上に表示して
でその下にセクション2っていうレイアウトにしたり
あとはセクション1を左側でセクション2を右側に置くパターン
全部で3つありますので好きなものを選択していただいて
コンテンツを表示する場合はセクション1とセクション2
が設定できるようになりますので
ドロップダウンから好きなものを選択してください
テキストを表示するのかそれともウィジェットを表示するのか
あるいはフッターメニュー
このメニューはこのヘッダーと同じようなものですね
が標準機能になっていますので好きなものを選択してください
もし表示したくなければ片方だけ非表示にすることもできます
こんな感じですね
はい。でテキストを表示する場合はサイトの名前だったりとか
あとは企業情報ですね。電話番号とかメールアドレスとか
そういうのを表示してみてください
あとはリンクも追加することができて
その場合どうすればいいかっていうと
まあブログ記事をまず開いてみてください
そして何かテキストを入力して選択をした状態で
でリンクを追加してください
はい。でリンクを追加します。そしたらこの3つの点をクリック
そしてHTMLとして編集します
そうするとHTMLコードが生成されますので
これをコピーしてきてこちらに貼り付けます
まあ一旦縦棒を追加してこんな感じでリンクも追加できますので
必要があれば設定をしてみてください
例えばなんですけどプライバシーポリシーページとか
利用規約とかそういうの一番下で表示するケースがあると思いますので
そういうを表示したければ今をお伝えした手順で
リンクを追加してみてください
でセクション2については今回テキストになっていますけど
ウィジェットにすることによって外観のウィジェットで
設定することができます。外観のウィジェットですね
はい。そしてフッターウィジェットエリアについては
このフッターバーではなくてこの上の部分ですね
全部で4つありますのでフッターバーの上のエリアを設定して
バーについてはフッターバーセクション1と2がありますので
こちらにウィジェットを追加してみてください
今回セクション2になりますのでこちらにじゃあカレンダーを追加します
はいそしてページを更新してみるとこんな感じでセクションの2つ目に
カレンダーが追加できるわけですね
それからこの枠線サイズっていうのはこのフッターウィジェットと
フッターバーのこの境目のボーダーが設定できてあとは背景ですね
フッターバーセクションの背景とコンテンツ文字の色とリンクが
設定できるようになっていますのでこちらも変更しておいてください

エンディング

はい。ということでこれでAstraテーマのカスタマイズ方法は
以上になります
いろいろ設定項目はありましたけど結構いろんな設定項目
用意されていますけどどれもシンプルになっていると思いますので
簡単に設定できるんじゃないかなと思います
Elementor使ってる方はぜひ参考にしてみてください