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

• 前提として
  • ソースコードを貼り付ける場所
  • どの見出しを変えるか？
  • バックアップ
• 一般的な見出し
• CSS3を使ったおしゃれな見出し
• 見出しカスタマイズで参考になるサイト
• 見出しカスタマイズジェネレーター
• さいごに

前提として

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

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

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

どの見出しを変えるか？

はてなブログでは、見出しは以下の３つに分けられます。（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;
}

上下ライン

.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;
}

左ライン＋背景色

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

背景色

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

背景色＋角丸

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

下ライン

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

下ライン2重ライン

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

下ライン＋点線

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

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によっては上手くいかない場合がございますのでご了承ください。ご利用は自己責任でお願い致します。