Astra Edit Memo

下記は、投稿などAstraでGutenbergを使用する際の注意点。Astraのカスタマイズに関するメモが大半だ。
Elementorで編集する場合のメモは下記を参照のこと。

Elementor Pro Edit Memo

駆け込み寺

分からないことがあれば、まずはこちらをチェック。さすが公式だけあって、かなり詳しく書いてある。

Astra Theme Documentation

無料版Astraでは出来ないこと

これはAstraに限った話ではないが、WordPressテーマやプラグインのベンダーが無料版を提供している理由は、有料版を購入してもらうためだ（Astraにも、有料版の「Astra Pro」が存在する）。だから、当然もの足りない部分はいくつか存在する。自分で使ってみて足りないと感じた部分とは、下記項目だ。

1. ヘッダーのカスタマイズ（メニュー＋ボタン等の組み合わせ不可）
2. メニューのカスタマイズ（追従、及びメガメニュー不可）
3. フッターのカスタマイズ（モバイル用固定フッタ―不可）
4. アーカイブページのカスタマイズ不可
5. 「トップへ戻る」ボタン無し

繰り返しになるが、有料版を検討するための無料版なのでこれらは致し方ないことだと思う。よって、これらの足りない点をどう補うかがポイント。Elementor Proを使えば上記③以外は解決する。

だが、このページはAstra＋Gutenbergに関するメモなので、Gutenbergでの解決策が必要だ。結論から言うと、Starter Templates＋いくつかのプラグインを組み合わせることで解決することが出来る。

Astraの無料版と有料版との細かい違いを把握したい場合には、下記ページを確認すること。リンク先は購入ページだが、ページ中ほどに比較表がある。

Full Comparison – Free Vs Pro | wpastra.com

全般設定について

カスタマイズ→全般から、下記4項目の設定が行える。

1. タイポグラフィ（フォント・本文、見出し）
2. 色（テーマ色、リンク／リンクホバー色、見出し色、文字色）
3. コンテナ（≒ページ幅。詳細は、公式ヘルプを参照）
4. ボタン

これらの項目で設定した内容がサイト全体に適用される。なので、最初にしっかり設定しておこう。なお、デバイスごと（デスクトップ（以下、PCと表記）／タブレット／モバイル）の調整も可能だ。

編集時にデフォルト表示されるのはPCだが、閲覧者の大半はモバイルになるはず。なので、モバイルでどのように表示されるかを良くチェックしておこう。都度修正するのは時間のロス以外の何物でもないからだ。

各項目に対する補足は下記参照のこと。

1. タイポグラフィ

まずはフォント。本文、見出しそれぞれお好みのフォントを設定可能だ。Googleフォントも最初から使用可能なのは嬉しい。

ちなみに、見出しと段落との間隔だがデフォルト状態では「間隔がない」。あまりに見づらいので、調整必須だ。

自分好みのスタイルに1発で決めるなら、追加CSSにCSSを追加して調整するのが早く・確実だ。だが、Astraの場合はテーマ側である程度の調整が可能だ。主な調整可能項目は、下記参照のこと。調整＝CSS確定となるHelloより、初心者に優しい作りになっている。

本文

• フォントファミリー
• バリエーション
• サイズ
• 行の高さ
• 段落の下部マージン

見出し

• フォントファミリー
• バリエーション
• サイズ
• 行の高さ

2. 色

色に関するチュートリアルは下記を参照。
→https://wpastra.com/docs/astra-global-color-palette-settings/

3. コンテナ

コンテナに関するチュートリアルは下記を参照。
→https://wpastra.com/docs/container-overview/

※コンテナレイアウトを変えると、エディターの幅まで変わるみたいだ。
全幅／ストレッチに設定すると、左端が見切れて作業しづらい。

4. ボタン

サイト内で用いるボタンの色やデザインをここで設定する。投稿や固定ページで使うボタンウィジェットは個別で色やデザインを変えられるので一見不要に思える。だが、トラップが多い項目なので要注意

トラップ①：Ninja Formsの送信ボタンはここで設定された形で表示された。表示されたボタンがイケてないと感じた場合は、ボタン設定を確認すること。

