twetyfourteenをちょっとだけカスタマイズ

2013/12/28

 本サイトのテーマをwordpress3.8に含まれる新しいテーマのtwentyfourteenに変更しました。

 全体の表示幅が1260pxと広いので、ちょっと狭くして、全体の配置が左寄せになっているのをセンタリングにする程度ですが、変更してみました。

1.まず、子テーマを作成

themeディレクトリに、わかりやすいように「2014」などのフォルダを作成して、style.cssを作成。

/*
Theme Name: 2014_child
Template: twentyfourteen
*/

@import url('../twentyfourteen/style.css');

ここで、親テーマをインポート

2.全体レイアウトをセンタリングする

 先のcssの次に#pageを追加して、

#page	{
	margin: 0 auto;
}

これで、センターに移動。

3.全体幅を960pxにしてみました。

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

とりあえず、全体幅は変更されたけど、このテーマはスマホからPCまでいろいろな表示幅に対応したすばらしいテーマのため、その設定が、親テーマのcssの中の「11.0 Media Queries」にありますね。

こちらとの関連を調べて表示幅を調整するほうがいいのかなと思います。

 本サイトでは、単に表示幅を変更したのみです。