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

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

はてなブログ:記事タイトルをおしゃれにカスタマイズする方法

f:id:ss17935:20190223133413j:plain

 

標準のブログ記事のタイトルはすっきりしているが味気ないですね。↓

 

f:id:ss17935:20190223133745p:plain

 

ちょっとだけオシャレに、記事タイトルを強調してみました。

といっても、私にはコードは書けませんので、コピペのみです。

ダッシュボードから「デザイン」→「カスタマイズ」→「デザインCSS」へ移動。

以下のコードをコピペするだけです。

 

/* タイトルのカスタマイズ */
.entry-title {
font-weight: bold;
font-size: 20px;
position: relative;
padding: 1em 0;
}
.entry-title::before,
.entry-title::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
.entry-title::before {
top: 0;
border-top: 2px solid #ccc;
border-bottom: 1px solid #ccc;
}
.entry-title::after {
bottom: 0;
border-top: 1px solid #ccc;
border-bottom: 2px solid #ccc;
}

 

文字サイズを変更したい場合は赤字部分を変更すれば良いはずです。

が、私のブログではここを変更してもダメでした。

どこか他にフォントサイズを指定している部分があるのかもしれません。

その原因はゆくゆく解明するとして、こんな感じになりました。↓

 

f:id:ss17935:20190223134441p:plain

 

今回のカスタマイズでは、以下のサイトにお世話になりました。

 

コピぺでOK!CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 - North-Geek

 

ありがとうございました。

 

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

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