読者の悩み
SWELLユーザーです。
SWELLのWordPress管理画面から、外観→カスタマイズ→投稿・固定ページ→見出しで、H2〜H4までデザインがワンタッチで出来るのは素晴らしいです。
SWELLユーザー増えてきて、①デザインがかぶるのと、②飽きてきたという2点が原因で、CSS使ってサルワカデザインにしてみたいんです。
SWELLはデフォルトでも素晴らしいですが、CSSなどのカスタマイズ記事が少なめなので、もしできるなら解説して欲しいです。
あいうえおLIFEこんにちは！あいうえおLIFE(@pledge17uchs)です。
今日は上記のお悩みを解決します。
上記の画像のとおり、「管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン」と設定可能。
SWELLのデフォルト見出しデザインの一覧はこちらの記事でまとめてくれています。
当サイト見て分かるとおり、H2とH3見出しはサルワカデザインにCSSで変更しました。
他のCSSデザインが希望であれば、本記事を参考にして応用可能。
あいうえおLIFESANGOデザインが好みで、せっかくのSWELLをSANGOに買い替えるのは勿体ないです。
CSSで SWELLをSANGO風にしましょう。
どうぞ最後まで、お読みくださいね。
CSSデザイン見本集
見出しを変更するデザインCSSを無料で公開してくれているサイトを紹介します。
①サルワカ
本記事では、サルワカデザインにしていきます。
②JAJAAAN（ジャジャーン）
ブログよりも、企業サイトやオウンドメディアに向きそう。
③Pulp Note（パルプノート）
特徴的な「見出し＋背景文字」のように2種類表示させるデザインがあります。
SWELLで見出しをサルワカデザインに変更
SWELLのデフォルトパターンから、追加CSSで変更してみましょう。
くろーむ難易度は
あいうえおLIFE所要時間は5分。
僕はデザイン考えるのに、1時間悩んだかな笑。
事前準備編
SWELLのワンタッチデザインから、オリジナルCSSデザイン反映させたい「見出し」を「装飾なし」状態にしておきます。
上記の画像は、「H2とH3」見出しをCSSデザイン変更した例なので「装飾なし」に。
WordPress管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン（記事上部の画像参照）
手順【追加CSS】にコードをコピペするだけ
WordPress管理画面→外観→カスタマイズ→追加CSS→コピペ
あいうえおLIFE事前準備できてたら、簡単でしょ？
くろーむとはいえ、注意事項あるよね。
注意：見出しを変更する際は、「.post_contents h2」でクラス名を指定。
「h2」や「h3」のままだと、記事一覧のタイトルがCSS反映したりします。
デザイン①：立体感のあるバー
.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見出しを公開
当サイトをご覧いただいた方に、「応用したオリジナルH2とH3見出し」を解説。
サルワカデザインをMIXしたH2見出し
/*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をサルワカデザインで余白調整
/*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反映しない場合は？
-
事前準備編の「見出しのワンタッチ反映デザイン」が「装飾なし」に設定できてるか確認してください。
あとは、コピペが間違ってないか、要確認。
今日は最後までお読みいただき、ありがとうございました！