WordPress

WordPressのTwentyFourteenテーマを左寄せでなく中央配置にする

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

WordPressにデフォルトでインストールされてるテーマに「TwentyFourteen」があります。

「TwentyFourteen」はレスポンシブルに対応していてとても使いやすいテーマだと思います。
でもね。思いっきり左寄せで表示されるんです、これ。

TwentyFourteenのデフォルトレイアウト

TwentyFourteenのデフォルトレイアウト
ブラウザの右側だけがグレーの背景で埋められていますね。。

横解像度が高いPC画面で見ると左寄せってバランス悪い。いまどきのナウいレイアウトはみんな中央配置です。

管理画面で「外観」→「テーマ編集」と選択し、TwentyFourteenのスタイルシート”style.css”をいじります。

スタイルシートの編集画面

スタイルシートの編集画面

まずは、↓の部分を探してください。

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 */

.site {
	background-color: #fff;
	max-width: 1260px;
	position: relative;
}

これを↓のように変更すればOKです。

/**
 * 3.0 Basic Structure
 * -----------------------------------------------------------------------------
 */

.site {
	background-color: #fff;
	max-width: 1260px;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

この通り、無事に中央配置のレイアウトになりました!

中央配置されたレイアウト

中央配置されたレイアウト
グレーの背景が左右均等に表示されるようになりました。

もし、↓のようにスタイルシートの編集画面で「ファイルを更新」ボタンが表示されていない場合は、WordPressが書き込みできるようにパーミッションを設定してあげる必要があります。

テーマの書き込みできないとき

テーマの書き込みできないとき

下記のように書き込みパーミッションを与えてあげましょう。

sudo chmod 707 ./wp-content/themes/
sudo chmod 707 ./wp-content/themes/twentyfourteen/
sudo chmod 707 ./wp-content/themes/twentyfourteen/style.css
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメント

  1. uchiyama shoichi より:

    初めまして、TwentyFourteen初心者です。先日上記対応でCenter確認でき。安心して元に戻しました。ところが、本日さいどテーマをCenterにしようと、同じ所に同じように追加しましたが、左よりで変更されません。パーミッション対応が良く理解できていません。でも、この現象はどう言う事なのしょうか?ご教授お願いします。

  2. hoerin より:

    コメントいただき、ありがとうございます!

    一回は成功されたんですね。それでしたらパーミッションは問題ないかと思います。

    基本的に、.siteに対して、margin-leftとmargin-rightをautoにするだけでOKです。

    ;(セミコロン)を忘れていたり、他の設定を変更していたりすると、正しく反映されませんのでご注意ください。

    もしスタイルシートの設定に問題がない場合、ブラウザに古い情報がキャッシュされている可能性が考えられます。ブラウザの再読み込みボタンを押して、最新の情報を読み込んでみてください。

    それでもうまくいかなければ、URLを教えていただければ確認します!

コメントを残す

*