コピペで簡単！CSSではてなブログの見出しをカスタマイズ！

f:id:shiromatakumi:20151203181349p:plain

ブロガー必見記事

ブログでお小遣い稼ぎする方法大公開 - NO TITLE

今回はたくさんの見出しを作ってみました。コピペだけで、はてなブログの見出しがカスタマイズできます。デザインは選べる8種類！

CSSの勉強にもなると思うので、WEBデザイン勉強中の人も必見です。

ただし、使っているテーマによっては、うまくいかない可能性があります。ご了承ください。

コピペでできる見出しのカスタマイズ
見出しタイプ1
見出しタイプ2
見出しタイプ3
見出しタイプ4
見出しタイプ5
見出しタイプ6
見出しタイプ7
見出しタイプ8
スマホの見出し変更方法

コピペでできる見出しのカスタマイズ

見出しのサンプルとそのコードの一覧です。コードを下の場所（デザイン→カスタマイズ→デザインCSS）に張り付ければ、CSSが反映されます。テーマを読み込むコードが記述されていると思うので、その下にコピペしてください。

f:id:shiromatakumi:20151203211100j:plain

先にコードの見方だけ説明しておきます。

はてなの編集画面では、見出しのタグは以下のように設定されています。

大見出し・・・ h3

中見出し・・・ h4

小見出し・・・ h5

中見出しの見出しを変えたいときはコード内の h3 → h4 に書き換えて下さい。小見出しを変更したい場合は h3 → h5 に書き換えて下さい。

見出しの背景、ライン、文字の色はご自身で好きな色に変更してください。

たとえば、

background-color: #111;

の下線部が背景色です。ここのカラーコードを書き換えると色が変わります。

同様に、

color: #111;

の下線部が文字の色です。

border: #111;

下線部がラインの色です。

下記のサイトからカラーコードが確認できます。コードをコピペして書き換えれば好きな色に変更できます。

www.color-sample.com

もし使っているテーマの見出しデザインと重なってしまったら、下のコードを先に記述して、その後に見出しのコードを追加してください。

/* 見出しのリセット */
.entry-content h3,
.entry-content h3::before,
.entry-content h3::after {
  background: none;
  border: none;
  border-radius: 0;
}

見出しタイプ1

左にカラーのラインが入ったシンプルな見出しです。よく見かける見出しのデザインですね。

.entry-content h3 {
  padding: 4px 10px;
  color: #111;
  background-color: #f0f0f0;
  border-left: 8px solid #2d70a4;
}

見出しタイプ2

左に太めのライン、下に細めのラインが入った見出し。こちらもよく見かける見出しのデザインですね。

.entry-content h3 {
  padding: 4px 10px;
  color: #111;
  background-color: #f0f0f0;
  border-left: 8px solid #1056a2;
  border-bottom: 1px solid #1056a2;
}

見出しタイプ3

上下にラインが入った見出し。

.entry-content h3 {
  padding: 4px 10px;
  color: #111;
  border-top: 2px solid #2d70a4;
  border-bottom: 2px solid #2d70a4;
}

見出しタイプ4

見出しの下に2本のラインを重ねるデザイン。

.entry-content h3 {
  position: relative;
  color: #111;
  border-bottom: 4px solid #ccc;
  padding: 8px 10px;
}
.entry-content h3::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 20%;
  height: 4px;
  background-color: #3498db;
  z-index: 2;
  content: '';
}

見出しタイプ5

もみじさん（id:momijimom）からのリクエストでステッチ入りの見出しを作ってみました。ネイビーの背景色で、デニム生地風に。

.entry-content h3 {
  position: relative;
  padding: 6px 10px;
  color: #fff;
  background-color: #293b6a;
  border-radius: 4px;
}
.entry-content h3::before,
.entry-content h3::after {
  position: absolute;
  width: 100%;
  height: 4px;
  z-index: 2;
  content: '';
}
.entry-content h3::before {
  top: 0;
  left: 0;
  border-bottom: 1px dashed #fff;
}
.entry-content h3::after {
  top: 100%;
  left: 0;
  margin-top: -4px;
  border-top: 1px dashed #fff;
}

見出しタイプ6

吹き出し風のデザイン。

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

見出しタイプ7

二枚の四角の背景を重ねてみました。色の組み合わせが楽しめる見出しです。

.entry-content h3 {
  position: relative;
  color: #fff;
  padding: 6px 10px;
  z-index: 2;
}
.entry-content h3::before,
.entry-content h3::after {
  position: absolute;
  width: 98%;
  height: 100%;
  content: '';
}
.entry-content h3::before{
  top: 0px;
  left: 0px;
  z-index: -1;
  background-color: #2a9ca2;
}
.entry-content h3::after{
  top: 4px;
  left: 4px;
  z-index: -2;
  background-color: #111;
}

見出しタイプ8

可愛い感じの見出し。たまに見かけるデザインですね。

.entry-content h3 {
  position: relative;
  padding: 6px 0 6px 34px;
  color: #111;
  border-bottom: 2px solid #ce0d55;
}
.entry-content h3::before,
.entry-content h3::after {
  position: absolute;
  background-color: #ce0d55;
  content: '';
}
.entry-content h3::before{
  top: 0;
  left: 14px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(50deg);
  transform: rotate(50deg);
}
.entry-content h3::after{
  top: 18px;
  left: 8px;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}