【WordPress】有料テーマの見出しみたいにカスタマイズしよう！

WordPress

2019.12.27 2019.12.04

WordPressユーザーの皆さん、こんにちは。
自称WordPressデザインカスタマイザーのYoshitakaです。

今回はWordPressの有料テーマで使われている見出しを使えるようにするカスタマイズ方法をご紹介！

動作確認はCocoonのみですので、ご承知ください。

もし、この中に真似したい・使用したい有料テーマの見出しが存在しない！という方はコメントまたはメールください。

SWELL風見出し Part 1
1. 完成イメージ
2. カスタマイズ方法
SWELL風見出し Part 2
1. 完成イメージ
2. カスタマイズ方法
SANGO風見出し
Cocoonカスタマイズをしています

SWELL風見出し Part 1

完成イメージ

カスタマイズ方法

以下のコードを外観 > テーマエディター > style.css(子テーマ)」もしくは、「外観 > カスタマイズ > 追加CSS」のどちらかにコピー & ペーストしてください。

STEP1 : CSSをコピー & ペースト

.article h2,
.article h3,
.article h4 {
    font-weight: 700;
}

.article h2 {
    margin: 4em -16px 2em;
    padding: .5em 1em;
    font-size: 1.4em;
    border-right: 0;
    border-left: 7px solid #000000; /* 左側の色を変えたい場合はここを変更 */
    border-top: 0;
    border-bottom: 0;
    position: relative;
    line-height: 1.4;
}
.article h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #000000 0%, #000000 29.3%, rgba(150,150,150,.2) 29.3%, rgba(150,150,150,.2) 100%); 
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
}
.article h3 {
    margin: 3em -8px 2em;
    padding: 0 .5em .5em;
    font-size: 1.3em;
    position: relative;
    line-height: 1.4;
    border: 0;
}

@media screen and (max-width: 480px) {
    .article h2 {
        margin: 4em -4vw 2em;
        font-size: 1.2em;
    }
    .article h3 {
        position: relative;
        margin: 3em -2vw 2em;
        font-size: 1.1em;
    } 
}

SWELL風見出し Part 2

完成イメージ

カスタマイズ方法

.article h2,
.article h3,
.article h4 {
    font-weight: 700;
}

.article h2 {
    background-color: #e589a2;
    padding: .75em 1em;
    color: #fff;
    margin: 4em -16px 2em;
    font-size: 1.4em;
    line-height: 1.4;
}
.article h3::before {
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #e589a2 0%, #e589a2 20%, rgba(255,206,243,0.2) 90%, rgba(255,206,243,0.2) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
}
.article h3 {
    margin: 3em -8px 2em;
    padding: 0 .5em .5em;
    font-size: 1.3em;
    position: relative;
    line-height: 1.4;
    border: 0;
}

@media screen and (max-width: 480px) {
    .article h2 {
        position: relative;
        z-index: 1;
        margin: 4em -4vw 2em;
        font-size: 1.2em;
    }
    .article h3 {
        position: relative;
        margin: 3em -2vw 2em;
        font-size: 1.1em;
    } 
}