読者です 読者をやめる 読者になる 読者になる

North-Geek

North-Geek(ノース・ギーク) 北海道札幌市在住のWebプログラマー・エンジニア

北海道札幌在住のWebプログラマーのブログです。

コピペでOK!CSSのみで見出しをおしゃれにする方法10選【はてなブログカスタマイズ対応】

Webデザイン blog-はてなブログ blog blog-カスタマイズ Web Web-css

f:id:northgeek:20160214234651j:plain

こんにちは!ブログにおいて見出しのデザインはとても重要といえます。今回は「はてなブログ」の見出しをカスタマイズする際に、コピペのみで変更する方法を紹介したいと思います。もちろんはてなブログ意外でもOKです。




前提として

ソースコードを貼り付ける場所

f:id:northgeek:20160215211628j:plain


  1. デザイン
  2. カスタマイズ
  3. デザインCSS

上記の順番で「デザインCSS」を開きます。

どの見出しを変えるか?

はてなブログでは、見出しは以下の3つに分けられます。(HTMLで直接編集している人は、h1、h2も使用することが可能です。)

  • 大見出し→h3
  • 中見出し→h4
  • 小見出し→h5

今回作成したコピペは、「.entry-content h3」=大見出しが変わるように設定しております。

中見出しを変更したい場合は、「.entry-content h3」→「.entry-content h4
小見出しを変更したい場合は、「.entry-content h3」→「.entry-content h5

と変更してコピペしてください。

バックアップ

元に戻せるように、バックアップは必ず取るようにしてください。ブログをカスタマイズする際は基本ですね。


一般的な見出し

左ライン

.entry-content h3{
	border-left: 1px solid #d7605e;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 左ラインを太くしたい場合は「border-left: 1px solid #d7605e;」、1pxの値を変更します。
  • フォントサイズを変えたい場合は「font-size: 20px;」、20pxの値を変更します。
  • ラインの色を変更したい場合は「border-left: 1px solid #d7605e;」、#d7605e;の値を変更します。


上下ライン

.entry-content h3{
	border-top: 1px solid #d7605e;
	border-bottom: 1px solid #d7605e;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 上ラインを太くしたい場合は「border-top: 1px solid #d7605e;」、1pxの値を変更します。
  • 下ラインを太くしたい場合は「border-bottom: 1px solid #d7605e;」、1pxの値を変更します。
  • ラインの色を変更したい場合は「border-top: 1px solid #d7605e;」、#d7605e;の値を変更します。


左ライン+背景色

.entry-content h3{
	border-left: 5px solid #d7605e;
	background-color: #eee;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 左ラインを太くしたい場合は「border-left: 5px solid #d7605e;」、5pxの値を変更します。
  • ラインの色を変更したい場合は「border-left: 5px solid #d7605e;」、#d7605e;の値を変更します。
  • 背景色を変更したい場合は「background-color: #eee;」、#eeeの値を変更します。



背景色

.entry-content h3{
	background-color: #eee;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 背景色を変更したい場合は「background-color: #eee;」、#eeeの値を変更します。



背景色+角丸

.entry-content h3{
	background-color: #eee;
	border-radius: 8px;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}



  • 背景色を変更したい場合は「background-color: #eee;」、#eeeの値を変更します。
  • 角丸の丸みを変更したい場合は「border-radius: 8px;」、8pxの値を変更します。数字が大きくなると丸みが強くなります。


下ライン

.entry-content h3{
	border-bottom: 3px solid #d7605e;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
}


  • 下ラインを太くしたい場合は「border-bottom: 3px solid #d7605e;」、3pxの値を変更します。
  • ラインの色を変更したい場合は「border-bottom: 3px solid #d7605e;」、#d7605e;の値を変更します。


下ライン2重ライン

.entry-content h3{
	border-bottom: 5px double #d7605e;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 下ラインを太くしたい場合は「border-bottom: 3px double #d7605e;」、3pxの値を変更します。
  • ラインの色を変更したい場合は「border-bottom: 3px double #d7605e;」、#d7605e;の値を変更します。


下ライン+点線

.entry-content h3{
	border-bottom: 3px dotted #d7605e;
	font-size: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding: 10px 15px;
}


  • 下ラインを太くしたい場合は「border-bottom: 3px dotted #d7605e;」、3pxの値を変更します。
  • ラインの色を変更したい場合は「border-bottom: 3px dotted #d7605e;」、#d7605e;の値を変更します。

CSS3を使ったおしゃれな見出し

吹き出し

.entry-content h3 {
    position: relative;
    color: #333;
    background: #eee;
    font-size: 16pt ;
    border: 3px solid #d7605e;
    margin: 10px 10px 23px 10px;
    padding: 10px 5px 10px 10px;
    border-radius: 3px;
}
.entry-content h3:after, .entry-content h3:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
}
.entry-content h3:after {
    left: 40px;
    border: 10px solid transparent;
    border-top: 10px solid #eee;
}
.entry-content h3:before {
    left: 37px; 
    border: 13px solid transparent;
    border-top: 13px solid #d7605e;
}


リボン

.entry-content h3 {
    position: relative;
    color: #333 ;
    background: #eee;
    font-size: 16pt ;
    line-height: 1;
    margin: 20px -10px 20px -10px;
    padding: 10px 5px 10px 20px;
    box-shadow:1px 3px 7px 0px  #666 ;
    border-top:3px solid #d7605e;
}
.entry-content h3:after, .entry-content h3:before {
    content: "";
    position: absolute;
    top: 100%;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-top: 5px solid #d7605e;
}
.entry-content h3:after {
    left: 0;
    border-right: 5px solid #d7605e;
}
.entry-content h3:before {
    right: 0;
    border-left: 5px solid #d7605e;
}


見出しカスタマイズで参考になるサイト

いくつか参考になるサイトも貼っておきます。安定のゆきひーさんのブログは、はてなブログカスタマイズでお馴染みですね。

www.yukihy.com
mudaide.hatenablog.com
georges.hatenablog.jp


見出しカスタマイズジェネレーター

簡単におしゃれなジェネレーターを作れるサイトもいくつか載せておきます。

web-dou.com
midashi-maker.v-colors.com
www.colordic.org


さいごに

いかがでしたでしょうか。CSSを知らなくてもコピペでOKです。これでいつでも簡単に見出しを変更することが出来ます。

※お使いのブログのCSSによっては上手くいかない場合がございますのでご了承ください。ご利用は自己責任でお願い致します。


オススメ記事!

www.north-geek.com

Copyright© North-Geek All Rights Reserved.