【Twenty Fourteen】サイト全体が左寄りになっているのを、中央表示にする⇒style.css 変更メモ

2016/03/21

前回に続き、Wordpressのデフォルトテーマ【TwentyFourteen】のstyle.css 変更メモです。

今回は左寄り表示になっているのを、中央表示に変更します。

サイト全体が左寄りになっているのを、中央表示に変更します。

デフォルト表示が下記。全体的に左寄りになっています。

（ちなみに、これはローカルでサイトを表示させています。デバッグ環境のようなものです。）

style.cssに下記のコードを追加すれば、中央表示にできます。

前回のエントリーで書いた見出しのclass属性の下にでも追加すればOKです。

（一応前回追加した見出しの部分も残しておきます。）

/*ここは見出し用のclass属性*/
.midasi02{
     font-size: 18px;
     color:#000; /*文字色*/
     background:#fff; /*背景色*/
     border-left:1px solid #ccc; /*左線の太さ、種類、色*/
     border-bottom:1px solid #ccc; /*下線の太さ、種類、色*/
     padding:.8em .9em .8em .9em; /*上下左右の間隔*/
}

/*サイトを中央表示にする⇒ここを追加するだけでOK*/
.site {
    margin: 0 auto;
}

/**
 * 2.0 Repeatable Patterns
 * -----------------------------------------------------------------------------
 */

変更後のサイト表示が下記。

無事に中央表示に変更できました。

やはり中央表示の方が見やすいですね。

是非参考になれば幸いです。