ブログテーマ「SWELL」見出しh2・h3・h4のデザインや、見出しの色、見出しの文字色を変更したり、CSSでカスタマイズしてみました。
SWELLはテーマのカスタマイザーから、見出しh2・h3・h4のデザインを変更できます。また、CSSでカスタマイズすればオリジナルの見出しデザインも作れます。
見出しのデザインはSWELLの「外観」→「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」で変更します。
見出しの色をサイトの基本カラーに合わせる場合は、SWELLの「外観」→「カスタマイズ」→「サイト全体設定」で変更、独自に設定する場合は「カスタマイズ」→「投稿・固定ページ」から変更します。
H2,H3,H4各見出しの文字色は、テーマファイルエディターにCSSを記載して変更します。
見出し2 h2のデザイン変更
SWELLの見出しデザインをデフォルトから別のデザインに変更してみましょう。
まずはダッシュボード左のメニュー「外観」→「カスタマイズ」に進みます。
続いて「投稿・固定ページ」→「コンテンツのデザイン」に進むと「■ 見出しのデザイン設定」という項目があるので、ここで見出しのデザインを選択します。
SWELLの見出し2(h2)デザインは12種あり、「見出し2のデザイン」から選択します。
SWELL 見出し2 h2デザイン一覧
テーマ内で選択できるSWELLの見出し2(h2)デザイン一覧です。
| 帯 |  |
| 塗り潰し |  |
| 左に縦線 |  |
| 左に2色のブロック |  |
| 付箋風 |  |
| 付箋風（ストライプ） |  |
| ステッチ |  |
| ステッチ（薄） |  |
| ふきだし風 |  |
| 上下に線 |  |
| 1文字目にアクセント |  |
| 装飾なし |  |
見出し3 h3のデザイン変更
SWELLの見出し3(h3)デザインは8種あり、「見出し3のデザイン」から選択します。
SWELL 見出し3 h3デザイン一覧
SWELLのテーマ内で選択できる見出し3(h3)デザイン一覧です。
| 2色の下線（メイン・グレー） |  |
| 2色の下線（メイン・薄メイン） |  |
| 下線（メインカラー） |  |
| 下線（グラデーション） |  |
| 下線（ストライプ） |  |
| 左に縦線 |  |
| 左に2色のブロック |  |
| 装飾なし |  |
見出し4 h4のデザイン変更
SWELLの見出し4(h4)デザインは3種です。「見出し4のデザイン」から選択します。
SWELL 見出し4 h4デザイン一覧
SWELLのテーマ内で選択できる見出し4(h4)デザイン一覧です。
| 左に縦線 |  |
| チェックアイコン |  |
| 装飾なし |  |
見出しデザインをCSSでカスタマイズ
SWELLのデフォルトデザインを使わずに、CSSで見出しをカスタマイズすることもできます。
CSSカスタマイズの注意点ですが、カスタマイズする見出しデザインは「装飾なし」にしておきましょう。SWELLの見出しデザインをそのままにしておくと、CSSと競合することがあります。
見出し2、見出し3、見出し4に対応するCSSは以下の通りで、{ }内に記載します。
.post_content h2 {
/* CSSを記載する */
}
.post_content h3 {
/* CSSを記載する */
}
.post_content h4 {
/* CSSを記載する */
}CSSで見出しデザイン変更
見出し2と見出し3のデザインをグラデーション調にカスタマイズしてみました。
見出し変更で追記したCSSは以下の通りです。
.post_content h2 {
padding: 1rem 2rem;
color: #fff;
background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}
.post_content h3 {
position: relative;
padding: 1rem .5rem;
}
.post_content h3:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
content: '';
background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}見出しのデザインは以下を参考にさせてもらいました。コードをコピペするだけで使えるので、他によいデザインがあれば試してみてください。
見出しデザイン参照 CSS見出しデザイン参考100選！コピペ可！どこよりも詳しく解説！
見出しの色変更 基本カラーに合わせる
SWELLの見出しの色は濃い青がデフォルトですが、これを別の色に変更しましょう。まずは見出しの色をサイトの基本カラーに合わせて設定してみます。
SWELLの「基本カラー」とは、テーマ内共通のイメージカラーのようなものです。メニューのアイコンや見出し、検索バー、カテゴリー名などが基本カラーに統一されます。
ダッシュボード左のメニュー「外観」→「カスタマイズ」に進みます。
カスタマイズの左メニュー上部「サイト全体設定」→「基本カラー」に進み、メインカラーの「色を選択」をクリックします。
見出しの色はカラーパレットで変更します。
カラーパレットは3種類あります。カラーパレット、右側の濃淡、下の基本色、各自クリックすると見出しの色が変わるので、ここから自分の好きな色を選んで下さい。
見出しの色はRGBで指定することもできます。頭に#を付けて「#123abc」のように入力します。
見出しの色が確定したら「公開」をクリックすればOKです。
見出しの色変更 独自の色設定
続いて見出しの色を基本カラーに統一せず、独自に設定してみます。この場合は「カスタマイズ」→「投稿・固定ページ」→「コンテンツのデザイン」から変更します。
コンテンツのデザインに「■ 見出しのデザイン設定」という項目があるので「見出しのキーカラー」をクリックすると、見出しH2,H3,H4の色を一括で変更することができます。
見出しの色は先ほどと同じカラーパレットで変更します。見出しの色を赤にしてみました。
ここでは見出し2、見出し3、見出し4のデザインも変更できます。
見出しの文字色変更
見出しの文字色はCSSでカスタマイズすることができます。H2のデフォルトは白、h3とh4は黒ですが、CSSでH2,H3,H4各見出しの文字色を変更してみました。
H2,H3,H4各見出しのCSSは、以下のように記載します。
.post_content h2 {
color:#00ffff;
}
.post_content h3 {
color:#ff0000;
}
.post_content h4 {
color:#00ff00;
}見出し変更でオリジナリティを出す
SWELLはWordPressの人気テーマで、いろんなサイトやブログで使われていますが、その分見出しデザインが被ることも多く、「どこかで見た感」が出てしまいます。
見出しのデザインや見出しの色を変更したり、CSSでカスタマイズするだけでも「これはSWELLだな」とか、「どこかで見たデザイン」感を減らすことができます。
見出しのカスタマイズはそれほど難しくありません。サイトやブログのオリジナリティを出すために、ぜひSWELLの見出しカスタマイズを試してみてください。
SWELLの見出しにページ内リンク(アンカーリンク)を作成する方法は、以下の記事をご参照ください。
ページ内リンク作成 SWELLでページ内リンク(アンカーリンク)を作成する
