Twenty Seventeen 2, 1カラムへ変更


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

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

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

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

サイドバーを削除する

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

プレビューでは削除されていない様に見える

外観のカスタマイズ画面では「これじゃない…」感が満々のプレビューが出ているのですが、実際のスクリーンはちゃんと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日

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


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です