PRこの記事には商品プロモーションを含む場合があります。

デザイン

HTML・CSSをコピペで簡単！30秒でできる見出しデザイン集

「ブログ記事の見出しのデザインが気に入らない」

「もっとオシャレな見出しにしたいけど、CSSとかわからない...」

そんな人のために、プロのデザイナーが作ったような、オシャレな見出しデザインを用意しました。

すべてコピペで使えるので、初心者の方でも30秒で簡単に導入できますよ。

この記事で紹介する見出しサンプルを使えば、記事の完成度がぐんと高まるので、ぜひ参考にしてみてください！

 

オリジナル見出しの設置手順

まずは、WordPressの記事に「オリジナルの装飾」を追加する方法をお伝えします。

プラグインは用いず、次に手順で進めるだけで、かんたんに適用できますよ。

  1. WordPressの管理画面にログイン
  2. 外観→カスタマイズを選択してカスタマイズ画面を開く
  3. 「追加CSS」メニューを開く
  4. 本記事のサンプルコード（CSS 部分）をコピペする
  5. WordPressの投稿画面で「コードエディター」を開く
  6. 本記事のサンプルコード（HTML 部分）をコピペする
  7. 「ビジュアルエディター」に切り替える
  8. 見出しタイトルを編集する

次のボタンをタップすると、画像ベースで分かりやすい手順を表示できます。

もっと詳しい手順を見る
STEP
WordPress カスタマイズ画面の「追加CSS」メニューを開く

まずはWordPress の管理画面にログインしましょう。

ログインしたら、メニューから「外観→カスタマイズ」を選択してカスタマイズ画面を開きます。

 

カスタマイズ画面が表示されたら、メニューから「追加CSS」を選択します。

 

STEP
CSSコードをコピペする

以下の CSS コードをコピーし、WordPress の「追加CSS」に貼り付けてください。

CSS コード
html body .sample2 h2, html body .sample2 h2::before, html body .sample2 h2::after,html body .sample2 h3, html body .sample2 h3::before, html body .sample2 h3::after,html body .sample2 h4, html body .sample2 h4::before, html body .sample2 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample2 h2 {
font-size: 22px !important;
background-color: #ff937a !important;
font-weight: bold !important;
color: #fff !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
position: relative !important;
display: block !important;
margin-bottom: 2em !important;
}
html body .sample2 h2::after {
content: '' !important;
background-color: #ff937a !important;
width: 100% !important;
height: 3px !important;
position: absolute !important;
bottom: -6px !important;
left: 0 !important;
}
html body .sample2 h3 {
overflow: hidden!important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
margin-bottom: 2em !important;
border-left: 7px solid #ff937a !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
position: relative!important;
background-color: #ff937a26!important;
}
html body .sample2 h3::after {
content: ''!important;
position: absolute!important;
border-left: 20px double #ff937a !important;
height: 100%!important;
top: 0!important;
right: 50px!important;
transform: skew(-20deg)!important;
}
html body .sample2 h4 {
font-size: 22px !important;
font-weight: bold !important;
display: flex!important;
align-items: center!important;
column-gap: 8px!important;
color: #333333!important;
margin-bottom: 2em !important;
padding: 10px !important;
}
html body .sample2 h4::before {
width: 0.8em!important;
height: 0.4em!important;
border-bottom: 4px solid #ff937a!important;
border-left: 4px solid #ff937a!important;
transform: rotate(-45deg) translate(2px, -2px)!important;
content: ''!important;
}

 

公開ボタンをクリックすることで、CSSが反映されます。

⇒ 見出しのサンプルデザイン集をチェック！

 

STEP
投稿画面を開いて「コードエディター」に切り替える

次に WordPress 投稿画面を開きます。

 

画面右上の「︙（オプション）」をクリックし、「コードエディター」を選択してください。

 

※ エディタモードが「ビジュアルエディター」 ⇒ 「コードエディター」に切り替わります。

 

STEP
HTMLコードをコピペする

