スポンサーリンク

ミニョン☆の備忘録

美容系や100均の商品、その他いろいろの備忘録♪数分で読める短い記事が多いので、お気軽にどうぞ~。(*^-^*)

必見☆彡デザインカスタマイズ:【見出しをカスタマイズする方法】

見出しのカスタマイズ

はてなブログって、有料プランしかカスタマイズ出来ないのかと

思っていました。

無料でも出来ることが多いのに、驚きと感動です。(*^-^*)

 

詳しい説明

こちらを参考にさせていただきました。

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

わかりやすいので、読んでみてくださいね。

www.notitle-weblog.com

 

私は『吹き出し風のデザイン』をチョイス

これをコピペで、カスタマイズ⇒デザインCSSの部分に貼り付けます。

●吹き出し風のデザインのコード

.entry-content h3 {
  position: relative;
  color: #fff;
  padding: 8px 12px;
  background-color: #129b98;
  border-radius: 6px;
}
.entry-content h3::before{
  position: absolute;
  top: 100%;
  left: 32px;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent;
  border-top-color: #129b98;
  content: '';
}

●見出しのタグ

 大見出し ・・・ h3 中見出し ・・・ h4 小見出し ・・・ h5

 上のでは h3になっているので、中見出しならh4に変えます。

●カラーは、好きな色に変更できます。

 background-color: 背景色
 color:文字の色
 border: ラインの色
 

カラーコード

色々ありますが、こちらは気に入ったカラーが保存出来て
便利です!

fromkato.com

こちらも探しやすいです。

html-color-codes.info

 

まだいろいろ試してますが、取り合えず今のを紹介!

見出しのカラーを、ライトグレーとブラックのツートンにしてみました。

(また変えるかもしれません。)

f:id:bell88:20180218204443p:plain

動画付きのわかりやすい記事を発見!

www.blog-support.com

 

スポンサーリンク