WordPressテーマ「SWELL」のデザインをCSSでカスタマイズする方法と、デザイン例をご紹介します。
元々素敵なデザインのテーマですが、かゆいところに手を届かせるには、CSSでカスタマイズするのが近道です。
ぜひお試しください。
- 「そもそもSWELLとは」については、下記の記事をご参考ください。
- カスタマイズ内容は、記事最終更新日時点のSWELL最新バージョンで動作確認しております。
- カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』
SWELLのCSSコード記述方法
SWELLをCSSでカスタマイズする場合、コードを記述する場所が3種類あります。
- カスタマイザーの追加CSS項目
- 各ページ下部の「CSS用コード」項目
- テーマファイルエディタのstyle.css
まずはこれらコード記述場所について、挙動や扱いやすさの違いを解説していきます。
カスタマイザーの追加CSS項目に記述する
サイト全体に反映させたい場合は、カスタマイザーの追加CSS項目に記述するのがもっともお手軽です。
「外観→カスタマイズ→追加CSS」と進むと、コード記述箇所があらわれます。
ここに記述すれば、横の画面にリアルタイムでデザインが反映されますので、とても便利です。
全ページに反映させるCSSコードを書くときは、まず「追加CSS項目」を活用してください。ただしここに記述すると、サイトのソースコードを見られたときに追加した分のCSSが丸見えになるというデメリットはあります。
だからといって特別に困ったことがあるわけではありませんが、あまり人から見られたくない場合などは、後述する「style.css」に書くと良いでしょう。
テーマファイルエディタのstyle.cssに記述する
SWELLのテーマファイルに、直接CSSを記述することもできます。
「外観→テーマファイルエディター→スタイルシート（style.css）」と進むと、下記のような画面へ。ここに記述すると、全ページで読み込まれます。
ここに書くと、ソースコードを見られたときにも表向きは見えないメリットがあります。style.cssを覗かれれば見られますが、それはもう仕方のないことです。
まずはカスタマイザーの追加CSS項目に書いて動作をチェックして、問題なさそうなコードはstyle.cssに移すような使い方が良いかと思います。
各ページ下部の「CSS用コード」項目に記述する
SWELLには、各投稿ページや固定ページ編集画面の下部にCSSコードを入力する項目が用意されています。
そのページにだけ反映させたいCSSは、この部分に記述すれば他のページでは読み込まれませんので、個別で書くと良いでしょう。
CSSカスタマイズ基礎
ごく簡単に、CSSがどういうコードになるのか書いておきます。
基本的な形は下記のとおりです。
セレクタ {
プロパティ:値;
}下記のように指定するイメージです。
- セレクタ：どの部分に対して
- プロパティ：なにを
- 値：どのくらい調整するのか
例えばサイト内の「H2」タグを持つ要素の文字サイズを20pxに指定したい場合は、下記の指定になります。
h2 {
font-size:20px;
}テーマやWebサイトごとに大きく異なるのが「セレクタ」の部分で、SWELLをカスタマイズするには、SWELL独自に指定されているセレクタを見極める必要があります。
SWELLのCSSカスタマイズでできること
そもそもCSSとは、HTML（やXML）の見た目を指定するために使うものです。
自分たちでSWELLをCSSでカスタマイズするときも、基本的には「見た目」の変更ができると思っておいてください。
一方で色が変化するタイミングを決めたり、スクロールする方向を変えたりといった「システムの挙動」を制御するには、基本的にはJavascripやPHPなどの言語との組み合わせが必要になります。（簡単なアニメーションなどはCSSでもできますが）
あくまでSWELLの表面的な見た目・デザインを調整できるものだと考えておきましょう。
SWELLのCSSカスタマイズデザイン例
それでは、SWELLのCSSカスタマイズ例をご紹介していきます。
フッターエリアのCSSカスタマイズ
SWELLのフッターは、文字サイズや背景画像をカスタマイズすると、少しオリジナリティを出せます。
下記の記事で解説していますので、ご参考ください。
見出しのCSSカスタマイズ
見出しは、CSSカスタマイズをすることで自由自在なデザインを実現できます。
下記の記事で解説していますので、参考にしてください。
ボタンのCSSカスタマイズ
ボタンは標準機能でも色や丸みをカスタマイズできますが、CSSを活用することで「MOREボタン」も調整できたり、ボタンの縁取りや影などを調整できたりします。
下記の記事で解説していますので、参考にしてください。
ヘッダーのCSSカスタマイズ
ヘッダー部分は元々の機能でカスタマイズしやすい部分ですが、かゆいところまでアイデアを行き届かせるにはCSSが必要です。下記の記事にまとめました。
目次のCSSカスタマイズ
SWELLは目次部分が比較的シンプルなデザインです。アイデア次第で、色々と遊んでみてください。下記の記事にまとめています。
記事エリアのCSSカスタマイズ
記事投稿部分全体の装飾についてもご紹介します。あまり派手にやりすぎると読みにくくなりますので、可読部分に触らない枠組みや背景のカスタマイズがおすすめです。
投稿一覧のCSSカスタマイズ
投稿一覧も、オリジナリティを出しやすい箇所です。ちょっとデザインを追加・カスタマイズするだけでも、他のWebサイトと差をつけられます。
カテゴリブロックのCSSカスタマイズ
サイドバーやフッターでよく使用するカテゴリブロックも、少しカスタマイズすると差別化できます。
プロフィールボックスのCSSカスタマイズ
SWELLの機能にある「プロフィール」ボックスも、カスタマイズして好きなデザインにしてみてください。
SNSシェアボタンのCSSカスタマイズ
SNSシェアボタンにちょっとした変化を出すのもおすすめです。デザインを調整するカスタマイズをご紹介しています。
SWELLのCSSカスタマイズに関してよくある質問
- SWELLでCSSが反映されない
-
追加CSS項目に書いても、場合によりリアルタイムで反映されない場合があります。またページ下部のCSS項目に書いた場合、プレビューでは反映されず、公開してはじめて反映されることもあります。対処法としては、いったん対象ページを「非公開設定」にして公開して確かめてみるなどがおすすめです。
- SWELLでメディアクエリが効かない
-
意外と半角スペースの有無が原因でハマっていることがあります。完全にサンプルコード通りの記述になっているか確認してみることをおすすめします。
SWELLのCSSカスタマイズまとめ
SWELLは、CSSをつかってカスタマイズするともっとデザインが楽しくなります。
もともと綺麗なデザインですが、あえてカスタマイズ幅を残しているようにも感じられる素敵なテーマです。ぜひ色々とカスタマイズして、もっとSWELLを楽しんでいってください。
