Maximal Life

渋谷で働く営業本部長のブログ

はてなブログ:見出しを格好良くカスタマイズ

f:id:ss17935:20190127003541j:plain

 

いろんな方のブログを見ていると、格好良い見出しのブログが沢山あります。

自分のブログもああいう風にしたい...。

またまた、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

 

これを以下のように変更してみます。

 

/****************
文字サイズの変更
*****************/

.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

 

緑の縦線と横線でちょっとだけ華やかになりました。

もっとおしゃれにしたい方は、線の種類とか、色とか、グラデーションとか、いろいろ指定できるようです。

私も詳細はわからないのですが、Google 先生に頼むときっと教えてくれます。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