SWELLの見出しデザインをサルワカ風にしたい人
悩む人SWELLの見出しを追加CSSでサルワカサイト風に変更するコードや手順が知りたいです。
見出しデザインをCSSで変更するコードを紹介しているサイトってサルワカさんの他にありますか？
おすすめ見出しデザインのコードも知りたいです。
あいうえおLIFE今日は「お悩み解決に役立つ内容」をお伝えしていきますね。
お気に入りのSWELLの見出しがSANGOで代表的なサルワカサイト風になったら、嬉しいですよね。
SWELLユーザーが増えてきて、「デザインがかぶる・飽きてきた」という2点から、ぼくも「コード探しや編集手順を調べる」のにかなりの時間を費やしました…
- サルワカさんサイトの見出し記事からデザインを選び、「管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン」で変更したい「H2・H3・H4」を「装飾なし」状態にしてから、追加CSSに編集したコードを追加する
- 見出しデザイン紹介サイトは「NOMAD CODE・JAJAAAN（ジャジャーン）・Pulp Note（パルプノート）」がおすすめ
- 当サイトで使用中のオリジナルH2とH3デザインのコードを公開
サルワカさんの記事CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選には、おしゃれな見出しがたくさんあります。
SWELLの見出しもワンタッチでデザインを変更でき、便利かつデフォルト見出しデザインもおしゃれ（H2見出しだけでも11種類）。
上記画像のとおり「管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン」と設定可能。
ぼくも実際に変更したい見出し箇所を「装飾なし」状態に切り替えてから、編集した追加CSSコードで見出しデザインを変更しました。
本記事を読むことで、安心して希望どおりのH2とH3見出しに変更できますよ。
あいうえおLIFESWELLをSANGO風にカスタマイズできるので、愛着が増して筆者も読者も大満足ですね！
今日はどうぞ最後まで、お読みくださいね。
SWELLで見出しをサルワカデザインに変更
サルワカさんサイトの見出し記事からデザインとコードを選んで、少し編集を加えたあと追加CSSにコピペしてみましょう。
悩む人難易度はくらいだね。
あいうえおLIFE所要時間は5分だけど、ぼくはデザイン考えるのに1時間悩んだかな。
デザインのシンプルさとおしゃれさが抜群。
お気に入りのデザインが見つかったら、「コードを表示」をクリック。
オリジナルCSSデザイン反映させたい「見出し」を「装飾なし」状態にしておきます。
WordPress管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン、と変更。
上記の画像は、「H2とH3」見出しをCSSデザイン変更した例なので、見出し2と見出し3のデザインを「装飾なし」にしています。
WordPress管理画面→外観→カスタマイズ→追加CSS→コピペ。
あいうえおLIFE事前準備できてたら、意外と簡単でしょ？
悩む人注意事項までわかりやすく、ありがとうございます。
下記では「H2見出し」を実際に変更するコードを紹介します。
デザイン①：立体感のあるバー
.post_content 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_content 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 #英数字」の英数字を変更。
コードをコピペしたままでは「h1」になっているので、見出し2を変えるなら「.post_content h2」に書き換えることをお忘れなく。
見出しのCSSデザインサイト集
サルワカさんのほかに「見出しを変更するデザインCSSを無料で公開しているサイト」を紹介します。
①：NOMAD CODE
コピペだけでブログをカスタマイズできるデザインツール「NomadCode」伝えたい情報を適正に伝えるために、ノマドコードで正しいデザインを。
引用：NOMAD CODE
①：NOMAD CODE
NOMAD CODEさんでは、「JIN・Cocoon・AFFINGER・SANGO・その他のテーマ」に見合うコードを公開中。
NOMAD CODEの中の人が解説しているYouTube
おしゃれなWordPressテーマ「NOMAD」も開発
②：JAJAAAN（ジャジャーン）
東京と長野の松本市を拠点とするWeb制作・広告代理会社です。最先端の技術、マーケティング手法は株式会社JAJAAAN（ジャジャーン）にお任せください！
引用：JAJAAAN（ジャジャーン）
ブログよりも、企業サイトやオウンドメディアのデザインに向きそう。
②：JAJAAAN（ジャジャーン）
③：Pulp Note（パルプノート）
WebデザインやWebサイト制作の現場で使えるTipsやアイデアを発信しています。
引用：Pulp Note（パルプノート）
特徴的な「見出し＋背景文字」のように2種類表示させるデザインがあります。
③：Pulp Note（パルプノート）
当サイトの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は白字のフォント色に変更して、コントラストつけた
あいうえおLIFEコピペのまま使うと個人的には文字の始まりと上下の余白が窮屈な感じがしたので、少し余白をとりました。
- 見出しにCSSが反映しない場合は？
-
事前準備編の「見出しのワンタッチ反映デザイン」が「装飾なし」に設定できてるか確認してください。
あとはコピペが間違ってないか、要確認。
- SWELLの引用マーク付き「引用ブロック」のデザイン変えたいんだけど？
-
引用マーク付きの「引用ブロック」のCSSカスタマイズは【SWELLカスタマイズ】引用部分をサルワカ風に変更するCSS【コピペOK】に書きました。
まとめ ｜ SWELLとサルワカSANGOデザイン相性良し
今日はSWELLの見出しデザインをサルワカ風にしたい人に向けて、下記を解説しました。
- サルワカさんサイトのおすすめ見出しのコードをSWELLに反映させる手順と編集法
- 見出しデザイン紹介サイトは「NOMAD CODE・JAJAAAN（ジャジャーン）・Pulp Note（パルプノート）」がおすすめ
- 当サイトで使用中のオリジナルH2とH3デザインのコード
あいうえおLIFEサルワカさんサイトから見出しデザインの選び方や、コードを編集する注意点、SWELL側の設定まで丁寧に実践すれば、作業自体は10分もかかりませんよ。
お気に入りのSWELLを「好みの見出しデザイン」にすれば、ライバルに差をつけ有益コンテンツで読者を満足させること間違いなしですね！
見出しデザインをCSS変更後は、「SWELLテーマ購入投資額を回収＋アドセンスより報酬単価が高いASPアフィリエイト収入を稼ぐ体験をする」ためにも、A8.netへのASP登録やセルフバックをしておきましょう。
「まだやってないよ」という人は、A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは？【体験談】もあわせてどうぞ。
今日は最後までお読みいただき、ありがとうございました！