![f:id:ss17935:20190127003541j:plain f:id:ss17935:20190127003541j:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/s/ss17935/20190127/20190127003541.jpg)
いろんな方のブログを見ていると、格好良い見出しのブログが沢山あります。
自分のブログもああいう風にしたい...。
またまた、Google 先生にお願いしたら、解決策が見つかりました。
現状は以下のようになっています。
/****************
文字サイズの変更
*****************/
.entry-content h3 {
font-size:24px;
}
.entry-content h4 {
font-size:22px;
}
.entry-content h5 {
font-size:20px;
}
.entry-content p {
font-size:19px;
}
これは単純に各見出しの文字サイズを指定しています。
大見出し = 24px
中見出し = 22px
小見出し = 20px
普通 = 19px
という意味です。
イメージはこういう感じです。↓
![f:id:ss17935:20190127005325p:plain f:id:ss17935:20190127005325p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/s/ss17935/20190127/20190127005325.png)
これを以下のように変更してみます。
/****************
文字サイズの変更
*****************/
.entry-content h3 {
font-size:24px;
color: #000000;
padding: 10px 15px;
border-left: 10px solid #02BE15;
border-bottom: 5px solid #88F639;
}
.entry-content h4 {
font-size:22px;
color: #000000;
padding: 10px 15px;
border-left: 10px solid #02BE15;
border-bottom: 4px solid #88F639;
}
.entry-content h5 {
font-size:20px;
color: #000000;
padding: 10px 15px;
border-left: 10px solid #02BE15 ;
border-bottom: 3px solid #88F639;
}
.entry-content p {
font-size:19px;
}
色とか、線とかを入れてみました。
(とか言ってますが、全てコピペであまり意味はわかってません。)
するとこんな感じになります。↓
![f:id:ss17935:20190127005742p:plain f:id:ss17935:20190127005742p:plain](https://cdn-ak.f.st-hatena.com/images/fotolife/s/ss17935/20190127/20190127005742.png)
緑の縦線と横線でちょっとだけ華やかになりました。
もっとおしゃれにしたい方は、線の種類とか、色とか、グラデーションとか、いろいろ指定できるようです。
私も詳細はわからないのですが、Google 先生に頼むときっと教えてくれます。
↓ ランキングに参加しています。よろしければポチッとして下さい。
![にほんブログ村 ブログブログ ブログノウハウへ](//blog.blogmura.com/blog_knowhow/img/blog_knowhow88_31.gif)