Simplicity2の設定(記事本文の表示変更)

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

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

スポンサーリンク
広告336

内容

見出し変更h2~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;
}

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

まとめ

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

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

スポンサーリンク
広告336
広告336

シェアする