このブログでは PC ではブログホーム含めて2カラムレイアウトにしています。Twenty Twenty Five テーマは標準では1カラムですので、2カラムレイアウトに変更する手順について一つずつ解説します。

はじめに

このブログでは、WordPress の Twenty Twenty Five テーマを使用して、所謂「普通のブログ」を作る事を目標の一つとしていました。

その中でも、2カラムレイアウトは「普通のブログ」として運用する為には必要だと考えていました。しかし、Twenty Twenty Five テーマにはシングルカラムレイアウトのみで、標準のテンプレートとして2カラムレイアウトはありません。サイドバーのパターンは存在していますが使用されていません。

ブログホーム、個別投稿、アーカイブの各ページの2カラムレイアウト表示について、このブログの立ち上げ当初から取り組みました。現在では形が固まりましたので、2カラムレイアウトに変更する手順について詳細に説明します。

ブログホームを2カラムレイアウトにする手順

元々存在しているブログ本文のクエリーループを含むブロックと、使用されていないサイドバーのパターンを、カラムブロック内に配置する事で2カラムレイアウトを実現しています。

左側のカラムは800px、右側のカラムは376pxに設定します。

15の工程で2カラムレイアウトに変更できます。

注意事項

2点の注意事項です。

バックアップを取る

テンプレートの編集は破棄して初期状態に戻れますし、リビジョン管理されていて特定の段階まで戻す事も出来ます。

とはいえ、必ず元の状態に戻す事ができるとは言い切れません。サイト全体のバックアップを取ってから作業を行うように推奨します。

子テーマで作業する

Twenty Twent Five の親テーマを修正した場合、テーマのアップデートで元の状態に戻る可能性があります。

子テーマを作成・選択してから作業する事を推奨します。

初期状態

Windows11 WSL2 Ubuntu に WordPress のローカル環境を構築しました (apache2 + php8.3 + MariaDB5.3 + WordPress 6.7.2)。以下の画面は、ローカル環境で動作している WordPress のスクリーンショットです。

WordPress をインストールした直後の何もカスタマイズしていない状態です。Twenty Twenty Five テーマの場合は、投稿記事が縦に並ぶシンプルなシングルカラムレイアウトのページ構成です。

これを2カラムレイアウトに変更します。

テーマのブロックエディタを開く

管理画面から「外観」->「エディター」を選択して、テーマのブロックエディターを開きます。

テンプレートの選択

デザイン画面が開きますので「テンプレート」を選択します。

「ブログホーム」テンプレートを選択

テンプレート一覧の中から「ブログホーム」テンプレートを選択します。

リスト表示 (ドキュメント概観) を開く

上部の緑枠で囲ったハンバーガーメニューを選択し、ブロックのリスト表示 (ドキュメントの外観) を開きます。

ブログ本文グループを展開

初期状態では、

• ヘッダー
• グループ
• フッター

の3つのブロックでブログホームは構成されています。

二つ目のグループブロックがブログ本文になります。先頭の “>” を押して展開します。

ブログ本文グループの確認

ブログ本文のグループは、

• 見出しブロック (「ブログ」の文字を表示)
• クエリーブロック

の二つで構成されています。クエリーブロックで各記事を表示します。

このブロック全体を2コラムレイアウトの左側に設定します。

ブロックを追加

本文グループの前にブロックを追加します。

カラムブロックに変更

追加された段落ブロックをカラムブロックに変更します。

ブロック右側の “+” ボタンを押すとブロックの選択画面になりますので “カラム” を選択します。

2カラムの 66/33 比率を選択

後で変更しますが、仮に 66 / 33 比率を選択します。

入れ物の2カラムブロックが作成できた

ここまでで、中身は入っていませんが、2カラムレイアウトの元になるカラムブロックを作成できました。

カラムブロックは親子関係となっていて、親一つに対してカラムの数の子ブロックが作られます。

PC 画面の場合には、子カラムブロックの上段が左側、下段が右側に表示されます。標準ではモバイルでは上下表示になります。

ブログ本文ブロックを左側カラムブロックへ移動

ブログ本文ブロックを選択し、マウスのドラッグ操作で、上段・左側のカラムに移動します。

サイドバーパターンを右側カラムブロックへ配置

新しく「サイドバー」パターンを挿入し、右側カラムブロックへ移動します。

サイドバーパターンの内容を変更すれば、全ての2カラムレイアウトのサイドバーの内容が変更できます。

左側カラムブロックの幅を800pxに設定

これで各カラムブロックの中にブロックを配置できました。

左側のカラムブロックの幅を800pxに変更します。カラムブロックを選択して、右側に表示されている幅を 66 % から 800 px に、単位も含めて変更します。

右側カラムブロックの幅を376pxに設定

左側と同様に、右側のカラムブロックの幅も 376px に設定します。

保存、動作確認

テンプレートを保存します。

ブログホームを表示して、2カラムレイアウトになっている事を確認します。

緑の枠で囲った部分が左側のカラムと右側のカラムになります。

レイアウトの微調整

ヘッダー・フッターの幅やブラウザの幅が広い場合にセンタリングする方法など、レイアウトの微調整については、以下の記事を参照下さい。

過去記事へのリンク

これまで取り組んだ内容です。

結び

WordPress の Twenty Twenty Five テーマで2カラムレイアウトに変更する方法について詳細に手順を説明しました。

同じ方法で、個別投稿やアーカイブのテンプレートも2カラムレイアウトに変更できます。

サイドバーパターンの内容を修正すれば、全てのページのサイドバーの表示が変わります。カレンダーを追加したり、最新投稿・人気記事の投稿を追加したり、広告を追加したり、一か所の修正で全てのページに反映されます。

皆さんのサイト構築の一助となれば幸いです。