次の HTMLコードをコピーして、リスト装飾を追加したい場所に貼り付けてください。

HTML コード
<div class="sample2"><h2>H２ 見出しタイトル</h2></div>
<div class="sample2"><h3>H３ 見出しタイトル</h3></div>
<div class="sample2"><h4>H４ 見出しタイトル</h4></div>

⇒ 見出しのサンプルデザイン集をチェック！

STEP
「ビジュアルエディター」に切り替える

もう一度「︙（オプション）」をクリックして「ビジュアルエディター」に切り替えるとコードが適用されます。

 

STEP
見出しタイトルの文言を編集する

最後に「見出しタイトル」の文言を編集すれば完了です。

オリジナル見出しの追加手順は以上になります！

次の章からは、見出しの多彩なデザインを紹介しいきます。

 

見出しセット（h2,h3,h4）デザイン集

ここからは h2, h3, h4 の見出しセットのサンプルデザインを紹介していきます。

コードをコピペするだけで、みなさんのブログにも適用できるので、ぜひ使ってみてください！

 

１．スマートな見出し

カラー：

h2見出しのサンプル

h3見出しのサンプル

H４ 見出しタイトル

✙ タップしてコードを見る
HTML コード
<div class="sample2"><h2>H２ 見出しタイトル</h2></div>
<div class="sample2"><h3>H３ 見出しタイトル</h3></div>
<div class="sample2"><h4><svg class="sample2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,18L16,12L10,6L8.6,7.4L13.2,12L8.6,16.6L10,18Z"></path></svg>H４ 見出しタイトル</h4></div>
CSS コード
html body .sample2 h2, html body .sample2 h2::before, html body .sample2 h2::after,html body .sample2 h3, html body .sample2 h3::before, html body .sample2 h3::after,html body .sample2 h4, html body .sample2 h4::before, html body .sample2 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample2 h2 {
font-size: 22px !important;
background-color: #ff937a !important;
font-weight: bold !important;
color: #fff !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
position: relative !important;
display: block !important;
margin-bottom: 2em !important;
}
html body .sample2 h2::after {
content: '' !important;
background-color: #ff937a !important;
width: 100% !important;
height: 3px !important;
position: absolute !important;
bottom: -6px !important;
left: 0 !important;
}
html body .sample2 h3 {
overflow: hidden!important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
margin-bottom: 2em !important;
border-left: 7px solid #ff937a !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
position: relative!important;
background-color: #ff937a26!important;
}
html body .sample2 h3::after {
content: ''!important;
position: absolute!important;
border-left: 20px double #ff937a !important;
height: 100%!important;
top: 0!important;
right: 50px!important;
transform: skew(-20deg)!important;
}
html body .sample2 h4 svg {
margin-top: -5px;
height: 25px !important;
width: 25px !important;
fill: ;
}
html body .sample2 h4 {
font-size: 22px !important;
font-weight: bold !important;
display: flex!important;
align-items: center!important;
column-gap: 8px!important;
color: #333333!important;
margin-bottom: 2em !important;
}

 

２．シンプルな見出し

カラー１：　カラー２：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample1"><h2>H２ 見出しタイトル</h2></div>
<div class="sample1"><h3>H３ 見出しタイトル</h3></div>
<div class="sample1"><h4>H４ 見出しタイトル</h4></div>
CSS コード
html body .sample1 h2, html body .sample1 h2::before, html body .sample1 h2::after,
html body .sample1 h3, html body .sample1 h3::before, html body .sample1 h3::after,
html body .sample1 h4, html body .sample1 h4::before, html body .sample1 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample1 h2 {f
all: unset !important;
display: block !important;
background: #f1c40f !important;
color: white !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 22px !important;
font-weight: bold !important;
border-radius: 8px !important;
margin-bottom: 2em !important;
}
html body .sample1 h3 {
all: unset !important;
display: block !important;
background: #ffeaa7 !important;
color: #333 !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 22px !important;
font-weight: bold !important;
border-left: 5px solid #f1c40f !important;
margin-bottom: 2em !important;
}
html body .sample1 h4 {
all: unset !important;
display: block !important;
border-bottom: 5px solid #9a825b !important;
border-left: 5px solid #f1c40f !important;
padding: 0.2em 1em calc(0.5em - 6px) !important;
font-size: 22px !important;
font-weight: bold !important;
margin-bottom: 2em !important;
}

 

