Simplicity２の設定（記事本文の表示変更）

こんばんはヤス虎です(*’▽’)

Simplicity２設定の覚え書き、記事本文の表示変更編です。

内容

見出し変更ｈ2～4と文字間隔の変更です。

 

見出し変更

style.cssに下記コードを書き込みます。

/*h2～h4*/
.article h2 {
font-size: 22px;
margin: 0em 0em;/*1emは1文字*/
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 10px #7db4e6;/*左線*/
}

.article h3 {
font-size: 20px;
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom:5px solid #7db4e6;　/*アンダーバー*/
}

.article h4 {
font-size: 18px;
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 3px #7db4e6;/*左線*/
border-bottom:3px dashed #7db4e6;　/*アンダーバー*/
}

ビジュアルエディターも変更します。
editor-style.cssに下記コードを書き込みます。

/*ビジュアルエディターのスタイルh2～h4*/
body#tinymce.wp-editor h2 {
font-size: 22px;
margin: 0em 0em;/*1emは1文字*/
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 10px #7db4e6;/*左線*/
}

body#tinymce.wp-editor h3 {
font-size: 20px;
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom:5px solid #7db4e6;　/*アンダーバー*/
}

body#tinymce.wp-editor h4 {
font-size: 18px;
padding: 0.25em 0.25em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 3px #7db4e6;/*左線*/
border-bottom:3px dashed #7db4e6;　/*アンダーバー*/
}

 

文字間隔の変更

style.cssに下記コードを書き込みます。

.article {
    line-height: 170%;
} 
.article p {
    margin-bottom: 2em;
}
.article li{
    margin-bottom: 2em;
}

こんな感じになりました。

 

 

まとめ

実際ｈ2しか使わない予定なのでｈ3,4は適当です。そのうち気が向いたら修正したいと思います。(‘～’)文字の行間は好みの問題なので何がいいのかよくわかりませんので、いろいろ試して変更していくと思います。

そして最後に試す時は自己責任でお願いします。