コピペで使える見出しのデザイン

コードをクリックすると選択状態になるので、コピーしてダッシュボードの「外観」>「カスタマイズ」>「追加 CSS」に貼り付けてください。

最初に既存のスタイルをリセットするコードを貼り付け、その下に新たに適用したいデザインのコードを貼り付けてください。

コード内のh3をh4、h5…とすることで、変更する見出しを選ぶことができます。

1-1下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0 0 0.5em;
  border-bottom: 3px solid #336699;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-2点下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0 0 0.5em;
  border-bottom: 3px dotted #336699;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-3二重下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0 0 0.5em;
  border-bottom: 3px double #336699;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-4上下に線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0;
  border-top: 3px solid #336699;
  border-bottom: 3px solid #336699;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-5背景色

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  background-color: #d6e0ea;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-6線で囲む

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border: 3px solid #336699;
  border-radius: 0.5em;
  color: #336699;
  font-size: 21px;
  line-height: 1.333;
}

1-7背景色＋下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border-bottom: 3px solid #336699;
  background-color: #eeeeee;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-8左線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border-left: 3px solid #336699;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

1-9左線＋背景色

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border-left: 3px solid #336699;
  background-color: #eeeeee;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-1タグ風

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  display: inline-block;
  padding: 0.5em 0.666em;
  border-radius: 25px 5px 5px 25px;
  background: #d6e0ea;
  vertical-align: middle;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  margin-right: 8px;
  color: white;
  content: '●';
}

2-2吹き出し

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.666em;
  border-radius: 5px;
  background: #d6e0ea;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 15px solid #d6e0ea;
  content: '';
}

2-3ステッチ風1

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  margin-right: 5px;
  margin-left: 5px;
  padding: 0.5em 0.666em;
  border: 2px dashed #84a3c1;
  background: #d6e0ea;
  box-shadow: 0px 0px 0px 5px #d6e0ea;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-4ステッチ風2

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  margin-right: 5px;
  margin-left: 5px;
  padding: 0.5em 0.666em;
  border: 2px dashed #ffffff;
  background: #d6e0ea;
  box-shadow: 0px 0px 0px 5px #d6e0ea;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-5ステッチ+角折れ

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.666em;
  border: dashed 2px white;
  background: #d6e0ea;
  box-shadow: 0px 0px 0px 5px #d6e0ea;
  color: #454545;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  top: -7px;
  left: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #7093b7;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
  content: '';
}

2-6マーカー風

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  background: linear-gradient(transparent 50%, #d6e0ea 50%);
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-7途中で色が変わる線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-bottom: 0.5em;
  border-bottom: 3px solid #d6e0ea;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: -3px;
  display: block;
  width: 30%;
  border-bottom: solid 3px #336699;
  content: " ";
}

2-8線先に矢印

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-bottom: 0.5em;
  padding-left: 25px;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  bottom: -3px;
  left: -3px;
  width: 0;
  height: 0;
  border: none;
  border-bottom: 15px solid #336699;
  border-left: 15px solid transparent;
  content: '';
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  border-bottom: 3px solid #336699;
  content: '';
}

2-9ストライプ背景

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  background: -webkit-repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  background: repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  text-shadow: 0 0 5px white;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-10ストライプ背景+左線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 0.666em;
  border-left: 7px solid #336699;
  background: -webkit-repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  background: repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  text-shadow: 0 0 5px white;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-11ストライプ背景＋上下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.75em 0.75em;
  border-top: 2px solid #336699;
  border-bottom: 2px solid #336699;
  background: -webkit-repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  background: repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  text-align: center;
  text-shadow: 0 0 5px white;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}

2-12ストライプ下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-bottom: 0.5em;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #c1d1e0, #c1d1e0 3px,#eaeff4 3px, #eaeff4 7px);
  background: repeating-linear-gradient(-45deg, #c1d1e0, #c1d1e0 3px,#eaeff4 3px, #eaeff4 7px);
  content: "";
}

2-13ストライプ背景吹き出し

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.666em;
  border-radius: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  background: repeating-linear-gradient(-45deg, #d6e0ea, #d6e0ea 3px,#eaeff4 3px, #eaeff4 7px);
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  top: 100%;
  left: 30px;
  width: 0;
  height: 0;
  border: 15px solid transparent;
  border-top: 15px solid #d6e0ea;
  content: '';
}

2-14交差線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.75em 1em;
  border-top: 2px solid #336699;
  border-bottom: 2px solid #336699;
  text-align: center;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before, 
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #336699;
  content: '';
}
.entry-content > h3:before, 
.textwidget > h3:before {left: 7px;}
.entry-content > h3:after, 
.textwidget > h3:after {right: 7px;}

2-15鍵カッコ

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  display: inline-block;
  margin-bottom: 1em;
  padding: 0.5em 1em;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before,
.entry-content > h3:after , 
.textwidget > h3:after {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 30px;
  content:'';
}
.entry-content > h3:before, 
.textwidget > h3:before {
  top:0;
  left: 0;
  border-top: solid 1px #336699;
  border-left: solid 1px #336699;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  right: 0;
  bottom:0;
  border-right: solid 1px #336699;
  border-bottom: solid 1px #336699;
}

