[Vaster2] 「記事本文の行間をあける」 line-height の記入場所

いまさらながら気が付きました……

.post-body か .entry-content で css を書けば適用されました。

.post-body {
 line-height :1.7em;
 }

貼り付ける場所は Vaster2 デフォルトだと 218行目からはじまる「記事ページのフォント」の main-outer p の閉じカッコの下にしました。

変更前

/*   記事のフォント
----------------------------------------------- */
.main-outer h1{
   font-size:28px;
    line-height:1.6em;
   margin-bottom:30px;
}
.entry-content h2{
  padding: .5em .75em;
    margin-bottom: 30px;
    background: #008ec2;
    color: #fff;
}
.entry-content h3{
   font-size:20px;
  padding:15px 0 15px 10px;
   border-left: 8px solid #008ec2;
color:#008ec2;
}
.main-outer p{
   font-size:16px;
    line-height:1.6em;
   padding-bottom:24px;
}

変更後

/*   記事のフォント
----------------------------------------------- */
.main-outer h1{
   font-size:28px;
    line-height:1.6em;
   margin-bottom:30px;
}
.entry-content h2{
  padding: .5em .75em;
    margin-bottom: 30px;
    background: #008ec2;
    color: #fff;
}
.entry-content h3{
   font-size:20px;
  padding:15px 0 15px 10px;
   border-left: 8px solid #008ec2;
color:#008ec2;
}
.main-outer p{
   font-size:16px;
    line-height:1.6em;
   padding-bottom:24px;
}
.post-body {
 line-height :1.7em;
 }

現在の運用

Typora などのマークダウンエディタをつかうと pタグで文章が構成されます。

こんな感じ

<p>こんにちは</p>

なにもしないと.main-outer p が適用されます。
もちろん.main-outer p を書き換えてもいいと思いますが、記事の文章に限定したかったので .post-body p も加えました。

.post-body,.post-body p {
 line-height :1.7em;
 }

また、自分の環境では記事ページリンク .post a が効かなくなっていたので下記に置き換えました。

変更前

/*   記事ページのリンク
----------------------------------------------- */
.post a{
 text-decoration:none;
 color:#3366cc;
}
.post a:hover {
 text-decoration:underline;
 color:#3366cc;
}
.post a:visited{
 color:#3366cc;
}

変更後

/*   記事ページのリンク
----------------------------------------------- */
.post-body a{
 text-decoration:none;
 color:#2d6bc4;
}
.post-body a:hover{
 text-decoration:underline;
}
.post-body a:visited{
 color:#2d6bc4;
}

あらためてコードを見てみる

いままで <data:post.body/> を <div class=‘main-post’> という div で囲って、css を適用させていました。

<div class='main-post'>
<data:post.body/>
</div>

.main-post {
 line-height 1.7em;
 }

あらためてコードを見てみると

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>

というのがあったので、

.post-body

か

.entry-content

を使えば記事に line-height などの css が適用されるようになります。