【コピペOK】SWELL見出しを設定に影響されず自由にカスタマイズする方法

はじめに

SWELLで見出しのカスタマイズをした時にSWELLの見出しデザインか干渉して困ったことがあったため、同じようなことで悩む人が少なくなればいいなーと思い、書いております。

「背景などいらない！早くコードみたい」って思う方は、こちらから！

SWELLは見出しにデフォルトのデザインを適用できる

種類は2種類

デフォルト、セクション用の2種類あります。
ブロックエディタから切り替えが可能で、以下の違いがあります。

• デフォルト：本文中に入れる見出しを想定。（ブログなど） h2〜h4でSWELLのデザインを適用可能。
• セクション用：セクションの見出しを想定。h2でSWELLのデザインを適用可能。

デザインの設定方法

テーマカスタマイザーから設定が可能です。

ブログなど一部にはデフォルトのデザイン、他のページは自由に見出しをデザインしたいケース

見出しはSWELLっぽくないものにしたい

デフォルトのデザインを見ると「SWELL」とわかってしまうため、SWELLっぽくないクライアントのブランドに沿ったデザインにカスタマイズしたいと思うことはよくあると思います。

ブログはデフォルトのデザインを使いたい

ただ、ブログ投稿はユーザーが自由に触る部分なので、ブログについてはこのデフォルトのデザインを有効にし、ユーザーの方で自由にデザインも触れるようにしたい。

私は実際案件を受けて、トップページや固定ページはカスタム見出し、ブログはデフォルトのデザインとしたいというご要望を受けたことがあります。

カスタマイザーでデザインを設定したら、カスタム見出しのデザインが崩れる

その時に、カスタマイザーからデザインを設定したら、「トップページ、固定ページの見出しが崩れた、、」という経験がありとても困りました。

同じ悩みを持つ人の手助けになれば

見出しをSWELLデフォルトのデザインを設定しつつ、自由な見出しにする方法について自分が困ったことがあったので、同じように困る人の手助けになればとこの記事を書いております。

上記のようなことをしたいけど、これまでうまくできず諦めてしまっていたという方がより自由にデザイン・構築できるようになればとも考えております。

どんなデザイン崩れが起こったか

h2に任意のデザインを適用する

h2を任意のデザインにしようとした時に、このデザインが邪魔になるケースがあります。
例えば、以下のようなデザインの見出しにしようとした場合でいくつか見ていきます。

要素セレクタにスタイルを記述した場合

このような要素セレクタh2にCSSを書いたとします。

h2 {
  border-radius: 2em;
  padding-block: 0.5em;
  padding-inline-start: 1em;
  background-color: #0D384C;
  color: #FDFDFD;
}
h2::before {
  margin-inline-end: 0.3em;
  content: "●";
  background-color: #FDFDFD;
  border-radius: 50%;
}

h2に対する擬似要素::beforeで○を作り出し、色を入れて見出しの先頭に置く。というCSSですが、これは実際はこうなります。

画面右のサイドバー部分は綺麗なスタイルが適用されていますが、肝心の投稿部分のh2が崩れてしまっています。
これは、投稿部分についてはSWELLのデフォルトのCSSで以下のようなスタイルが当たっているからです。

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  background: var(--color_htag);
  padding: .75em 1em;
  color: #fff;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: border-box;
  border-top: solid 2px var(--color_htag);
  border-bottom: solid 2px var(--color_htag);
}

デフォルトでは.post_content h2に対してCSSが設定されているため、詳細度が負けてしまいうまくCSSが適用されません。

詳細度を負けないように記述した場合

今度はデフォルトのCSSを上書く形でCSSを記述します。

.post_content h2 {
  border-radius: 2em;
  padding-block: 0.5em;
  padding-inline-start: 1em;
  background-color: #0D384C;
  color: #FDFDFD;
}
.post_content h2::before {
  margin-inline-end: 0.3em;
  content: "●";
  background-color: #FDFDFD;
  border-radius: 50%;
}

この時の画面はこうなります。

サイドバー部分については、今回は.post_content h2と投稿部分のh2と対象を絞ったため、スタイルは適用されておりません。肝心の投稿部分のh2にスタイルは適用されましたが、崩れてしまっています。

この崩れがSWELLでの見出し編集の難しいポイントとなります。

崩れる原因としては、デフォルトのCSSが干渉しているから！です。

