SWELLテーマのガチレビューはこちら記事を読む

SWELLの見出しをCSSでサルワカデザインに【SANGO風でおしゃれ】

sponsored link

読者の悩み

SWELLユーザーです。

SWELLのWordPress管理画面から、外観→カスタマイズ→投稿・固定ページ→見出しで、H2〜H4までデザインがワンタッチで出来るのは素晴らしいです。

SWELLユーザー増えてきて、①デザインがかぶるのと、②飽きてきたという2点が原因で、CSS使ってサルワカデザインにしてみたいんです。

SWELLはデフォルトでも素晴らしいですが、CSSなどのカスタマイズ記事が少なめなので、もしできるなら解説して欲しいです。

あいうえおLIFE

こんにちは!あいうえおLIFE(@pledge17uchs)です。

今日は上記のお悩みを解決します。

SWELLの見出しワンタッチデザイン
Keynote画像
SWELLの見出しはワンタッチ

上記の画像のとおり、「管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン」と設定可能。

SWELLのデフォルト見出しデザインの一覧はこちらの記事でまとめてくれています。

当サイト見て分かるとおり、H2とH3見出しはサルワカデザインにCSSで変更しました。

他のCSSデザインが希望であれば、本記事を参考にして応用可能。

あいうえおLIFE

SANGOデザインが好みで、せっかくのSWELLをSANGOに買い替えるのは勿体ないです。

CSSで SWELLをSANGO風にしましょう。

どうぞ最後まで、お読みくださいね。

もくじ

CSSデザイン見本集

学者サンプル調べる
Business vector created by pch.vector - www.freepik.com

見出しを変更するデザインCSSを無料で公開してくれているサイトを紹介します。

①サルワカ

デザインのシンプルさとおしゃれさが抜群。

本記事では、サルワカデザインにしていきます。

②JAJAAAN(ジャジャーン)

ブログよりも、企業サイトやオウンドメディアに向きそう。

③Pulp Note(パルプノート)

特徴的な「見出し+背景文字」のように2種類表示させるデザインがあります。

SWELLで見出しをサルワカデザインに変更

ハンドドローンミニマル
Background vector created by freepik - www.freepik.com

SWELLのデフォルトパターンから、追加CSSで変更してみましょう。

くろーむ

難易度は

あいうえおLIFE

所要時間は5分。

僕はデザイン考えるのに、1時間悩んだかな笑。

事前準備編

SWELLのワンタッチデザインから、オリジナルCSSデザイン反映させたい「見出し」を「装飾なし」状態にしておきます。

H2やH3やH4設定なし状態画像①
「見出し」の「装飾なし」状態

上記の画像は、「H2とH3」見出しをCSSデザイン変更した例なので「装飾なし」に。

WordPress管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン(記事上部の画像参照)

手順【追加CSS】にコードをコピペするだけ

WordPress管理画面→外観→カスタマイズ→追加CSS→コピペ

あいうえおLIFE

事前準備できてたら、簡単でしょ?

くろーむ

とはいえ、注意事項あるよね。

注意:見出しを変更する際は、「.post_contents h2」でクラス名を指定。

「h2」や「h3」のままだと、記事一覧のタイトルがCSS反映したりします。

H2見出しの変更を例に紹介します。

デザイン①:立体感のあるバー

立体感のあるバー
立体感のあるバー
.post_contents h2 { /*SWELLのH2*/
  padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
  color: #494949;/*文字色*/
  background: #f4f4f4;/*背景色*/
  border-left: solid 5px #7db4e6;/*左線*/
  border-bottom: solid 3px #d7d7d7;/*下線*/
}
左端のカラー替えるなら?

color: #494949;の「#英数字」を好きなカラーコードに。

上記のサイトから、カラーコードを変更できますよ。

デザイン②:ストライプ+上下線

ストライプ+上下線
ストライプ+上下線
.post_contents h2 { /*SWELLのH2*/
  color: #6cb4e4;
  text-align: center;
  padding: 0.25em;
  border-top: solid 2px #6cb4e4;
  border-bottom: solid 2px #6cb4e4;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
}
文字フォントのカラーを替えるには?

color: #6cb4e4;の「#英数字」を好きなカラーコードに。

上下線の太さとカラーを替えるには?

border-top: solid 2px #6cb4e4; border-bottom: solid 2px #6cb4e4; の

「solid ○px」のピクセルの数字を変更【太さ】、「soid ○px #英数字」の英数字を変更

当サイトのH2とH3見出しを公開

HEADING見出し
Infographic vector created by starline - www.freepik.com

当サイトをご覧いただいた方に、「応用したオリジナルH2とH3見出し」を解説。

サルワカデザインをMIXしたH2見出し

サルワカデザインをMIX
サルワカデザインをMIX
/*h2見出しsaruwakaMIX*/
.post_content h2 {
  padding: 0.5em 1.0em;/*文字の上下 左右の余白*/
  color: #333;/*文字色*/
	background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
	background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#e9f4ff 3px, #e9f4ff 7px);
  border-left: solid 9px #0e9de4;/*左線*/
  border-bottom: solid 3px #dadada;/*下線*/
}
解説

本記事でも紹介しました「デザイン①:立体感のあるバー」と「デザイン②:ストライプ+上下線」を合体。

くろーむ

パッと見かっこいいよね。

H3をサルワカデザインで余白調整

Keynoteデザイン画像⑤⑥
H3をサルワカデザインで余白調整
/*h3見出しsaruwaka帯(リボン)風*/
.post_content h3 {
  position: relative;
   padding: 0.5em 1.0em;/*文字の上下 左右の余白*/
  background: #0e9de4;
  color: #fcfcfc;
}
.post_content h3::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}
解説
  • 「padding:」で文字の始まりを右に少し寄せて調整+上下の幅をバランスよく
  • H2は黒ベースのフォント色なので、H3は白字のフォント色に変更して、コントラストつけた

まとめ | SWELLとサルワカSANGOデザイン相性良し

今日は、SWELLでH2見出しやH3見出しをサルワカデザインに変更する方法やコードを解説しました。

見出しにCSS反映しない場合は?

事前準備編の「見出しのワンタッチ反映デザイン」が「装飾なし」に設定できてるか確認してください。

あとは、コピペが間違ってないか、要確認。

SWELLの「見出しデザインを自分好みのCSS」にして、差をつけましょう。

今日は最後までお読みいただき、ありがとうございました!

もくじ
閉じる