Twenty Seventeen 2, 1カラムへ変更

Twenty Seventeenを1カラム化しました。投稿やアーカイブなどのサイドバー付きのデザインでは、サイドバーを削除するだけ。

固定ページのような元々サイドバーがついていないデザインは、追記CSSで本文幅を100％にすることで調整しました。

投稿とアーカイブページの1カラム化

ワードプレスの管理画面 → 外観 → カスタマイズ → ウィジェット → ウィジェット → ブログサイドバー

既に入っているサイドバーがあれば、ザクザク削除。

外観のカスタマイズ画面では「これじゃない…」感が満々のプレビューが出ているのですが、実際のスクリーンはちゃんと1カラムになっていました。

プレビューが見えなくてもいい場合は、「外観 → ウィジェット」にて掴んで他の場所に移動させる方が簡単かも。

これでサイドバー付きのページ(投稿とアーカイブ)の1カラム化が出来ました。

固定ページの1カラム化

固定ページなどは元々サイドバーがついていないデザインなので、CSSで1カラム風に調整しました。

• 

• 

ワードプレスの管理画面 → 外観 → カスタマイズ → 追加CSSに下記のCSSを追記

.blog:not(.has-sidebar) #primary article,
	.archive:not(.page-one-column):not(.has-sidebar) #primary article,
	.search:not(.has-sidebar) #primary article,
	.error404:not(.has-sidebar) #primary .page-content,
	.error404.has-sidebar #primary .page-content,
	body.page-two-column:not(.archive) #primary .entry-content,
	body.page-two-column #comments {
		float: right;
		width: 100%;
}
.navigation.pagination {
		clear: both;
		float: right;
		width: 100%;
	}

ページ送りの部分は、親テーマの作りが分かりやすいように敢えて分けて書きました。

追記

オリジナル投稿日：2017年6月3日

リライト再掲載日：2021年2月6日

最後までお読みいただきましてありがとうございました。