ツイッターはこちら

THE SONICの見出しのデザインの変更方法【WordPressテーマ】

3 min
フルショ

フルショ

リリースされてすぐにTHE SONICを使い始めました。

WordPressテーマのTHE SONICの見出しのデザインの変更方法を知りたいなあ…。テーマに標準搭載されているデザインもいいけど、自分オリジナルのデザインにも変えてみたいなあ…。

THE SONICの<br>見出しのデザインを変更したい人

THE SONICの
見出しのデザインを変更したい人

フルショ

フルショ

僕は標準搭載のデザインの見出しを使ってますけど、オリジナルのデザインへの変更方法も紹介しますね。

この記事を読む価値

THE SONICの見出しのデザインを自由自在に変更できるようになる。

THE SONICに標準搭載されている見出しのデザイン

こちらがTHE SONICに標準搭載されている見出しのデザインです。

この6つのデザインをh2〜h4に自由に設定することができます。

設定の変更方法を教えて下さい

THE SONICの<br>見出しのデザインを変更したい人

THE SONICの
見出しのデザインを変更したい人

THE SONIC標準搭載の見出しのデザイン変更方法

  1. STEP

    ダッシュボードで、外観→カスタマイズの順で選択

  2. STEP

    記事設定を選択

  3. STEP

    デザイン一括設定を選択

  4. STEP

    h2 見出し2のデザインh3 見出し3のデザインh4 見出し4のデザインでデザイン1〜6で好みのデザインを選択

標準搭載以外のデザインへの変更方法も教えて下さい

THE SONICの<br>見出しのデザインを変更したい人

THE SONICの
見出しのデザインを変更したい人

自分の好みの見出しデザインへの変更方法

ここまで説明したように、ボタン一つで見出しのデザインを設定できるという点ではTHE SONICは魅力的なのです。

一方で、もっと他のいろんな見出しのデザインを試してみたいという方からすると、物足りないかもしれません。

ですが、THE SONICはCSSをうまくいじらないと、標準搭載のデザイン以外に変更できないようになっています。

なので、CSSなんてわからないよー。という方にもわかりやすく変更方法を解説しますね。

  1. STEP

    ダッシュボードで、外観→カスタマイズの順で選択

  2. STEP

    追加CSSを選択

  3. STEP

    以下のコードを画像の赤枠にコピペ

    h2, h3, h4{
    color: #000 !important;
    background-color:#fff !important;
    padding: 0 !important;
    border: 0 !important;
     border-top:solid #fff !important;
    }
    h2:before,h3:before,h4:before ,h5:before ,h6:before {
    background-color:#fff !important;
    border: 0 !important;
    }

    デザインがリセットされます。

  4. STEP

    自分の好みの見出しデザインのCSSをSTEP3のコードの下に追加

    今回はサルワカさんの見出しデザイン一覧のCSSを拝借させていただき、説明します。

    例えば以下のデザインに変更したいとします。

    コードを表示を選択

    h1 {
    position: relative;
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
    }
    h1:after {
    position: absolute;
    content: ”;
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #a8d4ff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    コードをコピーし、追加CSSでSTEP3のコードの下にペースト

    h1となっている部分を自分が変えたいh2〜h4に変更(今回はh2を例に説明)

    h2 {
    position: relative;
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: #454545;
    }
    h2:after {
    position: absolute;
    content: ”;
    left: -7px;
    top: -7px;
    border-width: 0 0 15px 15px;
    border-style: solid;
    border-color: #fff #fff #a8d4ff;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    }

    しかし、この時点では見出しのデザインに変化はありません。

    なので、一つ一つのコードの「;」の前に「!important」を書き込む。(半角スペースを!importantの前に入れる。)

    h2 {
    position: relative !important;
    background: #dfefff !important;
    box-shadow: 0px 0px 0px 5px #dfefff !important;
    border: dashed 2px white !important;
    padding: 0.2em 0.5em !important;
    color: #454545 !important;
    }
    h2:after {
    position: absolute !important;
    content: ” !important;
    left: -7px !important;
    top: -7px !important;
    border-width: 0 0 15px 15px !important;
    border-style: solid !important;
    border-color: #fff #fff #a8d4ff !important;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) !important;
    }

    完成

    h3、h4も同様にすればデザインを変えられます。

一度では理解が難しいと思いますので、もう一度この記事を読んで、自分オリジナルのTHE SONICにアレンジしてみてくださいね。

関連記事