【SWELL】見出しデザインをCSSでカスタマイズする方法

WordPressテーマ「SWELL」の見出しデザインをCSSでカスタマイズする方法を紹介します。

SWELLにはデフォルトでも数種類の見出しデザインが備わっていますが、デフォルトにはない見出しデザインにしたい方は参考までに。

今回はサルワカさんの「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」を参考に、リボンのような見出し装飾をしてみました。

後述するサイトを参照すれば好みのデザインにできるので、ぜひお試しください。

目次

【SWELL】見出しデザインをCSSでカスタマイズする方法

追加CSSで見出しデザインをカスタマイズする方法は2ステップです。

  1. 見出しデザインを「装飾なし」に変更する
  2. CSSを追記する

ステップ1:見出しデザインを「装飾なし」に設定する

管理画面から【外観】▶︎【カスタマイズ】▶︎【投稿・固定ページ】▶︎【コンテンツのデザイン】にて設定可能です。

CSSを追記した際、装飾デザインが崩れる可能性があるので該当する見出しを「装飾なし」に設定しておきます。(今回はh2見出しを装飾したいので、見出し2のデザインを「装飾なし」)に設定しました)

ステップ2:コピペしたCSSを追記する

あとは、コードをSWELL子テーマのスタイルシートに貼り付ければOKです。

下記コードは、「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」で紹介されているコードを一部改変したものです。

/*h2見出し(リボン)*/
.post_content h2 {
  position: relative;
  padding: 0.5em;
  padding-left:1em;
  background: var(--color_htag);
  color: white;
}
.post_content h2::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

変更箇所は下記のとおり。

  • h1 → .post_content h2 ▶︎ 変更したい見出しを指定する(h3を指定したければ .post_content h3)
  • #a6d3c8 →var(–color_htag) ▶︎ 見出しの背景色をSWELLで設定しているメインカラーに変更

あと、個人的にリボンの左端と文字の間が少し詰まっていたのが気になったので、リボン左端の余白を広くしました(padding-left:1em)

見出しに使えるCSS(コピペOK)が掲載されているサイト

最後に、コードの参考になるサイトリンクをいくつか貼っておきます。

サルワカ | サルでも分かる図解説明マガジン
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
あわせて読みたい
見出しをお洒落に装飾するCSSを紹介 - アイデアハッカー 前回の記事がそこそこ評判良かったので、見出しのデザイン例もいくつか作ってみました。 前回の記事はこちら。 リンクテキストをお洒落に装飾するCSSを紹介 今回...
あわせて読みたい
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 - NxWorld画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。

見出しデザインの装飾は、CSSをほとんどそのままコピペするだけでOKだと思いますので、ぜひ試してみてください.

記事は以上になります。

最後まで読んでいただき、ありがとうございました^ ^

Erinaの画像
Erina
サイト運営者
25歳・MR | 私大薬卒▶︎外資製薬MR▶︎常に人生の分かれ道にいます。薬の専門家でwebデザイン勉強中。シンプル好きなゆるい人。

コメント

コメントする

CAPTCHA


目次
閉じる