３．二重線のかっこいい見出し３

カラー：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample3"><h2>H２ 見出しタイトル</h2></div>
<div class="sample3"><h3>H３ 見出しタイトル</h3></div>
<div class="sample3"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample3 h2, html body .sample3 h2::before, html body .sample3 h2::after,
html body .sample3 h3, html body .sample3 h3::before, html body .sample3 h3::after,
html body .sample3 h4, html body .sample3 h4::before, html body .sample3 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample3 h2 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
border-top: 3px double #27ae60 !important;
border-bottom: 3px double #27ae60 !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 2em !important;
background-color: #27ae6017 !important;
}
html body .sample3 h3 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
border-bottom: 2px double #27ae60 !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 2em !important;
}
html body .sample3 h4 {
all: unset !important;
font-weight:bold!important;
font-size: 22px !important;
display: block !important;
margin-bottom: 2em !important;
display: block !important;
position: relative !important;
padding-left: 25px !important;
color: #000 !important;
}
html body .sample3 h4::before {
position: absolute !important;
left: 10px !important;
top: -0.5px !important;
transform: rotate(90deg) !important;
border-bottom: solid 18px #27ae60 !important;
border-top: solid 18px transparent !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}
html body .sample3 h4::after {
position: absolute !important;
left: -3.5px !important;
top: 12.5px !important;
transform: rotate(90deg) !important;
color: white !important;
border-top: solid 5px transparent !important;
border-bottom: solid 5px currentColor !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}

 

４．色が変わるクールな見出し

カラー１：　カラー２：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample4"><h2>H２ 見出しタイトル</h2></div>
<div class="sample4"><h3>H３ 見出しタイトル</h3></div>
<div class="sample4"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample4 h2, html body .sample4 h2::before, html body .sample4 h2::after,
html body .sample4 h3, html body .sample4 h3::before, html body .sample4 h3::after,
html body .sample4 h4, html body .sample4 h4::before, html body .sample4 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample4 h2 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
background: linear-gradient(90deg, #9b59b6, #3498db) !important;
color: white !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
border-radius: 5px !important;
margin-bottom: 2em !important;
}
html body .sample4 h3 {
display: flex !important;
align-items: center !important;
padding: 0.5em 0.5em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
background-color: #f2f2f2 !important;
color: #333333 !important;
font-size: 22px !important;
font-weight: bold !important;
margin-bottom: 2em !important;
}
html body .sample4 h3::before {
display: inline-block !important;
width: 5px !important;
height: 1.5em !important;
margin-right: .5em !important;
background-color: #9b59b6 !important;
content: '' !important;
}
html body .sample4 h4 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
border-bottom: 4px solid #9b59b6 !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
margin-bottom: 2em !important;
}

 

５．シンプルな見出し

