【コピペOK】STORK(ストーク)の見出しカスタマイズ！【13種類】

有料のWordPressテーマ「STORK（ストーク）」を導入したあなた！「見出し」をカスタマイズをしてまわりと差別化してみませんか？

今回は【コピペOKのh2～h4までの見出しのカスタマイズ】をご紹介します♪

手順通りに進めていけば簡単に変えられます。一緒に見ていきましょう！

コピペで簡単！STORK(ストーク)の見出しをカスタマイズ

ストークのオリジナルの見出し（h2～h3）はこんな感じ。

[aside type="boader"][/aside]

これを自分の好みの見出しにカスタマイズしていきます。外観→カスタマイズ内の「投稿・固定ページ設定」で見出しのデザインをデフォルトにしておいてくださいね！

これから紹介するコードをコピペするだけでOKです。

コピペ先は「親テーマ/子テーマのスタイルシート(外観→テーマの編集)」か「追加CSS(外観→カスタマイズ)」からお好みでお選びください♪

子テーマについては「STORK（ストーク）で子テーマを導入する方法」で詳しく説明してあります。

WordPressでCSSを追加する3つの方法と各メリット・デメリット

STORK(ストーク)の見出し10選

シンプルな下線の見出し

当ブログでは見出し3で使っています。使いやすくてオススメです。主張しすぎない見出しを求めている人にはぴったり。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

border-bottom: 2px solid お好きなカラーコード(ボーダー下);

border-radius: 0 !important;

background: transparent !important;

box-shadow: none;

}

[/box]文字の色は外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」が反映されています。CSSで変えたい場合は{}内にcolor: お好きなカラーコード !important;を追加してください。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

border-left: transparent !important;

border-bottom: 2px solid;

border-radius: 0 !important;

}

ボーダーの色は同様に「記事ページ見出し(H2)背景」が反映されています。CSSで変えたい場合はsolidの後にお好きなカラーコード !importantを追加してください。

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

border-bottom: 2px solid お好きなカラーコード(ボーダー下);

color: お好きなカラーコード(文字);

}

[/box]

二重線の見出し

シンプルな下線のコードの中のsolidをdoubleに変更してください。

※太さ2pxを3px以上に変更してください。サンプルは5pxです。

破線の見出し

シンプルな下線のコードの中のsolidをdashedに変更してください。

ドットの見出し

シンプルな下線のコードの中のsolidをdottedに変更してください。

太さ2pxの数字を大きくするとドットが大きくなります。サンプルは10pxです。

シンプルな上下線の見出し

境界がしっかりしているので、これだけシンプルでも目立ちます。一時期は当ブログでもこの見出しを使っていました♪

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

border-top: 2px solid お好きなカラーコード(ボーダー上);

border-bottom: 2px solid お好きなカラーコード(ボーダー下);

border-radius: 0 !important;

background: transparent !important;

box-shadow: none;

}

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

border-top: 2px solid;

border-left: transparent !important;

border-bottom: 2px solid;

border-radius: 0 !important;

}

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

border-top: 2px solid お好きなカラーコード(ボーダー上);

border-bottom: 2px solid お好きなカラーコード(ボーダー下);

color: お好きなカラーコード(文字);

}

[/box]

シンプルな囲み枠の見出し

上下線よりもさらに目立つようになりました。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

border: 2px solid お好きなカラーコード(囲み枠);

border-radius: 0 !important;

background: transparent !important;

box-shadow: none;

}

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

border: 2px solid;

border-radius: 0 !important;

}

枠の色は同様に「記事ページ見出し(H2)背景」が反映されています。CSSで変えたい場合はsolidの後にお好きなカラーコード !importantを追加してください。

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

border: 2px solid お好きなカラーコード(囲み枠);

color: お好きなカラーコード(文字);

}

[/box]

シンプルな囲み枠（角丸）の見出し

囲み枠の角を丸くしました。柔らかい印象を与えられる見出しです。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

border: 2px solid お好きなカラーコード(囲み枠);

