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

      2016/03/21

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

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

 

Sponsored Links

 

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

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

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

Img site disp left

 

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
 * -----------------------------------------------------------------------------
 */

 

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

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

Img site disp setting 1

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

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

 

Sponsored Links

 - TwentyFourteen
 -