カラー：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample5"><h2>H２ 見出しタイトル</h2></div>
<div class="sample5"><h3>H３ 見出しタイトル</h3></div>
<div class="sample5"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample5 h2, html body .sample5 h2::before, html body .sample5 h2::after,
html body .sample5 h3, html body .sample5 h3::before, html body .sample5 h3::after,
html body .sample5 h4, html body .sample5 h4::before, html body .sample5 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample5 h2 {
all: unset !important;
display: block !important;
background: #3c659a !important;
color: white !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 22px !important;
font-weight: bold !important;
border-radius: 8px !important;
margin-bottom: 2em !important;
}
html body .sample5 h3 {
all: unset !important;
display: block !important;
background: #3c659a17 !important;
color: #333 !important;
padding: 0.5em 1em calc(0.5em - 6px) !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 22px !important;
font-weight: bold !important;
border-left: 5px solid #3c659a !important;
margin-bottom: 2em !important;
}
html body .sample5 h4 {
all: unset !important;
font-weight:bold!important;
font-size: 22px !important;
display: block !important;
margin-bottom: 2em !important;
display: block !important;
position: relative !important;
padding-left: 25px !important;
color: #000 !important;
}
html body .sample5 h4::before {
position: absolute !important;
left: 10px !important;
top: -0.5px !important;
transform: rotate(90deg) !important;
border-bottom: solid 18px #3c659a !important;
border-top: solid 18px transparent !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}
html body .sample5 h4::after {
position: absolute !important;
left: -3.5px !important;
top: 12.5px !important;
transform: rotate(90deg) !important;
color: white !important;
border-top: solid 5px transparent !important;
border-bottom: solid 5px currentColor !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}

 

６．アニメーション付きの見出し

カラー：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample6"><h2>H２ 見出しタイトル</h2></div>
<div class="sample6"><h3>H３ 見出しタイトル</h3></div>
<div class="sample6"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample6 h2, html body .sample6 h2::before, html body .sample6 h2::after,
html body .sample6 h3, html body .sample6 h3::before, html body .sample6 h3::after,
html body .sample6 h4, html body .sample6 h4::before, html body .sample6 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample6 h2 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
background: #b23838cc !important;
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
border-radius: 5px !important;
position: relative !important;
overflow: hidden !important;
z-index: 1 !important;
margin-bottom: 2em !important;
color:white!important;
}
html body .sample6 h2:before {
content: "" !important;
position: absolute !important;
left: -10px !important;
top: 0 !important;
width: 5px !important;
height: 100% !important;
background: #b23838 !important;
transition: all 0.3s !important;
z-index: -1 !important;
}
html body .sample6 h2:hover:before {
width: 100% !important;
left: 0 !important;
opacity: 0.1 !important;
}
html body .sample6 h3 {
all: unset !important;
display: block !important;
font-family: sans-serif !important;
font-size: 22px !important;
font-weight: bold !important;
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #ddd !important;
position: relative !important;
margin-bottom: 2em !important;
}
html body .sample6 h3:after {
content: "" !important;
position: absolute !important;
left: 0 !important;
bottom: -2px !important;
width: 30% !important;
height: 2px !important;
background: #b23838cc !important;
transition: all 0.3s !important;
}
html body .sample6 h3:hover:after {
width: 100% !important;
}
html body .sample6 h4 {
all: unset !important;
font-weight:bold!important;
font-size: 22px !important;
display: block !important;
margin-bottom: 2em !important;
display: block !important;
position: relative !important;
padding-left: 25px !important;
color: #000 !important;
}
html body .sample6 h4::before {
position: absolute !important;
left: 10px !important;
top: 0px !important;
transform: rotate(90deg) !important;
border-bottom: solid 18px #b23838cc !important;
border-top: solid 18px transparent !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}
html body .sample6 h4::after {
position: absolute !important;
left: -3.5px !important;
top: 12.5px !important;
transform: rotate(90deg) !important;
color: white !important;
border-top: solid 5px transparent !important;
border-bottom: solid 5px currentColor !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}

 

７．ストライプのカジュアルな見出し

