This article is mainly about reworking the two-pane structure of the Twenty Twenty Five theme that I had roughly created.

Adjustment of the two-pane structure of the Twenty Twenty Five theme

This blog uses the Twenty Twenty Five theme in a two-pane configuration.

It was divided into two column blocks, one 66% of the screen width for the body text, and the other 33% for the latest articles, tag list, and archive list.

The width was appropriate because it was made roughly, and the Google AdSense side ads were not displayed on the desktop screen.

So, we set the width properly again and fixed it so that it can be displayed at the same width on both wide and narrow screens.

Setting column block widths

Check the width of the Cocoon Theme used on another site, and this site has a

• Left column : 800 px
• Right column : 376 px

We decided to set up the columns in the following way.width for each column block.This width is the maximum width on CSS.

Centering column block

In a responsive theme (as is the case with the Twenty Twenty Five theme),

• If wider than the maximum width, space is available on both sides.
• The left column gradually narrows as it gets narrower, and when it gets narrower than a certain width, the left and right columns are aligned vertically (or hidden).

This is the way it is supposed to be.

I wanted the two-column section to be centered when it became wider than the maximum width, but as it was, it was left-aligned.

I checked the CSS in the Chrome Developer Tools and added the following to style.css

/* 20250222 Centering the entire layout */
.wp-block-columns {
    display: flex;
    justify-content: center;
}

By doing this, the entire two columns are now centered, leaving space on both sides.

As a result, Google AdSense ads are now displayed in the spaces on both sides.

Adjustment of header and footer width

Since the header and footer are both one column, we set the width to 1200 px.The width is now approximately the same as the middle two columns.

Fine-tune the width of the left side of the two columns

The width of the left part of the two columns was set to 800 px, but the Chrome Developer Tools showed a width of about 650 px.

The cause of this was the inner block setting, which is set by the group block, etc.

If you set the width in the upper block and check the above checkbox in the lower block, etc., a certain amount of padding will be inserted on both sides of the block.If the above checkbox is checked in a lower block, the padding will be doubly added.

To prevent this, we unchecked the inner block of the topmost block, in this case the inner block on the left side of the two-column block, and set its width.In addition, the lower inner block was unchecked to prevent double padding.

This ensures that all blocks are aligned with the width set in the 2-column left-side block.The overall layout could then be adjusted by setting the padding on the left and right sides of the two-column left-side block.

Similar adjustments were made for the right side of the two columns.

Adjust individual post and all archive templates as well

As with the blog home template, we have adjusted the two-column areas for the individual post and all archive templates.

Adjustment of mobile header and footer menus

The header menu is now only a hamburger menu.The pseudo-global menu is hidden on mobile, and the same content is added in the hamburger menu instead.

It is properly multilingualized.Categories are displayed with characters that reflect the locale.

The footer menu was changed from a Font Awesome icon to a PNG round national flag; replacing it with an image scaled down to 20 px did not disrupt the display.Previously, the language type was indicated by changing the color of the text and icon.Now, by changing the background color, we can tell what the current language is.

I fought with CSS at that time, and I did not lose this time either.I think I managed to get the display to look the way I wanted it to.

Musubi

Today we adjusted the layout of the two-pane configuration of the Twenty Twnety Five theme.

By setting the body text in the left pane to 800 px and the latest articles, etc. in the right pane to 376 px and centering them, Google AdSense ads are now displayed in the empty space on the left and right.

The header and footer menus for mobile were also adjusted, and many other minor corrections were made.

I was generally able to do what I had in mind.But when I find it again, I want to adjust it.It’s an old habit.That is how I have learned.I enjoy doing it because it is a hobby, not a job.