WordPress

WordPressのTwentyFourteenテーマのコンテンツ幅を広げる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
WordPress

Twenty Fourteenのデフォルト状態だと、ブログコンテンツの幅が狭く、改行がたくさん含まれてしまい、ちょっと見にくいですよね。
コンテンツの左右に思いっきり白い空白があってデッドスペースとりすぎです。なんでこんなレイアウトなんだろ??

コンテンツ幅が狭いデフォルトレイアウト

コンテンツ幅が狭いデフォルトレイアウト(空白スペースがたくさん!)

テーマを編集して幅を調整しましょう。

管理メニューで「外観」→「テーマ編集」と選び、Twenty Fourteenのスタイルシート (style.css)を編集します。

下記の部分を見つけてください。

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.content-area {
	padding-top: 48px;
}

.hentry {
	margin: 0 auto 48px;
	max-width: 672px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 474px;
}

「max-width: 474px;」という部分で、コンテンツ幅を設定しています。
とりあえず800pxに変更します。

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */

.content-area {
	padding-top: 48px;
}

.hentry {
	margin: 0 auto 48px;
	max-width: 672px;
}

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
	margin: 0 auto;
	max-width: 800px;
}

「ファイルを更新」ボタンを押すと、編集したスタイルシートが保存されます。

コンテンツ幅が広くなったレイアウト

コンテンツ幅が広くなったレイアウト

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*