border-radius: 20px !important;

background: transparent !important;

box-shadow: none;

}

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

border: 2px solid;

border-radius: 20px !important;

}

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

padding: 5px;

border: 2px solid お好きなカラーコード(囲み枠);

border-radius: 20px;

color: お好きなカラーコード(文字);

}

[/box]

シンプルなワンポイントの見出し

見出しの文字前にアイコンフォントを表示させます。シンプルな下線などと組み合わせても可愛いです。その場合は被っているコードは下線に合わせてこちらを削除してください。

シンプルな下線と組み合わせてみました。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

background: transparent !important;

border-radius: 0 !important;

box-shadow: none;

}

.entry-content h2:before{

margin-right:15px;

color: お好きなカラーコード(アイコン);

font-family:"FontAwesome";

content:"\f046";

}

[/box]文字の色は外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」が反映されています。CSSで変えたい場合はただのh2の{}内にcolor: お好きなカラーコード !important;を追加してください。

アイコンフォントを変更したい場合は、Font Awesomeにいき下記の画像を参考にして設定してみてください。青文字の部分を変えればOKです！

シンプルな下線のドットと組み合わせてみました。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

border-left: transparent !important;

border-radius: 0 !important;

}

.entry-content h3:before{

margin-right:15px;

color: お好きなカラーコード(アイコン);

font-family:"FontAwesome";

content:"\f046";

}

[/box]文字の色は外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」が反映されています。CSSで変えたい場合はただのh3の{}内にcolor: お好きなカラーコード !important;を追加してください。

アイコンフォントを変更したい場合は、Font Awesomeにいき下記の画像を参考にして設定してみてください。青文字の部分を変えればOKです！

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

color: お好きなカラーコード(文字);

}

.entry-content h4:before{

margin-right:15px;

color: お好きなカラーコード(アイコン);

font-family:"FontAwesome";

content:"\f046";

}

[/box]アイコンフォントを変更したい場合は、Font Awesomeにいき下記の画像を参考にして設定してみてください。青文字の部分を変えればOKです！

矢印の見出し

左から伸びた矢印です。シンプルだけどおしゃれな感じ。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2 {

position: relative;

background: transparent !important;

border-radius: 0 !important;

padding-left: 25px;

box-shadow: none;

}

.entry-content h2:before {

position: absolute;

content: '';

bottom: -3px;

left: 0;

border-left: solid 15px transparent;

border-bottom: solid 15px お好きなカラーコード(矢印);

}

.entry-content h2:after {

position: absolute;

content: '';

bottom: -3px;

left: 10px;

width: 100%;

border-bottom: solid 3px お好きなカラーコード(矢印);

}

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3 {

position: relative;

border-left: transparent !important;

border-radius: 0 !important;

padding-left: 25px;

box-shadow: none;

}

.entry-content h3:before {

position: absolute;

content: '';

bottom: -3px;

left: 0;

border-left: solid 15px transparent;

border-bottom: solid 15px お好きなカラーコード(矢印);

}

.entry-content h3:after {

position: absolute;

content: '';

bottom: -3px;

left: 10px;

width: 100%;

border-bottom: solid 3px お好きなカラーコード(矢印);

}

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4 {

position: relative;

padding-left: 25px;

color: お好きなカラーコード(文字);

box-shadow: none;

}

.entry-content h4:before {

position: absolute;

content: '';

bottom: -3px;

left: 0;

border-left: solid 15px transparent;

border-bottom: solid 15px お好きなカラーコード(矢印);

}

.entry-content h4:after {

position: absolute;

content: '';

bottom: -3px;

left: 10px;

width: 100%;

border-bottom: solid 3px お好きなカラーコード(矢印);

}

[/box]

グラデーション背景の見出し

色の組み合わせによってかなり雰囲気が変わります。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2 {

background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④) !important;

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④)) !important;

}

カラーコードの①〜④には同じ色を入れてください。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3 {

border-left: transparent !important;

background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④);

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④));

}

