投稿コンテンツのレイアウトをカスタマイズする

このチュートリアルでは、個別投稿の表示方法をどのように変更できるかを詳しく見ていきます。2つのデザインを取り上げ、さまざまな種類のブロックを再構成して入れ子にする方法を学びます。

学習成果

1. サイトエディターと投稿テンプレートへのアクセス。
2. テーマの投稿テンプレートのデフォルトレイアウトを理解する。
3. 個別投稿のレイアウト作成に使用されるさまざまなテーマブロックを見分ける。
4. 要件に合わせて投稿テンプレートを変更する。
5. さまざまな種類のブロックを移動して入れ子にする。

理解度確認の質問

1. 投稿コンテンツをどのように表示したいですか？
2. 最もよく使われるテーマブロックはどれですか？

文字起こし

Learn WordPressへようこそ。今回のセッションでは、投稿コンテンツのレイアウトをカスタマイズする方法を見ていきます。すべてのブロックテーマには個別投稿テンプレートが用意されており、個別投稿をどのように表示するかという構造やデザインを定義しています。もちろん、ニーズに合わせてこれを変更することもできます。

現在、Twenty Twenty-Twoテーマをインストールしています。これは、サイトエディターでテンプレートを編集する際の、デフォルトの投稿構造です。ページの構造をより見やすくするためにリスト表示をクリックしてみましょう。すると、投稿タイトルブロック、投稿のアイキャッチ画像ブロック、投稿コンテンツブロックがあり、一番下には投稿日時ブロック、投稿者ブロック、投稿カテゴリー ブロック、投稿タグブロックがあることがわかります。このデフォルトレイアウトは、使用しているテーマによって異なる点に注意してください。ウェブサイトのフロントエンドでどのように表示されるか見てみましょう。投稿タイトル、投稿のアイキャッチ画像、投稿コンテンツ、投稿日時、投稿者、そしてタグまたはカテゴリーが表示されています。

このデフォルトデザインを2通りの方法で変更する方法をお見せします。1つ目の例では、サイトタイトルの配置を変更し、投稿日時、投稿者、カテゴリーのブロックをサイトタイトルの下、投稿のアイキャッチ画像の上に移動しています。投稿のアイキャッチ画像ブロックと投稿コンテンツブロックは、同じ場所に残しています。

2つ目の例では、カスタム投稿ヘッダーを作成し、カバーブロックを使って、ナビゲーションメニュー、アイキャッチ画像、投稿タイトルブロック、さらに投稿日時ブロックと投稿者ブロックを一緒に入れ子にしました。

それでは、投稿テンプレートをカスタマイズして、これらの例を再現する方法を見ていきましょう。最初の例で見たレイアウトにするには、「外観」をクリックしてから「エディター」をクリックします。WordPressアイコンまたはサイトアイコンをクリックして「テンプレート」に進み、個別投稿テンプレートを選択します。ページの構造をより見やすくするために「リスト表示」をクリックし、まず投稿タイトルの配置を中央に変更します。次に下へスクロールして他のテーマブロックを見つけ、親の行ブロックを選択します。ここで、リスト表示上の行ブロックを投稿タイトルブロックの下へドラッグして移動し、配置を中央に変更します。完了したら「保存」をクリックします。これでウェブサイトのフロントエンドに戻り、サイトを訪れた人にどのように表示されるか確認できます。これで完成です。

2つ目の例を再現するため、サイトエディターに戻り、「テンプレート」へ進んで、もう一度個別投稿テンプレートを選択します。まず、ヘッダー、投稿タイトルブロック、投稿のアイキャッチ画像ブロック、その他すべてのテーマブロックを削除します。次に、ページの先頭にカバーブロックを追加します。ブロックツールバーにはメディアを追加するオプションがあり、左側にはアイキャッチ画像を使用するオプションがあります。「アイキャッチ画像を使用」をクリックし、オーバーレイの色を選択します。カバーブロックを選択して不透明度を80に変更し、完了したらインサーターをクリックして行ブロックを追加します。次に、行ブロック内にサイトロゴ、サイトタイトル、ナビゲーションブロックを追加します。すでに作成したメニューの1つを選択します。完了したら、サイトロゴブロックとサイトタイトルブロックを選択し、1つの行にまとめます。

次に、もう一度親の行ブロックを選択し、「配置」の横で「項目間のスペース」を選択します。最後に、ナビゲーションブロックを選択し、「複数行に折り返す」オプションが無効になっていることを確認します。そしてブロックを選択し、カバーブロックの先頭へ移動します。次に、投稿タイトルブロックを追加して中央に配置します。続いて、投稿日時と投稿者をまとめるため、別の行ブロックを追加します。まず投稿日時ブロックを追加し、次に投稿者ブロックを追加します。もう一度親ブロックを選択し、配置を中央に変更します。その間に段落を追加し、ピリオドを入力して太字にします。次に、もう一度親ブロックが選択されていることを確認し、サイドバー設定を使ってブロック間隔を10ピクセルに変更し、間隔を狭めます。その後、サイドバー設定とリスト表示を閉じ、カバーブロックのサイズを大きくします。最後に、カバーブロックのすぐ下にある区切りブロックも削除してよいでしょう。そしてウェブサイトのフロントエンドに戻り、変更がどのように反映されたか確認できます。

テンプレートを変更すると、テーマ名の横にある画像の上に小さな点が表示されます。変更内容に納得できない場合は、縦に並んだ3つの点をクリックして「カスタマイズをクリア」を選択します。これでテンプレートは元の状態に戻ります。これでチュートリアルは終了です。

自分の投稿テンプレートのカスタマイズをぜひ楽しんでください。さらに多くのチュートリアルやトレーニング教材については、Learn WordPressをご覧ください。