人気のWordPress無料テーマAstraを導入してみることにしました。
［2021年4月4日追記：現在Cocoonに変更しています］
トップページのデザインがいまいちなので無料ライブラリ（プラグイン）「starter templates」を使い、カスタマイズしてみました。
「starter templates」利用によるカスタマイズで今回はトップページで最新投稿の一覧をメインに表示するため「『ブログ』デザインだけを導入」。またコアウェブバイタルを重視し「子テーマを設定しない」「カスタマイズでの追加CSSを設定しない」こととしました。
またフォント表現を魅力的にするFontAwesomeですが、PageSpeed Insightsでスコアを獲得するため使用しません。
starter templatesの設定方法
１．Astraをインストール＆有効化後、ダッシュボード「外観」から「Astra設定」を選択。
２． 画面右の「starter templates？」をクリック。今回は使用している「Gutenberg」をページビルダーに選択し、プラグインに加えました。
３． 同画面右の「See Library」クリック。
４．「Search」項目が「All」になっているのでプルダウンメニューから[1]「Blog」[2]「Free（無料）」を選択。
５．表示された一覧から今回は「Pet Care」を選択しました（今回の最終的な仕上がりはどのLibraryでも同様かもしれません。ただほかの「Library」を選択した際、背景のグラデーションが解除できなかったため、こちらを選択しました）。
これで固定ページとして「Pet Care」の「Blog」デザインの導入が完了しました。
6．「Pet Care」をクリックすると各ページデザインの一覧が表示されます。今回は固定ページをトップに設置し、ブログの最新投稿の一覧を表示するのが目的です。そこで「Blog」のデザインフォーマットのみをダウンロードしました。
固定ページの編集
ダッシュボード「固定ページ一覧」から「Blog」を選択し、先ほどダウンロードした「Pet Care」のデザインを目的に応じて変更します。
まず丸い設定マークをクリックし表示される右のメニューから「固定ページ」を編集します。
（1）パーマリンク
デフォルトで「Blog」となっているので目的にかなった名称へと変更します。最終的にこの固定ページをトップに据えます。トップページが表示された際、ブラウザのタブにはここで設定した名称が表示されます。そこで今回は「home」へと名称を変更しました。
（2）Astra設定
サイドバー
従来表示していたパターンを踏襲し「右サイドバー」を設定しました。
コンテンツのレイアウト
より幅広く表示でき、それでも見切れない「全幅／収める」を設定しました。
セクションを停止
設定したのは以下の三つです。
タイトルを停止
デフォルトでは「Blog」などのタイトル（見出し）が表示されてしまいます。この文字を表示させないようにします。しかし「タイトルを停止」するだけでは、文字が見なくなってもそのスペースが空白となりデザイン的に不都合が生じます。そこで後述するように、ここに新たなブロックを挿入します。
パンくずリストを無効化
今回はもともと設定していないので無効化しました。
アイキャッチ画像を表示しない
今回はもともとこの固定ページをトップに据える目的ですので、アイキャッチ画像は設定していません。
透過ヘッダー
「透過」を用いないこととして設定している「カスタマイザー設定」としました。「透過」を有効化した場合、ヘッダーのメニュー表示と下段の記事スペース（一覧表示スペース）の間に不具合が生じたためです。
ブロックの編集
つぎに丸い設定マークをクリックし表示される右のメニューから「ブロック」を編集します。
（1）デフォルトのブロックを削除
今回導入した「Pet Care」の「Blog」デザインでは上部と下部にオリジナルのブロックが設定されています。これを選択し、表示されるメニューバーの右端「縦3点マーク」から「ブロックを削除」。
（2）「最新の投稿」一覧のブロックの設定
残った「最新の投稿」一覧のブロックをクリック・選択し、各設定をつぎのとおりとしました。
投稿コンテンツ設定
オフ
投稿メタ設定
投稿者名の表示
オフ
投稿日を表示
オフ
アイキャッチ画像設定
オン
画像サイズ
サムネイル
画像の寸法
幅 150
高さ 150
画像の位置
センター
アイキャッチ画像のリンクを追加
オフ
並び順
投稿順（最新から）
項目数
27
※ダッシュボード「設定」の「表示設定」による「1ページに表示する最大投稿数」よりこちらが優先されます。
カラム
3
※投稿数が27、記事スペースのカラムが「3」であるため、9行の一覧表示となる計算です。「右サイドバー」の縦の長さに合わせました。
記事一覧の上にオリジナルのブロックを追加
今回は記事一覧の上にオリジナルのブロックを四つ追加しました。
まず前述の設定で半透明状態で表示されている「Blog（あるいはhomeなど）」をクリック。上部に表示されるメニューから「+」マークの「ブロックの追加」を選択します。
この最初の「ブロックの追加」では記事一覧の下にブロックが表示されます。しかし問題ありません。上への移動ボタンをクリックするだけで記事一覧の上（つまり最上段）にブロックを設定できました。
（1）「人気の記事」へ誘導するバナー
トップには現在最も見てほしい記事へとリンクするバナーを設置しました。
Gutenbergのブロックの設定には「ウィジェット」→「カスタムHTML」を選択。
そこに次のようなコードを書き込みました。
<a href=”リンク先のURL“><img src=”配置する画像ファイルのURL” width=”画像の横サイズ数字のみ” height=”画像の縦サイズ数字のみ” layout=”responsive” target=”_blank” alt=””></a>
※画像の配置にはこのほか「メディア」→「画像」を利用することができます。しかしこの場合コアウェブバイタル改善に有効な画像サイズのwidthとheightを指定することができません。また「クラシック版の段落」→「挿入」→「メディアを追加」を利用することも可能です。こちらは編集時に表示できない不具合が生じているため今回は推奨しません。
※画像のサイズはアップしたもともとのサイズを入力して問題ありません。
（2）キャッチフレーズ
Gutenbergのブロックの設定には「テキスト」→「見出し」を選択。
h2のセンター揃えです。上下ブロックとのスペースを調整するため文言のほか改行<br>を追加しました。
「HTMLとして編集」で確認するとつぎのコードとなります。
<h2 class=”has-text-align-center”><br><br>どしたら、よかんべ！？</h2>
（3）本文
こちらは「段落」を使用。
またスペース調整のため改行<br>を追加しています。
<p class=”has-text-align-center”><br>身の周りの<span style=”color:#cf2e2e” class=”tadv-color”><strong>I</strong></span>ntelligent <span style=”color:#cf2e2e” class=”tadv-color”><strong>T</strong></span>hingsを使いこなすため<br>日々ブレイクスルーに挑んでおります。</p>
※見出しと段落でフォントを変えている場合は、この本文のブロックを「段落」ではなく「見出し」で設定することも可能です。関連サイト「sorayori」ではこの本文ブロックにh6を用いました。
（4）最新記事の見出し
（1）と同様です。h4としました。
これで今回のカスタマイズは完了です。
まとめ
「starter templates」から「Blog」ページのみをインストールし、そこに好みのブロックを追加することで、Astraでもシンプルで個性的なブログのトップページをデザインすることが可能となります。