カラーコードの①〜④には同じ色を入れてください。

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4 {

background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④);

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④));

color: お好きなカラーコード(文字);

}

[/box]カラーコードの①〜④には同じ色を入れてください。

グラデーション下線の見出し

「背景全面はちょっと主張が激しいな」って思う人にはこちらがおすすめです。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2 {

position: relative;

background: transparent !important;

box-shadow: none;

}

.entry-content h2:before {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

}

.entry-content h2:before {

height: 5px;

background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④) !important;

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④)) !important;

}

カラーコードの①〜④には同じ色を入れてください。サンプルのレインボーは左から#ff6e40・#b2ff59・#448aff・#ff4081です。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3 {

position: relative;

padding-bottom: 6px;

border-left: transparent !important;

}

.entry-content h3:before {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 100%;

}

.entry-content h3:before {

height: 5px;

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④));

}

カラーコードの①〜④には同じ色を入れてください。

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2 {

background: -moz-linear-gradient(top left, お好きなカラーコード①, お好きなカラーコード② 40%, お好きなカラーコード③ 60%, お好きなカラーコード④);

background: -webkit-gradient(linear, left top, right bottom, from(お好きなカラーコード①), color-stop(40%, お好きなカラーコード②), color-stop(60%, お好きなカラーコード③), to(お好きなカラーコード④));

color: お好きなカラーコード(文字);

}

[/box]カラーコードの①〜④には同じ色を入れてください。

テープ風の見出し

カラーテープでペタっと貼ったような見出しです。可愛いですよ。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2 {

margin: 6px;

border-radius: 0 !important;

box-shadow: 0 0 0 1px #cccccc;

transform: rotate(-1deg);

}

背景色も同様に「記事ページ見出し(H2)背景」が反映されています。CSSで変えたい場合は{}内にbackground: お好きなカラーコード !important;を追加してください。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3 {

margin: 6px;

border-left: transparent !important;

background: お好きなカラーコード(背景);

box-shadow: 0 0 0 1px #cccccc;

transform: rotate(-1deg);

}

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3 {

margin: 6px;

border-left: transparent !important;

background: お好きなカラーコード(背景);

color: お好きなカラーコード(文字);

box-shadow: 0 0 0 1px #cccccc;

transform: rotate(-1deg);

}

[/box]

ボーダーの見出し

見出しの文字の下にボーダーを引いてみました。

見出し2（h2）用のコードを表示

[box class="blue_box"]CSS

.entry-content h2{

position: relative;

background: transparent !important;

box-shadow: none;

}

.entry-content h2:after{

position: absolute;

content: '';

left: 0;

right: 0;

bottom: 0;

height: 10px;

background: repeating-linear-gradient(-45deg, お好きなカラーコード①, お好きなカラーコード① 5px, お好きなカラーコード② 0, お好きなカラーコード② 10px);

z-index: 1;

}

カラーコードの①〜④には同じ色を入れてください。

見出し3（h3）用のコードを表示

[box class="blue_box"]CSS

.entry-content h3{

position: relative;

border-left: transparent !important;

}

.entry-content h3:after{

position: absolute;

content: '';

left: 0;

right: 0;

bottom: 0;

height: 10px;

background: repeating-linear-gradient(-45deg, お好きなカラーコード①, お好きなカラーコード① 5px, お好きなカラーコード② 0, お好きなカラーコード② 10px);

z-index: 1;

}

カラーコードの①〜④には同じ色を入れてください。

見出し4（h4）用のコードを表示

[box class="blue_box"]CSS

.entry-content h4{

position: relative;

color: お好きなカラーコード(文字);

}

.entry-content h4:after{

position: absolute;

content: '';

left: 0;

right: 0;

bottom: -8px;

height: 10px;

background: repeating-linear-gradient(-45deg, お好きなカラーコード①, お好きなカラーコード① 5px, お好きなカラーコード② 0, お好きなカラーコード② 10px);

z-index: 1;

}