【コピペ10選】CSSでSTORK(ストーク)の見出しデザインをカスタマイズ

スポンサードリンク

みなさんこんにちは♡
かめりさです!!

気づいたらもう8月後半なんですね。一日、一週間、一が月過ぎるのが速すぎて、一生なんてすぐ終わってしまいそうです。。。

悔いの無いように一日を過ごしましょう☺

私はこれからゼミ合宿で奥多摩に行ってきまーす!

ってことで今回は、WordPress有料テーマSTORKの見出しをCSSでカスタマイズする方法をご紹介したいと思います♡

見出しの種類は11種類ご紹介します♡

見出しをカスタマイズする前に

見出しをカスタマイズする前に注意しておいてほしいのは、見出しをデフォルトのままにしておくということです。

デフォルトになっていない場合は、「投稿・固定ぺージ設定」からデフォルトにできます 

画像こちらがストークのデフォルトの見出しです。

コピペする場所

コピペをする場所は、「外観→カスタマイズ→追加CSS」追加CSS何もない新しい欄にコピペします♡
CSSそれでは、カスタマイズできる見出しをご紹介していきます~♡

カスタマイズできる見出しの種類10選

傍線

コチラはシンプルな傍線です。あまりごちゃごちゃするのを好まない人におすすめです。

以下をCSSにコピペしてください^^

☆H2をカスタマイズ

.entry-content h2{
border-bottom: 2px solid 好きなカラーコード;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border-left: transparent !important;
border-bottom: 2px solid;
border-radius: 0 !important;
☆H4をカスタマイズ
.entry-content h4{
border-bottom: 2px solid 好きなカラーコード(ボーダー下);
color: 好きなカラーコード(文字);
}

「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

二重線

ただの傍線だって、二重にすれば目立つものですね  🙂

以下をCSSにコピペしてください^^
☆H2をカスタマイズ

.entry-content h2{
border-bottom: 2px double 好きなカラーコード;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border-left: transparent !important;
border-bottom: 2px double;
border-radius: 0 !important;
}
☆H4をカスタマイズ
.entry-content h4{
border-bottom: 2px double 好きなカラーコード(ボーダー下);
color: お好きなカラーコード(文字);
}
「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

水玉

水玉模様は、ポップで可愛いです♡水玉の大きさだって変えられます!


☆H2をカスタマイズ

.entry-content h2{
border-bottom: 2px dotted 好きなカラーコード;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border-left: transparent !important;
border-bottom: 2px dotted;
border-radius: 0 !important;
}
☆H4をカスタマイズ
.entry-content h4{
border-bottom: 2px dotted 好きなカラーコード(ボーダー下);
color: 好きなカラーコード(文字);
}

・水玉の大きさを変えたいときは「○px」の中の数字を変えてみてください♡

「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

破線


☆H2をカスタマイズ

.entry-content h2{
border-bottom: 2px dashed 好きなカラーコード;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border-left: transparent !important;
border-bottom: 2px dashed;
border-radius: 0 !important;
}
☆H4をカスタマイズ

.entry-content h4{
border-bottom: 2px dashed 好きなカラーコード(ボーダー下);
color: 好きなカラーコード(文字);
}

水玉と同様、破線の大きさを変えたいときは、「○px」の中の数字を変えてみてください♡

「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

上下線

線が上下に入っているだけで、シンプルなのに目立つようになります。


☆H2をカスタマイズ

.entry-content h2{
border-top: 2px solid 好きなカラーコード(ボーダー上);
border-bottom: 2px solid 好きなカラーコード(ボーダー下);
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border-top: 2px solid;
border-left: transparent !important;
border-bottom: 2px solid;
border-radius: 0 !important;
}
☆H4をカスタマイズ
.entry-content h4{
border-top: 2px solid 好きなカラーコード(ボーダー上);
border-bottom: 2px solid 好きなカラーコード(ボーダー下);
color: 好きなカラーコード(文字);
}

「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

囲い(四角)


☆H2をカスタマイズ

.entry-content h2{
border: 2px solid 好きなカラーコード(囲み枠);
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border: 2px solid;
border-radius: 0 !important;
}
☆H4をカスタマイズ
.entry-content h4{
border: 2px solid 好きなカラーコード(囲み枠);
color: 好きなカラーコード(文字);
}
「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

二重囲い(四角)


☆H2をカスタマイズ

.entry-content h2{
border: 2px 1double 好きなカラーコード(囲み枠);
border-radius: 0 !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border: 2px double;
border-radius: 0 !important;
}
☆H4をカスタマイズ
.entry-content h4{
border: 2px double 好きなカラーコード(囲み枠);
color: 好きなカラーコード(文字);
}
「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

囲い(丸)


☆H2をカスタマイズ

.entry-content h2{
border: 2px solid 好きなカラーコード(囲み枠);
border-radius: 20px !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border: 2px solid;
border-radius: 20px !important;
}
☆H4をカスタマイズ
.entry-content h4{
padding: 5px;
border: 2px double 好きなカラーコード(囲み枠);
border-radius: 20px;
color: 好きなカラーコード(文字);
}
「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

二重囲い(丸)


☆H2をカスタマイズ

.entry-content h2{
border: 2px double 好きなカラーコード(囲み枠);
border-radius: 20px !important;
background: transparent !important;
box-shadow: none;
}
☆H3をカスタマイズ
.entry-content h3{
border: 2px double;
border-radius: 20px !important;
}
☆H4をカスタマイズ
.entry-content h4{
padding: 5px;
border: 2px double 好きなカラーコード(囲み枠);
border-radius: 20px;
color: 好きなカラーコード(文字);
}
「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

テープ風


☆H2をカスタマイズ

.entry-content h2 {
margin: 6px;
border-radius: 0 !important;
box-shadow: 0 0 0 1px #cccccc;
transform: rotate(-1deg);
}
☆H3をカスタマイズ
.entry-content h3 {
margin: 6px;
border-left: transparent !important;
background: 好きなカラーコード(背景);
box-shadow: 0 0 0 1px #cccccc;
transform: rotate(-1deg);
}
☆H4をカスタマイズ
.entry-content h3 {
margin: 6px;
border-left: transparent !important;
background: 好きなカラーコード(背景);
color: 好きなカラーコード(文字);
box-shadow: 0 0 0 1px #cccccc;
transform: rotate(-1deg);
}

「カラーコード」で検索するとたくさんカラーコードが出てくるのできちんとシャープを付けて例:「#000000」好きな色のコードを入力してください 😎

上記をコピペすると、外観→カスタマイズ→サイトカラー設定の「記事ページ見出し(H2)文字色」で設定した文字の色が反映されています。

文字の色をCSS変えたいときは、{}内に color: お好きなカラーコード !important; を追加してください♡

 


いかがでしたでしょうか?

CSSにコードをコピペするふだけで、簡単に見出しのデザインが変わります!!
見出しが変わるだけでブ、ブログの雰囲気がガラッと変わりますよね♡

カスタマイズをして、見やすいブログにしてきましょう 😎

スポンサードリンク

この記事をシェア♡

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です