トラップ②：LPのボタンがヤケに小ぶりでカッコ悪かった。原因を調べた結果行き着いたのが、「ボタンのフォント」。ここでフォントを個別設定すると何故か先述のカッコ悪いボタンが出来上がる。下記設定に戻したところ復旧した。要注意だ。

• ファミリー：継承
• サイズ：空白
• 太さ：継承
• 文字の変形：なし
• 行の高さ：1（EM）
• 文字間隔：空白

ヘッダービルダー

ヘッダービルダーでは、下記項目の設定が可能。

1. サイトタイトル＆ロゴ
2. モバイル用ハンバーガーメニューのボタン設定
3. オフキャンバスメニューの設定

なお、透過ヘッダーの設定項目もあるが、追従しないので無料版では使えないな、という印象（Pro版なら追従可能なので設定する価値はあると思う）。

パンくずリスト

パンくずリストでは、下記項目の設定が可能。

1. パンくずリストの表示／非表示（ページごとの設定可能）
2. パンくずリストの表示位置／配置

なお、Rank Mathをインストールしている場合はRank Mathのパンくずリストも選択可能となっている。現段階では違いが判らなかったが、Rank Mathに慣れてくると面白いことが出来るかもしれない。

ブログ

この設定項目では「ブログ／アーカイブ」と「個別投稿」に関する設定が行える。普通に使っている「投稿」の設定は、「個別投稿」の方で行う。具体的な設定項目は、下記の通り。

1. コンテンツの幅
2. アイキャッチ画像の表示／非表示
3. 投稿タイトルの表示／非表示※
4. メタ情報（カテゴリー、投稿者、タグ等）の表示／非表示
5. 関連記事の有効化／無効化

投稿ページでElementor（シングルページテンプレート）を使わない場合は、これらの設定をカスタマイズしておく必要がある。

※【注記】投稿や固定ページのタイトルについて。
デフォルトだと「何でこんなに小さいの？」と言いたくなるくらいタイトルが小さい。タイトルサイズを大きくするには、個別投稿のデザインタブをクリックして、「投稿 / ページ タイトルのフォントサイズ」を調整すればOK。

サイドバーの表示／非表示について

カスタマイズ→サイドバーで変更可能。ちなみに、テーマビルダー（Elementor Pro）で作成したテンプレートには設定が影響しない模様。

フッタービルダー

Astraは、デフォルトで3段のフッターエリアを持っている。
メニューやコピーライト、その他ウィジェットを表示させることが可能だ。

注意点は、設定が少々面倒なこと。フッタービルダー上に追加したウィジェットにもそれぞれデザイン設定があるが、カラムにもデザイン設定があるので混乱しやすい。基本はウィジェットのデザイン設定で配置決めを行うこと。

また、何故かウィジェット上にナビゲーションメニューを追加しているのに、左揃え出来ないという謎現象にも遭遇（マージンを追加して無理やり合わせた）。ちょっとイマイチだが、Pro版ならこの辺の煩わしさも解消されているかもしれない。

パフォーマンス

Astraは、デフォルトでGoogle フォント（Webフォント）の読み込みが可能となっている。個人的に思うのが、モバイル閲覧時のデフォルトフォントのダサさ。特に英文がイケてない。ということで、このサイトでもGoogle Fontsのお世話になっている。

Webフォントはデバイスを問わず、美しいフォントを表示してくれる優れものだ。だが、ページスピードを低下させる要因でもある。そこで、「パフォーマンス」項目を設定しているのだと思う。設定可能な項目は下記の通り。

1. Googleフォントをローカルで読み込む
2. ローカルフォントを先に読み込む

両方ともONにしておけばいいと思うのだが、Pagespeed Insightsで測定すると毎回のように上記2項目の指摘を受けるのは何故だろう？キャッシュが原因なのか？

※上記指摘事項は、WP-Rocketを使えば解消出来る。

メニューの種類について

Astraのメニューは、下記5つに割り振ることが出来る。

1. メインメニュー：ヘッダーに表示するメニューを選択
2. サブメニュー：名前の通り。メイン／フッターで収まりきらない（分けたい）場合に使う
3. Off-Canvas Menu：ハンバーガーメニューに表示するメニューを選択
4. ログインしているアカウントのメニュー
5. フッターメニュー：フッターに表示したいメニューを選択