2-16大カッコ

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  top:0;
  display: inline-block;
  padding: 0.5em 1em;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before,
.entry-content > h3:after , 
.textwidget > h3:after { 
  position: absolute;
  top: 0;
  display: inline-block;
  width: 8px;
  height: 100%;
  content:'';
}
.entry-content > h3:before, 
.textwidget > h3:before {
  left: 0;
  border-top: solid 1px #336699;
  border-bottom: solid 1px #336699;
  border-left: solid 1px #336699;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  right: 0;
  border-top: solid 1px #336699;
  border-right: solid 1px #336699;
  border-bottom: solid 1px #336699;
  content: '';
}

3-1チェックアイコン

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-left: 1.333em;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 0;
  left: 0;
  color: #336699;
  content: "\f00c";
  font-weight: normal;
  font-size: 1em;
  font-family: FontAwesome;
}

3-2アイコン+背景色+上下線

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.5em;
  padding: 0.5em 1em 0.5em 1.75em;
  border-top: 1px dotted #336699;
  border-bottom: 1px dotted #336699;
  background: #eaeff4;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  color: #336699;
  content: "\f138";
  font-weight: normal;
  font-size: 1em;
  font-family: FontAwesome;
}

3-3吹き出しアイコン

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-left: 1.333em;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 0;
  left: 0;
  color: #336699;
  content: "\f075";
  font-weight: normal;
  font-size: 1em;
  font-family: FontAwesome;
}

3-4アイコン+背景色

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.5em 0.5em 1.8em;
  background: #336699;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  left : 0.5em;
  content: "\f14a";
  font-weight: normal;
  font-family: FontAwesome;
}

3-5タブ1

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  margin: 2em 0 1em;
  padding: 0.5em 0.75em;
  border-radius: 0 5px 5px 5px;
  background: #eaeff4;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: 100%;
  left: 0px;
  padding: 3px 7px 1px;
  border-radius: 5px 5px 0 0;
  background: #336699;
  color: #fff;
  content: '\f00c Check';
  letter-spacing: 0.05em;
  font-weight: normal;
  font-size: 0.7em;
  font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
  line-height: 1;
}

3-6タブ2

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  margin: 2em 0 1em;
  padding: 0.5em 0.75em;
  border-top: solid 2px #336699;
  border-bottom: solid 2px #336699;
  background: #f3f3f3;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: 100%;
  left: 0px;
  padding: 5px 7px 3px;
  border-radius: 5px 5px 0 0;
  background: #336699;
  color: #fff;
  content: '\f0a7\ POINT';
  letter-spacing: 0.05em;
  font-weight: normal;
  font-size: 0.7em;
  font-family: FontAwesome,'Quicksand','Avenir','Arial',sans-serif;
  line-height: 1;
}

3-7アイコンに背景

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.75em;
  border-left: solid 2em #336699;
  background: #eaeff4;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 50%;
  left: -1.35em;
  padding: 0em;
  color: white;
  content: "\f040";
  font-weight: normal;
  font-family: FontAwesome;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

3-8ひらめき

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding-left: 42px;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffca2c;
  color: white;
  content: "\f0eb";
  text-align: center;
  font-weight: normal;
  font-size: 18px;
  font-family: FontAwesome;
  line-height: 30px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  top: 50%;
  left: 24px;
  display: block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 12px solid #ffca2c;
  content: '';
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

3-9円にアイコン+バー

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  padding: 0.5em 0.75em;
  padding-left: 2.5em;
  border-radius: 0 999px 999px 0;
  background: #eaeff4;
  color: #000000;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  top: 50%;
  left: -.5em;
  display: inline-block;
  padding: 0em;
  width: 51px;
  height: 51px;
  border: solid 3px white; 
  border-radius: 50%;
  background: #336699;
  color: white;
  content: "\f135";
  text-align: center;
  font-weight: normal;
  font-family: FontAwesome;
  line-height: 51px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

4-1角丸背景1

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em .75em;
  border-radius: 0.5em;
  background: #336699;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.333;
}

4-2角丸背景2

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  padding: 0.5em 1em;
  border-radius: 999px;
  background: #336699;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.333;
}

4-3考え事

見本

新しい朝が来た　希望の朝だ

喜びに胸を開け　大空あおげ　ラジオの声に　健やかな胸を

コード

/* 既存のスタイルをリセット */
.entry-content > h3, 
.textwidget > h3 {padding: 0;border-radius: 0;background: none;border: none; }

/* 見出しのスタイルを変更 */
.entry-content > h3, 
.textwidget > h3 {
  position: relative;
  margin-left: 40px;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: #336699;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.333;
}
.entry-content > h3:before, 
.textwidget > h3:before {
  position: absolute;
  bottom: 0;
  left: -40px;
  color: #336699;
  content: "\f111";
  font-size: 15px;font-family: FontAwesome;
}
.entry-content > h3:after, 
.textwidget > h3:after {
  position: absolute;
  bottom: 0;
  left: -23px;
  color: #336699;
  content: "\f111";
  font-size: 23px;
  font-family: FontAwesome;
}