今回は、ざっくり作っていた Twenty Twenty Five テーマの2ペイン構成の手直しを主に記事にします。

Twenty Twenty Five テーマの2ペイン構成を調整

このブログでは、Twenty Twenty Five テーマを使用して、2ペイン構成にしています。

カラムブロックで二つに分けて、片方を画面幅の66％として本文を、もう片方を33%として最新記事やタグリスト、アーカイブリストを載せていました。

ざっくりと作っていたので幅が適当で、デスクトップ画面で Google AdSense のサイド広告が表示されない状態でした。

そこで、改めて幅をちゃんと設定し、広い画面でも狭い画面でも、どちらでも同じ幅で表示できるように直しました。

カラムブロックの幅の設定

別サイトで使用している Cocoon の幅を調べて、このサイトでは

• 左カラム : 800 px
• 右カラム : 376 px

で設定する事にしました。それぞれのカラムブロックに幅を設定しました。この幅は、CSS 上では最大幅になります。

カラムブロックの中央寄せ

レスポンシブ対応のテーマ (Twenty Twenty Five テーマもそうです) では、

• 最大幅より広ければ両側にスペースが空く
• 狭くなると左カラムが徐々に狭まって、一定幅より狭くなったら左カラムと右カラムが縦並びになる (or 非表示になる)

という形になっています。

最大幅より広くなった際に、2カラム部分が中央に寄って欲しかったのですが、そのままでは左寄せの状態となっていました。

Chrome デベロッパーツールで CSS を調べて、以下の内容を style.css に追記しました。

/* 20250222 レイアウト全体をセンタリング */
.wp-block-columns {
    display: flex;
    justify-content: center;
}

このようにする事で、2カラム全体が中央寄せに表示されて、両側にスペースが空くようになりました。

その結果、両側のスペースに Google AdSense の広告が表示されるようになりました。

ヘッダ、フッタの幅の調整

ヘッダとフッタは両方共に1カラムですので、幅は 1200 px に設定しました。これで中段の2カラム部分と凡そ同じ幅になりました。

2カラム左側の幅の微調整

2カラム左側の部分の幅は 800 px に設定しましたが、Chrome デベロッパーツールで見ると 650 px 程度の幅となっていました。

この原因は、グループブロック等で設定するインナーブロック設定でした。

上位のブロックで幅を設定し、下位のブロック等で上記のチェックを入れると、ブロックの両側に一定量の padding が挿入されます。更に下位のブロックでチェックを入れると、padding が2重に加算されてしまいます。

これを防止する為に、一番上位のブロック、今回の場合は2カラム左側ブロックのインナーブロックの設定を外し幅を設定しました。加えて、下位のインナーブロックのチェックも外し、二重で padding が入らないように修正しました。

この事によって全てのブロックが2カラム左側ブロックで設定した幅で整うようになりました。その上で、2カラム左側ブロックの左右の padding を設定する事で、全体のレイアウトを調整する事が出来ました。

同様にして、2カラム右側についても調整しました。

個別投稿とすべてのアーカイブテンプレートも同様に調整

ブログホームテンプレートと同様に、個別投稿とすべてのアーカイブテンプレートについても、2カラム化している部分を調整しました。

モバイルのヘッダ・フッタメニューの調整

ヘッダメニューはハンバーガーメニューのみとしました。疑似グローバルメニューはモバイルでは非表示として、代わりにハンバーガーメニュー内に同じ内容を追加しました。

ちゃんと多言語化されています。カテゴリはロケールが反映された文字が表示されます。

フッタメニューは Font Awesome のアイコンから PNG の丸形国旗に変更しました。20 px に縮小したイメージで置き換えると表示の乱れはありませんでした。これまでは文字とアイコンの色を変更して言語の種類を表示していました。今は背景色を変える事で、現在の言語が何になっているか分かるようにしています。

この時も CSS と戦いましたが、今回も負けずに挑戦しました。何とか考えた通りの表示に収まったと思います。

結び

今日は、Twenty Twnety Five テーマの2ペイン構成のレイアウトを調整しました。

左側ペインの本文を800 px、右側ペインの最新記事等を 376 px に設定し、中央寄せにする事で、左右に空いたスペースに Google AdSense の広告が表示されるようになりました。

モバイル用のヘッダ・フッタメニューも調整し、それ以外にも細かな修正は多数ありました。

概ね考えていた通りに出来ました。でもまた見つけると調整したくなるんですよね。昔からの癖です。そうやって学んできました。仕事ではなく趣味なので、楽しんでやっています。