• Colorway Wordpres見出しスタイルの変更カスタマイズ方法

    Colorway (Wordpresテーマ)見出しがシンプル過ぎる

    ↑h4部分の見出し

    見出しを変える方法

    私が使っているWordpresのデザインテーマ、「Colorway」。日本人でも使っている方が少ないようで自力でカスタマイズしながら使っています。今回変更したのが見出し部分です。h1 、h2、h3は、シンプルなままで良いのですが、記事を書いてもh4 、h5、 h6 がとても地味。Colorwayには、子テーマを作成しているもののスタイルシートは、子テーマにも元のテーマにもありどこをいじったら良いのか分からず長い間悩んでいました。子テーマは、親テーマのスタイルシートを反映させるようなので子テーマに必要なCSSを書き足せばカスタマイズできるのではないかと思いためしてみることにしました。親テーマのスタイルシートを確認したら文字サイズが変えてあるだけで超シンプルでした。

    子テーマのスタイルシートにh1 h2 h3 h4 h5 h6 をそのままコピペし貼り付けてサイズ部分の数字を大きくしました。すると反映されていたのでこの部分を書き換えると見出しのデザインが変わることがわかりました。手順としては、親テーマのスタイルシートからh1 などが記載されている部分を子テーマのスタイルシートにコピペする、子テーマのスタイルシート部分を書き換えれば反映されるのだと思います。親テーマのスタイルシートは、実にシンプル・・これを赤い文字のように書き換えました。
    h1 {font-size: 26px;
    }
    h2 {font-size: 24px;
    }
    h3 {font-size: 22px;
    }
    h4 {font-size: 20px;
    }
    h5 { font-size: 16px;
    }
    h6 { font-size: 14px;
    }

    Colorway h1 h2 h3 h4 h5 h6の見出しを変える方法

    ↑がh5見出しです。

    チャイルドテーマに直接スタイルシートを記入すればOK

    ↑↑部分がh6見出し

    こちらがカスタマイズ前の画像です↓

    coloway見出しをカスタマイズ

    以下のように書き換えました。

    h1 {font-size: 26px;
    }
    h2 {font-size: 24px;
    }
    h3 {font-size: 22px;
    }
    h4 {

    padding-bottom: .5em;
    border-bottom: 1px solid #ccc;
    }
    h4:first-letter {
    margin-right: .1em;
    font-size: 1.5em;
    }
    h5 {position: relative;
    padding: .5em .75em;
    background-color: #f0f0f0;
    border-radius: 6px;
    }
    h5::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: ”;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-top: 15px solid #f0f0f0;
    }
    h6 {position: relative;
    padding: .5em .75em;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    }
    h6::before,
    h6::after {
    position: absolute;
    top: 100%;
    left: 30px;
    content: ”;
    height: 0;
    width: 0;
    border: 10px solid transparent;
    }
    h6::before {
    border-top: 15px solid #ccc;
    }
    h6::after {
    margin-top: -2px;
    border-top: 15px solid #fff;}

     

    カスタマイズした後の画像です。

    見出しカスタマイズ

    カスタマイズしてもシンプルなデザインなので代わり映えしないかもしれませんが自分では、大満足です。

コメントを残す