「Off-Canvas Menu」＝モバイル用メニューのこと（ハンバーガーメニュー内部に表示されるメニュー）。メニュー選択を間違えないように。

固定ページに抜粋を追加する

Astraは、デフォルトでは固定ページの抜粋を記入出来ない。こうなると検索時に表示される内容は100%Google任せとなるので、宜しくない結果になる可能性が高い。抜粋やディスクリプションを記入していても、Googleが違う部分を抜き出す可能性はある。だが、何もしないよりははるかにマシなので抜粋を記入出来るようカスタマイズを行う。

カスタマイズ方法はそう難しくはなくて、子テーマのfunctions.phpに下記コードを追加するだけ。

add_post_type_support( 'page', 'excerpt' );

Rank Mathを使えば、抜粋と別にディスクリプションを入れることが出来る。だが、まずは基礎知識として覚えておきたい。一応言っておくが、初心者の方はfunctions.phpを編集する前にバックアップを取っておいた方が良い。

投稿用の見出しについて

Starter Templatesを使ってサイトを作る際、ほとんどの見出し（大きな文字の部分）は普通にhタグを使っている。つまり、投稿の見出しはもう少し凝ったものを…とカスタマイズしてしまうと、固定ページの見出しにもそのデザインが反映されてしまう。

流石にそれは宜しくないケースがほとんどだと思う。よって、投稿用の見出しはクラス指定を行い、再利用ブロックに登録しておけばトラブルを防げる。下記はクラス指定した見出しの例だ。

クラス指定したH2見出し

クラス指定したH3見出し

クラス指定したH4見出し

カスタマイズ→追加CSSにお好みのデザインを記入したら、最初だけコードエディターを使って下記のように記述する。あとは再利用ブロックとして登録してしまえばOK。

<!-- wp:heading {"className":"heading01"} -->
<h2 class="heading01">クラス指定したH2見出し</h2>
<!-- /wp:heading -->

コンテンツの装飾（囲み枠）

テキストコンテンツは単調になりがちだ。なので、要所要所を目立たせる必要がある。そんな時に使える装飾が囲み枠だ。だが、Gutenbergには囲み枠というブロックが無いので、自作する必要がある。

面倒だと思うかもしれないが、1度作ってしまえば再利用ブロックとして登録しておけば使い回しが可能だ。参考になったのは下記サイト。これらのコンテンツで紹介されているものの中から、お好みの囲み枠をいくつか作っておけばいいだろう。

【HTML+CSS】おしゃれな飾り囲み枠（ボックス）デザイン！ ブログやWordPressにコピペ：CSS使わずHTMLコードだけでもOK | poppyou

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30 | サルワカ

なお、手順について一言。両サイトともに、まずはCSSを貼り付けてからHTMLコード貼り付け…という手順で説明している。これらのサイトで紹介されているデザインをそのまま使うなら、それでも良い。だが、自分好みにカスタマイズしたい場合は先にHTMLを追加してからCSSは追加CSSに追記した方がリアルタイムで編集出来る。よって、ここで記載した手順はリアルタイムで編集するための手順と捉えて欲しい。

まずは「カスタムHTML」ブロックを選択し、HTMLコードをコピペ。次に、追加CSSにCSSコードをコピペして、自分好みにカスタマイズする。プレビューを見て、これでOKとなったら再利用ブロックとして登録すればOK。

ちなみに、再利用ブロックとして登録後のHTMLコードは下記の通り。

<!-- wp:html -->
<div class="sample_box8">
    <p>囲み枠テスト_1</p>
</div>
<!-- /wp:html -->

テキストの装飾（マーカー等）

ネットの情報によればAdvanced Editor Tools（旧TinyMCE）が使える（クラシックブロックで「スタイル」を使う）という話なのだが、何故かマーカーが出現せず。仕方ないので、HTMLを書いて再利用ブロックとして登録することとした。サンプルは下記。

マーカーのテスト（黄色・クレヨン風）

マーカーのテスト（ピンク・クレヨン風）

お世話になったサイトは下記。余計なものを使わずに出来るので、有り難い。

WordPress下線マーカーができない？CSSを使わない方法【超簡単】| パニパニ

次のネタ

回答をここに書く。