.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
  background: var(--color_htag);
  padding: .75em 1em;
  color: #fff;
}
.post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before {
  position: absolute;
  display: block;
  pointer-events: none;
  content: "";
  top: -4px;
  left: 0;
  width: 100%;
  height: calc(100% + 4px);
  box-sizing: border-box;
  border-top: solid 2px var(--color_htag);
  border-bottom: solid 2px var(--color_htag);
}

SWELLで見出しを自由にカスタマイズしようと思った場合、擬似要素にデフォルトでスタイルが適用されているため、打ち消す必要があります。

デフォルトを打ち消す方法

デフォルトの打ち消す方法としては、デフォルトの不要なCSSプロパティを必要な値で上書きすることです。

今回のCSSだとposition: absolute;、display: block;やborderが干渉して、レイアウト崩れを引き起こしています。この3点を修正するCSSを追加するときれいになります。

.post_content h2 {
  border-radius: 2em;
  padding-block: 0.5em;
  padding-inline-start: 1em;
  background-color: #0D384C;
  color: #FDFDFD;
}
.post_content h2::before {
  margin-inline-end: 0.3em;
  content: "●";
  background-color: #FDFDFD;
  border-radius: 50%;
}

/* 以下のCSSを追加 */
.post_content h2::before {
  position: static;
  display: inline;
  border: none;
}
/* 追加ここまで */

SWELLの見出しのデザインはいくつかあり、それぞれでデフォルトのCSSの内容が異なります。

それらに対応した打ち消すCSSをこの記事では紹介します。コピペも可能ですので、ぜひご利用ください。

【コピペ可】デフォルトのCSSを打ち消すCSS

投稿ページ以外のページで、SWELLデフォルトのCSSを打ち消すCSSは以下です。

/* SWELLデフォルトの見出しスタイルをキャンセル */
:where(#body_wrap:not(.single-post)) { // 投稿ページ以外が対象
  /* デフォルト見出しのキャンセル */
  .post_content :is(h2, h3, h4):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) { /* 詳細度 0, 1, 1 */
    padding: 0;
    background-color: transparent;
    background-image: initial;
    color: inherit;
    border: initial;
  }
  .post_content :is(h2, h3, h4):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before { /* 詳細度 0, 1, 2 */
    content: none;
    position: static;
    inset: initial;
    display: initial;
    border: none;
    width: initial;
    height: initial;
    background-color: transparent;
  }
  /* セクション用見出しのキャンセル */
  .post_content h2.wp-block-heading::first-letter { /* 詳細度 0, 2, 2 */
    border: none;
    color: inherit;
    font-size: inherit;
    padding: 0;
  }
  .post_content h2.is-style-section_ttl { /* 詳細度 0, 2, 1 */
    padding: 0;
  }
  .post_content h2.is-style-section_ttl::before, 
  .post_content h2.is-style-section_ttl::after { /* 詳細度 0, 2, 2 */
    content: none;
    position: static;
    display: initial;
    inset: initial;
    width: initial;
    height: initial;
    background-color: transparent
  }
}

追加CSSにコピペで適用できます。コードのボックスの右上に「copy」ボタンがあるので、押下することでコピーが可能です。あとはペーストして貼り付け可能です。

ただ、利用にあたって以下の注意点がございます。

• 利用する場合は、追加CSSの中の一番上に記述する。
• このCSSはSWELLデフォルトのCSSと詳細度は同じにしております。見出しをカスタマイズするには必ずこの詳細度よりも強くCSSを記述してください。

1点目については、CSSはファイルの上から順に適用していくので、このようなキャンセル系のCSSは必ず一番上に記述するようにしてください。2点目については詳細度の強さですが、少し難しい話になってくるので、カスタマイズするときの例のコードも記述しておきます。

.post_content .(見出しのクラス) { //詳細度 0, 2, 0
  /* ここにスタイルを記述 */
}
.post_content .(見出しのクラス)::before { //詳細度 0, 2, 1
  /* ここに擬似要素のスタイルを記述 */
}
.post_content h2.(セクション用見出しのクラス) { //詳細度 0, 2, 1
  /* ここにスタイルを記述 */
}
.post_content h2.(セクション用見出しのクラス)::before { //詳細度 0, 2, 2
  /* ここに擬似要素のスタイルを記述 */
}

クラス名は任意で設定いただき、それを使い形のサンプルとなります。

ぜひご参考ください。