WordPressの標準テーマ「Twenty Sixteen」を長く使っていますが、PCで記事を開いたとき、投稿者名や投稿日が並ぶ左側の細い列を少しもったいなく感じていました。そこで今回は、子テーマのCSSだけで投稿メタを本文下へ移動。空いた場所まで本文を広げたところ、読みやすさだけでなく表や画像の表示にも余裕が生まれました。
Twenty Sixteenの左側にある細い列が気になっていた
Twenty SixteenをPCで表示すると、投稿者名、投稿日、カテゴリー、コメント、編集リンクなどが記事の左側に縦に並びます。
情報としては必要ですが、幅の狭い列を一本確保するため、肝心の本文が右側へ押し込まれていました。僕のサイトでは、1280px幅で表示したときの本文幅が563pxしかなく、16pxの日本語本文では1行あたり全角約35字です。
一方、スマートフォンやタブレットでは、これらの投稿メタは最初から本文下に表示されます。問題になるのは、画面幅が985px以上になるPC向けレイアウトだけでした。
そこで今回は、HTMLやテンプレートには触れず、CSSだけで投稿メタを本文の下へ移しました。
原因はHTMLではなくCSSのfloatだった
最初は投稿メタ専用のサイドバーが存在するように見えました。しかし、実際のHTMLを確認すると、投稿者名などを囲むのは<footer class="entry-footer">で、もともと本文より後ろに出力されています。
順番を入れ替えているのは、Twenty SixteenのCSSです。
画面幅が61.5625em以上になると、親テーマではおおむね次の指定が適用されます。標準の16pxを基準にすると、61.5625emは985pxです。
@media screen and (min-width: 61.5625em) {
body:not(.search-results) article:not(.type-page) .entry-content {
float: right;
width: 71.42857144%;
}
body:not(.search-results) article:not(.type-page) .entry-footer {
float: left;
width: 21.42857143%;
}
}本文を右へ回り込ませて幅を約71％にし、投稿メタを左へ回り込ませて約21％を割り当てています。つまり、テンプレートファイルを書き換えなくても、このfloatと幅をCSSで解除すれば、本来のHTML順である「本文の後に投稿メタ」という配置へ戻せます。
この指定は、現在公開されているWordPress公式のTwenty Sixteenのstyle.cssでも確認できます。行番号はテーマのバージョンによって変わるため、セレクター名で探すのが確実です。
子テーマのstyle.cssに追加した内容
今回は、使用中の子テーマ「Twenty Sixteen-child」のstyle.cssへ、次のCSSを追加しました。
/* ============================================================
投稿メタ（投稿者・日付・カテゴリー・コメント・編集）を
本文の左横ではなく、本文の下に置く（PC表示＝985px以上）
※スマホ・タブレット表示は元から本文の下なので変更なし
============================================================ */
@media screen and (min-width: 61.5625em) {
/* 本文を全幅に戻す */
body:not(.search-results) article:not(.type-page) .entry-content {
float: none;
width: 100%;
}
/* 投稿メタを本文の下へ移す */
body:not(.search-results) article:not(.type-page) .entry-footer {
float: none;
clear: both;
width: 100%;
margin-top: 1.5em;
}
/* 投稿メタを横一列に並べる */
body:not(.search-results) article:not(.type-page) .entry-footer > span,
body:not(.search-results) article:not(.type-page) .entry-footer .edit-link {
display: inline;
margin-bottom: 0;
}
/* 項目間の「/」区切りを復活させる */
body:not(.search-results) article:not(.type-page) .entry-footer > span:not(:last-child):after {
display: inline-block;
}
/* 左側の余白へはみ出す指定を解除する */
body:not(.search-results) article:not(.type-page) figure.below-entry-meta,
body:not(.search-results) article:not(.type-page) .entry-content > blockquote.alignleft.below-entry-meta {
margin-left: 0;
max-width: 100%;
}
}.entry-contentのfloatを解除するだけでは、投稿メタの配置は変わりません。反対に、.entry-footerだけを下へ移しても、本文には71％という幅が残るため、左側の空白は消えません。
本文と投稿メタの両方を元の流れへ戻すことがポイントです。
clear: bothは、周囲に別のフロート要素があっても、投稿メタを確実に本文より下へ配置するために加えました。
投稿メタを横一列へ戻す
Twenty Sixteenは、PC表示では投稿者名やカテゴリーにdisplay: blockを指定し、各項目を縦に積んでいます。また、縦並びでは不要になる「/」区切りも非表示にしています。
本文下へ移したあともこの指定を残すと、投稿メタだけが縦に長く並んでしまいます。そこで、.entry-footer直下のspanをdisplay: inlineへ戻し、項目間の区切りも再表示しました。
変更後は、次のような一行表示になります。
D.S / 2026年9月13日 / AI / コメントここで見落としやすいのが、ログイン中だけ表示される「編集」リンクです。
Twenty Sixteenでは.edit-linkに対するセレクターの詳細度がほかの項目より高いため、> spanだけを指定しても編集リンクだけが次の行に落ちることがあります。そのため、今回のCSSでは.entry-footer .edit-linkも明示的に指定しています。
一般の訪問者には編集リンクが表示されないため、ログアウト状態だけで確認すると気づきにくい部分です。
!importantを使わずに上書きできた理由
今回のCSSでは!importantを使っていません。
親テーマと同じセレクターを使い、親テーマより後に読み込まれる子テーマ側で同じプロパティを指定しているためです。CSSの詳細度が同じなら、後から読み込まれた指定が優先されます。
主なセレクターの詳細度を比べると、次のようになります。
| 対象 | 親テーマ | 今回のCSS | 結果 |
|---|---|---|---|
| 本文の幅とfloat | 0-3-2 | 0-3-2 | 同点なので後から読む子テーマ |
| 投稿メタの幅とfloat | 0-3-2 | 0-3-2 | 子テーマ |
| コメントリンク | 0-3-2 | 0-3-3 | 子テーマ |
| カテゴリー | 0-2-1 | 0-3-3 | 子テーマ |
| 編集リンク | 0-4-2 | 0-4-2 | 同点なので子テーマ |
とりあえず!importantを付ければ上書きできる場合もありますが、後から別の調整をしたくなったときに扱いにくくなります。読み込み順と詳細度を確認しておけば、必要最小限の指定で済みます。
WordPress公式の子テーマ解説でも、親テーマを直接変更せずにカスタマイズを保持できる方法として子テーマが案内されています。CSSの読み込み方法はテーマごとに異なるため、実際のHTMLソースで順番を確認することが大切です。
既存の画像はみ出し防止CSSを消してはいけない
本文を100％幅に変更すると、以前追加した「画像のはみ出し防止CSSはもう不要ではないか」と考えたくなります。しかし、このサイトでは引き続き必要でした。
Twenty Sixteenには、左側の投稿メタ用スペースへ横長画像を食い込ませるため、次のような指定があります。
img.below-entry-meta,
figure.below-entry-meta {
margin-left: -40%;
max-width: 140%;
}本文を全幅にしても、この指定自体は消えません。既存のはみ出し防止CSSを削除すると、画像だけが記事の左端から外へ飛び出す可能性があります。
今回追加したfigure.below-entry-metaとblockquote.alignleft.below-entry-metaの指定は、既存CSSでカバーできていなかった部分だけを補うものです。画像、キャプション、引用文に対して以前から入れていた調整は、そのまま残しました。
本文幅は563pxから788pxへ広がった
変更前後を1280px表示で計測した結果は、次のとおりです。
| 項目 | 変更前 | 変更後 |
|---|---|---|
| 本文幅 | 563px | 788px |
| 1行の文字数 | 全角約35字 | 全角約49字 |
| 投稿メタ | 左側に縦4～5行 | 本文下に横1行 |
| 本文内画像の左端 | 記事左端より内側 | 記事左端と一致 |
本文は225px広がり、約1.4倍になりました。表やコードブロックにも余裕ができ、横スクロールが発生しにくくなります。記事内の画像も以前より大きく見せられるようになりました。
一方、全角約49字の一行は、文章中心の記事では長く感じる場合があります。読みやすさを優先するなら、width: 100%を85%程度へ変更し、左右に適度な余白を残す方法もあります。このあたりはサイトの文字サイズや記事内容に合わせた調整が必要です。
反映されないときはキャッシュも確認する
CSSを変更したのに表示が変わらない場合は、ブラウザやCDNに古いファイルが残っている可能性があります。
このサイトでは、子テーマのCSSを読み込む際のバージョン文字列を日付形式で管理しています。CSSを更新したら、functions.php側の数字も更新します。
wp_enqueue_style(
'child-style',
get_stylesheet_uri(),
array(),
'20260914'
);wp_enqueue_style()の第4引数に指定したバージョンは、CSSのURLへクエリー文字列として付加されます。WordPressの公式関数リファレンスでも、この引数はバージョン指定に使われることが説明されています。
本番へ保存する前は、ブラウザのデベロッパーツールでCSSを一時的に追加すると安全に比較できます。ページを再読み込みすれば元に戻るため、本文幅や画像位置を確認してから子テーマへ反映できます。
見た目だけでなく、次のコードで実際の幅を調べると、指定が正しく効いているか判断しやすくなります。
const content = document.querySelector('article .entry-content');
content.getBoundingClientRect().width;作業中に見つかったCSSの小さな誤記
今回、既存CSSの確認中に次の記述も見つかりました。
padding-bottom; 0.5em !important;本来は、次のようにコロンを使います。
padding-bottom: 0.5em !important;CSSは、一つの宣言が間違っていても、後ろのルールまで全部停止するとは限りません。この場合は無効なpadding-bottomだけが捨てられ、ほかの指定は適用されていました。
大きく崩れないため発見しにくいのですが、デベロッパーツールのStyles欄を見ると、無効な宣言として確認できます。「ほとんど動いているのに、一か所だけ効かない」という場合は、セレクターの詳細度だけでなく、コロンやセミコロンの誤記も疑ったほうがよさそうです。
別のTwenty Sixteenサイトで使う場合の注意点
同じTwenty Sixteenでも、サイトの構成によって追加調整が必要です。
アバターを投稿メタ内へ表示している場合、親テーマでは49px幅のブロック要素として指定されています。投稿メタを横一列にするなら、アバターのサイズとdisplayも調整する必要があります。
検索結果ページはbody:not(.search-results)によって対象外です。検索結果は元から異なるレイアウトなので、今回のCSSでは変更していません。
また、サイドバーを使わない構成では、body.no-sidebar向けの、さらに詳細度が高い幅指定が適用される場合があります。CSSが効かないときは、ブラウザのデベロッパーツールで実際に勝っているセレクターを確認してください。
子テーマを使っていない場合、親テーマのstyle.cssを直接編集すると、テーマ更新時に変更が消える可能性があります。小規模な変更なら、WordPress公式でも案内されている「追加CSS」を利用できます。追加CSSはテーマ側のCSSより後に読み込まれるため、今回のような上書きにも向いています。
まとめ
Twenty Sixteenの左側にある投稿メタ列は、独立したサイドバーではなく、CSSのfloatで本文の横へ移動していた要素でした。
そのため、子テーマ側で本文と投稿メタのfloatを解除し、幅と表示形式を戻すだけで、テンプレートファイルを変更せずに1カラム化できます。
今回の環境では、本文幅が563pxから788pxへ広がりました。ただし、画像を左へ食い込ませる既存指定、編集リンクの詳細度、CSSのキャッシュなど、周辺の指定も一緒に確認する必要があります。
見た目だけで終わらせず、変更前後の幅を数値で測ると、どのCSSが効いているのかが分かりやすくなります。長く使っているテーマでも、今のコンテンツに合わせて少し手を入れるだけで、まだ十分に使いやすくできそうです。
参考リンク
- Twenty Sixteen style.css（WordPress公式GitHub）
- Child Themes ― WordPress Theme Handbook
- WordPressのCustom CSS解説
- wp_enqueue_style()関数リファレンス
