この記事では、WordPressテーマ「SWELL」の見出しデザインをカスタマイズする方法をご紹介します。
SWELL純正の機能をつかったデザイン変更方法と、CSSで指定したカスタマイズ方法に分けて解説していきます。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLの見出しデザイン変更方法
まずはSWELL純正の機能を使って見出しデザインを変更する方法について、下記2点の変更箇所を解説します。
- 記事中のh2、h3、h4見出し
- 記事下エリアのh2見出し
記事中のh2、h3、h4見出しデザインを変更する方法
ダッシュボードから「外観→カスタマイズ→投稿・固定ページ→コンテンツのデザイン」と進みましょう。
すると下記のとおり、見出しのデザイン設定ができる項目が表示されます。
ここでは通常のh2、h3、h4デザインの他、「セクション見出し」のh2デザインを変更できます。「見出しのキーカラー」を変更することで、見出し全体の色をメインカラーも調整可能。
デザインを切り替えればリアルタイムで見た目を確認できますので、好きな見出しデザインに修正しましょう。
記事下エリアのh2見出しデザインを変更する方法
記事下エリアにある「この記事を書いた人」「関連記事」「コメント」などの見出しには、h2タグが設定されています。
こういった見出しのデザインを修正するには「外観→カスタマイズ→サイト全体設定→タイトルデザイン」と進みましょう。下記画面「サブコンテンツのタイトルデザイン」を調整することで、デザインを変更できます。
見落としがちなポイントですので、必要であればカスタムしておきましょう。
SWELLの見出しデザインをCSSでカスタマイズする方法
次に純正の機能はつかわず、CSSを追加してカスタマイズする方法を解説します。
ただしカスタマイズをミスすると、サイト全体のデザインが崩れる可能性があります。あくまで自己責任でお取り組みください。
1. 見出し設定を「装飾なし」にする
まず前準備として、カスタマイズする対象の見出しデザインを「装飾なし」にしてください。純正機能で見出しデザインを実装していると、CSSを書いたときに競合してしまう場合があります。
これで準備完了です。
2. 修正する見出しのセレクタを確認する
次に、デザインをカスタマイズしたい見出しのセレクタを確認しましょう。
例えばh2見出しを修正したいと思ったときに「.h2」とだけ指定すると、記事中のh2と記事下のh2両方にカスタマイズが反映されてしまいます。そこで下記のように、修正したい見出しタグを別々に指定してカスタムする必要があります。
/*記事中のh2見出し*/
.post_content h2{
/*カスタマイズコードを書く場所*/
}
/*記事下のh2見出し*/
.c-secTitle{
/*カスタマイズコードを書く場所*/
}主な見出しのセレクタは、下記のとおりです。
| 記事中の見出し | .post_content h1 .post_content h2 .post_content h3 .post_content h4 .post_content h5 .post_content h6 |
| 記事下の見出し | .c-secTitle |
3. 「追加CSS」にカスタマイズコードを書く
セレクタを確認できたら「外観→カスタマイズ→追加CSS」と進み、好きなデザインになるようCSSを書きましょう。
下記のコードをそのままコピペしてもらえれば、記事中のh2〜h4と、記事下h2見出しを指定してカスタマイズできます。
/*記事中のh2見出し*/
.post_content h2{
/*カスタマイズコードを書く場所*/
}
/*記事中のh3見出し*/
.post_content h3{
/*カスタマイズコードを書く場所*/
}
/*記事中のh4見出し*/
.post_content h4{
/*カスタマイズコードを書く場所*/
}
/*記事下のh2見出し*/
.c-secTitle{
/*カスタマイズコードを書く場所*/
}実際に書くと、下記のようになります。
良いデザインに決まったらstyle.cssに移しても良いかと思います。CSSカスタマイズの基礎については、下記の記事もご覧ください。
SWELLの見出しカスタマイズ・デザイン例【CSS】
それでは、SWELLの見出しデザインをCSSでカスタマイズする例をご紹介していきます。
見出し前にSWELLアイコンを表示させるCSSカスタマイズ
見出し前にSWELLアイコンを表示させるには、下記のような記述になります。
.post_content h2:before{
position:absolute;
font-family: icomoon!important;
content:"\e936";/*好きなアイコンのコード*/
left:0;
}
.post_content h2{
position:relative;
padding-left:1.5em;
}上記コードをカスタマイザーの追加CSSなどに貼ると、記事中のH2見出しにSWELLアイコン が表示されます。実際の画面は下記のとおりで、見出しテキストが長くなって改行された際も、アイコンが左上に固定されるレイアウトになります。
アイコンについては、content:"\e936";の部分を好きなSWELLオリジナルアイコンのCSSコードに変えて使用してください。下記のページに一覧でまとめてあります。
ちなみにfont-sizeを指定して見出しの文字サイズを調整すると、アイコンのサイズなども連動して調整されます。
h2ではなくh3やh4を指定しても利用できますので、好きなように調整してください。
SWELLの見出しデザインを楽しもう！
SWELLは人気テーマだけあって、デザインが他の人と被ってしまいがちです。
見出しをオリジナルのデザインにするだけでも、随分と印象が変わりますので、ぜひカスタマイズにチャレンジしてみてください。