カラー１：　カラー２：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample8"><h2>H２ 見出しタイトル</h2></div>
<div class="sample8"><h3>H３ 見出しタイトル</h3></div>
<div class="sample8"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample8 h2, html body .sample8 h2::before, html body .sample8 h2::after,
html body .sample8 h3, html body .sample8 h3::before, html body .sample8 h3::after,
html body .sample8 h4, html body .sample8 h4::before, html body .sample8 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample8 h2 {
all: unset !important;
display: block !important;
font-size: 22px !important;
font-weight: bold !important;
background: repeating-linear-gradient(-45deg, #ffc8004a, #ffe27a4a 10px, #ffe27a4a 10px, #ffc8004a 20px) !important;
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
color: #6e6e6e !important;
border-radius: 5px !important;
margin-bottom: 2em !important;
}
html body .sample8 h3 {
all: unset !important;
display: block !important;
font-size: 20px !important;
font-weight: bold !important;
color: #6e6e6e !important;
border-bottom: 4px solid !important;
border-image: repeating-linear-gradient(90deg, #ffc8004a, #ffc8004a 10px, #ffe27a4a 10px, #ffe27a4a 20px) 1 !important;
padding: 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 2em !important;
}
html body .sample8 h4 {
all: unset !important;
color: #6e6e6e !important;
font-weight:bold!important;
font-size: 20px !important;
display: block !important;
margin-bottom: 2em !important;
display: block !important;
position: relative !important;
padding-left: 25px !important;
}
html body .sample8 h4::before {
position: absolute !important;
left: 10px !important;
top: -0.5px !important;
transform: rotate(90deg) !important;
border-bottom: solid 18px #ffc800cc !important;
border-top: solid 18px transparent !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}
html body .sample8 h4::after {
position: absolute !important;
left: -3.5px !important;
top: 12.5px !important;
transform: rotate(90deg) !important;
color: white !important;
border-top: solid 5px transparent !important;
border-bottom: solid 5px currentColor !important;
border-left: solid 7px transparent !important;
border-right: solid 7px transparent !important;
}

 

８．和風のかっこいい見出し

カラー：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample9"><h2>H２ 見出しタイトル</h2></div>
<div class="sample9"><h3>H３ 見出しタイトル</h3></div>
<div class="sample9"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample9 h2, html body .sample9 h2::before, html body .sample9 h2::after,
html body .sample9 h3, html body .sample9 h3::before, html body .sample9 h3::after,
html body .sample9 h4, html body .sample9 h4::before, html body .sample9 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample9 h2 {
all: unset !important;
display: block !important;
font-size: 22px !important;
font-weight: bold !important;
color: #b8860b !important;
padding: 5px 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
border: 2px solid #b8860b !important;
box-shadow: inset 0px 0px 8px rgba(0, 0, 0, 0.2) !important;
margin-bottom: 2em !important;
font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
}
html body .sample9 h3 {
all: unset !important;
display: block !important;
font-size: 22px !important;
font-weight: bold !important;
font-family: "Yu Mincho", "Hiragino Mincho ProN", serif !important;
color: #b8860b !important;
border-bottom: 4px double #b8860b !important;
padding: 5px 10px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 2em !important;
}
html body .sample9 h4 {
all: unset !important;
display: block !important;
font-size: 22px !important;
font-weight: bold !important;
font-family: "Yu Mincho", serif !important;
color: #b8860b !important;
padding: 5px 10px !important;
margin-bottom: 2em !important;
}
html body .sample9 h4::before {
content: "❖" !important;
font-size: 22px !important;
color: #b8860b !important;
margin-right: 8px !important;
}

 

９．スマートな見出し

カラー１：　カラー２：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample10"><h2>H２ 見出しタイトル</h2></div>
<div class="sample10"><h3>H３ 見出しタイトル</h3></div>
<div class="sample10"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample10 h2, html body .sample10 h2::before, html body .sample10 h2::after,
html body .sample10 h3, html body .sample10 h3::before, html body .sample10 h3::after,
html body .sample10 h4, html body .sample10 h4::before, html body .sample10 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample10 h2 {
font-size: 22px !important;
display: block!important;
font-weight: bold!important;
padding: 0.5em 1em!important;
padding-top: 10px !important;
padding-bottom: 10px !important;
background-color:#6785ad !important;
color: #fff!important;
overflow: hidden!important;
position: relative!important;
margin-bottom: 2em !important;
}
html body .sample10 h2::after {
content: ''!important;
background-color: #fff!important;
opacity: 0.3!important;
transform: rotate(-65deg)!important;
position: absolute!important;
bottom: -250px!important;
right: -250px!important;
width: 300px!important;
height: 500px!important;
}
html body .sample10 h3 {
all: unset !important;
display: block !important;
border-bottom: 5px solid #353f6e !important;
border-left: 5px solid #6785ad !important;
padding: 5px !important;
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 22px !important;
font-weight: bold !important;
margin-bottom: 2em !important;
}
html body .sample10 h4 {
display: block!important;
font-size: 22px !important;
position: relative!important;
padding: .5em 1.2em!important;
margin-bottom: 2em !important;
}
html body .sample10 h4::before {
display: inline-block!important;
position: absolute!important;
transform: translateY(-50%)!important;
width: 12px!important;
height: 12px!important;
border: 2px solid #353f6e !important;
content: ''!important;
}
html body .sample10 h4::after {
display: inline-block!important;
position: absolute!important;
transform: translateY(-50%)!important;
width: 12px!important;
height: 12px!important;
border: 2px solid #6785ad!important;
content: ''!important;
}
html body .sample10 h4::before {
top: calc(50% - 3px)!important;
left: 0!important;
}
html body .sample10 h4::after {
top: calc(50% + 3px)!important;
left: 5px!important;
}

 

１０．マンガ風の吹き出し見出し

カラー：

h2見出しのサンプル

h3見出しのサンプル

h4見出しのサンプル

✙ タップしてコードを見る
HTML コード
<div class="sample11"><h2>H２ 見出しタイトル</h2></div>
<div class="sample11"><h3>H３ 見出しタイトル</h3></div>
<div class="sample11"><h4>H４ 見出しタイトル</h4></div>
CSSコード

html body .sample11 h2, html body .sample11 h2::before, html body .sample11 h2::after,
html body .sample11 h3, html body .sample11 h3::before, html body .sample11 h3::after,
html body .sample11 h4, html body .sample11 h4::before, html body .sample11 h4::after {
all: initial !important;
content: '' !important;
}
html body .sample11 h2 {
font-size: 22px !important;
margin-bottom: 2em !important;
display: block !important;
font-weight: bold!important;
padding: 0.5em 1em!important;
padding-top: 10px !important;
padding-bottom: 10px !important;
border: 3px solid #4c9ac0!important;
box-shadow: 3px 3px 0 0 #4c9ac0!important;
position: relative!important;
}
html body .sample11 h2::before, html body .sample11 h2::after {
content: ''!important;
height: 0!important;
width: 0!important;
border: solid transparent!important;
position: absolute!important;
left: 30px!important;
}
html body .sample11 h2::before {
border-color: transparent!important;
border-top-color: #4c9ac0!important;
border-right-color: #4c9ac0!important;
border-width: 10px!important;
top: 100%!important;
left: 26px!important;
}
html body .sample11 h2::after {
border-color: transparent!important;
border-top-color: #fff!important;
border-right-color: #fff!important;
border-width: 6.5px!important;
top: 99%!important;
}
html body .sample11 h3 {
font-size: 22px !important;
font-weight: bold!important;
display: block !important;
border-bottom: 3px solid #4c9ac0!important;
padding: 0.3em!important;
padding-top: 10px !important;
padding-bottom: 10px !important;
margin-bottom: 2em !important;
position: relative!important;
}
html body .sample11 h3::before {
content: ''!important;
background-color: #fff!important;
width: 20px!important;
height: 3px!important;
position: absolute!important;
left: 30px!important;
bottom: -3px!important;
}
html body .sample11 h3::after {
content: ''!important;
background-color: #4c9ac0!important;
width: 20px!important;
height: 3px!important;
transform: rotate(50deg)!important;
position: absolute!important;
left: 25px!important;
bottom: -10px!important;
}
html body .sample11 h4 {
font-size: 22px !important;
display: flex!important;
margin-bottom: 2em !important;
align-items: center!important;
column-gap: 8px!important;
color: #333333!important;
}
html body .sample11 h4::before {
width: 0.8em!important;
height: 0.4em!important;
border-bottom: 4px solid #4c9ac0!important;
border-left: 4px solid #4c9ac0!important;
transform: rotate(-45deg) translate(2px, -2px)!important;
content: ''!important;
}

 

デザインを登録して「ワンクリック」で使いまわそう！

「毎回コードをコピペするのが面倒…」そんな時に便利なのが、WordPressの「非同期パターン」機能です！

一度 オリジナルの装飾デザインを登録しておけば、次回からはワンクリックで簡単に呼び出せるようになりますよ。

非同期パターンの利用手順は次の3ステップです。

  1. オリジナルの見出しデザインを作成する
  2. 非同期パターンに登録する
  3. 登録した装飾をワンクリックで呼び出す
STEP
オリジナルの見出しデザインを作成する

まずは、非同期パターンに登録したい見出し装飾を作成します。

 

STEP
非同期パターンに登録する

作成した装飾ブロックを選択し、ツールバーの「︙（オプション）」ボタンをクリックしてください。

メニューが表示されたら「パターンを作成」を選択します。

 

新規パターンの追加画面が表示されたら、以下を設定して「追加」ボタンをクリックしてください。

  • 名称：好きな名前を入力
  • カテゴリー：空白
  • 同期：OFF

これで「見出し装飾」が非同期パターンに登録されました！

 

STEP
登録した装飾をワンクリックで呼び出す

先ほど登録した装飾を呼び出してみましょう。

投稿ページ左上の  ボタンをクリックしてください。

 

「パターン」タブを開き、マイパターンから「STEP２で登録したデザイン装飾」を選択すると、登録したデザイン装飾が挿入されます！

 

お疲れさまでした！これで見出し装飾の登録から適用までの手順は完了です！

この方法で一度登録してしまえば、次回からはボタン一つで簡単に使えますよ。

 

見出しにデザインが反映されない場合

デザインが上手く反映できないときは、主に次の原因が考えられます。

  1. キャッシュが残っている
  2. テーマの影響を受けている

 

キャッシュが残っている

Webブラウザには、ページの表示を速くするために「キャッシュ」と呼ばれる一時的な保存機能があり、１度閲覧したページのデータを「ブラウザ」に保存しておくことで、次回以降のアクセスをスムーズにしています。

しかしこのキャッシュが原因で、ブラウザが古い情報を表示し、CSSなどを更新しても変更が反映されないように見えることがあります。

ということで、一度ブラウザのキャッシュを削除してから画面を更新してみましょう。

なお、キャッシュの削除手順はブラウザによって異なります。「Chrome キャッシュ 削除」「Safari キャッシュクリア」など、ご使用中のブラウザ名と一緒に検索して、詳しい手順を確認してください。

 

テーマの影響を受けている

カスタマイズしたCSSが反映されない原因として最も多いのが、使用しているWordPressテーマのデザインが優先されてしまっていることです。

この問題を解決する方法として次の３つがあげられます。

  • テーマ側で設定されている見出しデザインを無効化する
  • テーマのスタイルに合わせて、自作のCSSを調整する
  • 自作のCSSに合わせて、テーマのデザインを調整する

たとえば「Affinger」のようなテーマでは、管理画面から「H2見出し」のデザインを簡単に無効化できるため、テーマ側の装飾をオフにすると、カスタムデザインを反映できます。

しかし、一部のテーマではデザインの無効化ができない場合も...そんな時は、テーマのCSSに合わせて自分のカスタマイズを調整する必要があります。

とはいえ、この方法はやや上級者向けなので、むずかしい場合は、テーマ側のデザインを自作のCSSに合わせて調整するのもひとつの手でしょう。

いくつかの対処法がありますので、自分にとって一番わかりやすく、扱いやすい方法から試してみてください。

-デザイン

PHP Code Snippets Powered By : XYZScripts.com

Copyright© タカログ , 2025 All Rights Reserved Powered by AFFINGER5.