メニュー

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

サルワカ見出しCSS

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種類)。

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

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

ぼくも実際に変更したい見出し箇所を「装飾なし」状態に切り替えてから、編集した追加CSSコードで見出しデザインを変更しました。

本記事を読むことで、安心して希望どおりのH2とH3見出しに変更できますよ。

あいうえおLIFE

SWELLをSANGO風にカスタマイズできるので、愛着が増して筆者も読者も大満足ですね!

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

  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQモバイル・複数ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:1万〜2万円 / 月
  • 「副業スキルで複数収入」がテーマ
  • 楽天銀行・楽天カード・楽天証券・イオン株・SWELL・UQ・ASP愛用者
  • 2サイト合計最高月間1万5,000PV
  • ブログ収益:1万〜2万円 / 月
タップできるもくじ

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

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

サルワカさんサイトの見出し記事からデザインとコードを選んで、少し編集を加えたあと追加CSSにコピペしてみましょう。

悩む人

難易度はくらいだね。

あいうえおLIFE

所要時間は5分だけど、ぼくはデザイン考えるのに1時間悩んだかな。

STEP
「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」記事から見出しデザインとコードを選ぶ

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

お気に入りのデザインが見つかったら、「コードを表示」をクリック。

STEP
変更したい「見出し」箇所を「装飾なし」にする

オリジナルCSSデザイン反映させたい「見出し」を「装飾なし」状態にしておきます。

WordPress管理画面→外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン→見出しのデザイン、と変更。

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

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

STEP
【追加CSS】にコードを編集してコピペするだけ

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

見出しを変更する注意点はありますか?

見出しを変更する際は、見出し2なら「.post_content h2」とクラス名を指定するので、引用するコードを書き換えが必要です。

コードをコピペした「h2」や「h3」のままだと何がよくないのですか?

トップページに並んだ記事一覧のタイトルにCSSが反映して見た目が煩雑になります。

見出しをデフォルトから追加CSSで変更すること自体のデメリットはありますか?

デザイン変更したH2やH3の部分は、記事編集画面だと大きい文字に太字のようにしか見えないので、H2やH3の境界線が分かりにくいことが挙げられます。

あいうえお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デザインサイト集

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

サルワカさんのほかに「見出しを変更するデザインCSSを無料で公開しているサイト」を紹介します。

①:NOMAD CODE

コピペだけでブログをカスタマイズできるデザインツール「NomadCode」伝えたい情報を適正に伝えるために、ノマドコードで正しいデザインを。

引用:NOMAD CODE

デザインのシンプルさとおしゃれさが抜群で、HTMLとCSSをコピペするだけで、ブログデザインが見違えるほどに整います。

①: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見出しを公開

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は白字のフォント色に変更して、コントラストつけた
あいうえおLIFE

コピペのまま使うと個人的には文字の始まりと上下の余白が窮屈な感じがしたので、少し余白をとりました。

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

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

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

SWELLの引用マーク付き「引用ブロック」のデザイン変えたいんだけど?

引用マーク付きの「引用ブロック」のCSSカスタマイズは【SWELLカスタマイズ】引用部分をサルワカ風に変更するCSS【コピペOK】に書きました。

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

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

今日はSWELLの見出しデザインをサルワカ風にしたい人に向けて、下記を解説しました。

  • サルワカさんサイトのおすすめ見出しのコードをSWELLに反映させる手順と編集法
  • 見出しデザイン紹介サイトは「NOMAD CODE・JAJAAAN(ジャジャーン)・Pulp Note(パルプノート)」がおすすめ
  • 当サイトで使用中のオリジナルH2とH3デザインのコード
あいうえおLIFE

サルワカさんサイトから見出しデザインの選び方や、コードを編集する注意点、SWELL側の設定まで丁寧に実践すれば、作業自体は10分もかかりませんよ。

お気に入りのSWELLを「好みの見出しデザイン」にすれば、ライバルに差をつけ有益コンテンツで読者を満足させること間違いなしですね!

見出しデザインをCSS変更後は、「SWELLテーマ購入投資額を回収+アドセンスより報酬単価が高いASPアフィリエイト収入を稼ぐ体験をする」ためにも、A8.netへのASP登録やセルフバックをしておきましょう。

「まだやってないよ」という人は、A8.netのセルフバック【自己アフィリ】で5万円稼ぐ案件とは?【体験談】もあわせてどうぞ。

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

スポンサーリンク

タップできるもくじ