お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

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

投稿日:2017年8月21日 更新日:



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

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

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

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

ストークのオリジナルの見出し(h2~h3)はこんな感じ。

[aside type="boader"]ストークのオリジナルの見出し[/aside]

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

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

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

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

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

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

シンプルな下線の見出し

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

シンプルなh2見出し(下線)

見出し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;を追加してください。

シンプルなh3見出し(下線)

見出し3(h3)用のコードを表示

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

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

シンプルなh4見出し(下線)

見出し4(h4)用のコードを表示

[box class="blue_box"]CSS
.entry-content h4{
border-bottom: 2px solid お好きなカラーコード(ボーダー下);
color: お好きなカラーコード(文字);
}
[/box]

二重線の見出し

シンプルな見出し(二重線)

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

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

破線の見出し

シンプルな見出し(破線)

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

ドットの見出し

シンプルな見出し(ドット)

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

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

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

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

シンプルなh2見出し(上下線)

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

シンプルなh3見出し(上下線)

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

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

シンプルなh4見出し(上下線)

見出し4(h4)用のコードを表示

[box class="blue_box"]CSS
.entry-content h4{
border-top: 2px solid お好きなカラーコード(ボーダー上);
border-bottom: 2px solid お好きなカラーコード(ボーダー下);
color: お好きなカラーコード(文字);
}
[/box]

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

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

シンプルなh2見出し(囲み枠)

見出し2(h2)用のコードを表示

[box class="blue_box"]CSS
.entry-content h2{
border: 2px solid お好きなカラーコード(囲み枠);
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
[/box]文字の色は外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」が反映されています。CSSで変えたい場合は{}内にcolor: お好きなカラーコード !important;を追加してください。

シンプルなh3見出し(囲み枠)

見出し3(h3)用のコードを表示

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

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

シンプルなh4見出し(囲み枠)

見出し4(h4)用のコードを表示

[box class="blue_box"]CSS
.entry-content h4{
border: 2px solid お好きなカラーコード(囲み枠);
color: お好きなカラーコード(文字);
}
[/box]

シンプルな囲み枠(角丸)の見出し

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

シンプルなh2見出し(囲み枠角丸)

見出し2(h2)用のコードを表示

[box class="blue_box"]CSS
.entry-content h2{
border: 2px solid お好きなカラーコード(囲み枠);
border-radius: 20px !important;
background: transparent !important;
box-shadow: none;
}
[/box]文字の色は外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」が反映されています。CSSで変えたい場合は{}内にcolor: お好きなカラーコード !important;を追加してください。

シンプルなh3見出し(囲み枠角丸)

見出し3(h3)用のコードを表示

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

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

シンプルなh4見出し(囲み枠角丸)

見出し4(h4)用のコードを表示

[box class="blue_box"]CSS
.entry-content h4{
padding: 5px;
border: 2px solid お好きなカラーコード(囲み枠);
border-radius: 20px;
color: お好きなカラーコード(文字);
}
[/box]

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

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

シンプルなh2見出し(アイコンフォント)

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

見出し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です!

FontAwesomeの使い方

シンプルなh3見出し(アイコンフォント)

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

見出し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です!

FontAwesomeの使い方

シンプルなh4見出し(アイコンフォント)

見出し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です!

FontAwesomeの使い方

矢印の見出し

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

矢印h2見出し

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

矢印h3見出し

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

矢印h4見出し

見出し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]

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

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

グラデーションh2見出し

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

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

グラデーションh3見出し

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

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

グラデーションh4見出し

見出し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]カラーコードの①〜④には同じ色を入れてください。

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

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

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

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

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

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

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

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

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

見出し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]カラーコードの①〜④には同じ色を入れてください。

テープ風の見出し

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

テープ風h2見出し

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

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

テープ風h3見出し

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

テープ風h4見出し

見出し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]

ボーダーの見出し

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

ボーダーh2見出し

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

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

ボーダーh3見出し

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

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

ボーダーh4見出し

見出し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;
}
[/box]カラーコードの①〜④には同じ色を入れてください。

おわりに:コピペで簡単にSTORK(ストーク)の見出しを変更できる!

コピペで簡単!STORK(ストーク)のフォントを変更」に引き続き、今回は見出しのカスタマイズをご紹介しました。だいぶ雰囲気が変わってきたのではないでしょうか?

まわりと被りやすいストークですが、なんとか差別化できるように私も日々研究中です。

あなたのブログが素敵になりますように。ぱるでした!

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.