SWELLデザインのアレンジ術！CSSカスタマイズの方法

こんにちは、Jony（@10to1_JonyAi）です。
旅人.comでは「旅のお金って、どうしてるの？」に答える！をコンセプトにしています。

SWELL（スウェル）はデフォルトであらゆるデザイン調整ができるテーマです。本来なら CSSカスタマイズする必要はありません。

しかし、どんなテーマにもできることには限りがあります。

などの経験ありませんか？

SWELLを CSSカスタマイズして、アッ！と驚く個性的なブログを作りたい人も多いはず。読者に「あのブログ、デザインがオシャレだったな〜」と思ってもらえればブックマークや SNSでシェアされます。

今回は、SWELLを CSSでカスタマイズするための「追加CSS」の使い方を解説させていただきます。

この記事を書いてる人

当サイトはリンクフリーです。記事本文・画像を引用した場合、リンクを貼っていただければ問題ありません。また、当サイトを引用した記事は Xで拡散するので、@10to1_JonyAiにご連絡ください。

ブログマ

この記事は５分でサクッと読めます。

CSSとは？

まず初めに、CSSについてカンタンに説明させていただきます。

CSS（Cascading Style Sheets）とは、ウェブページやアプリケーションのデザインやレイアウトを管理するために使用される言語です。

分かりやすく言うと、ブログデザインを変更できるコードです。

HTMLでサイトを作り、CSSでサイトのデザインを調節するイメージですね。

Ai

だいたい分かったけど、具体的に何ができるの？

Jony

それでは次の項目で CSSでできることを解説していきますね。

SWELLの「追加CSS」とは？

SWELL（スウェル）の追加CSSとは、CSSを記述するための WordPressデフォルト機能です。

SWELLでは、２パターンの方法で CSSカスタマイズできます。

どちらでも問題ありませんが、追加CSSの方が反映をリアルタイムで確認しながらカスタマイズできます。

視覚的に確認しながらカスタマイズできるので、カンタンでオススメです。

SWELLの「追加CSS」でできること

CSSは、ウェブページのおしゃれな洋服やドレスのようなものです。ウェブページを作るのは HTMLが担当しているのに対して、CSSはそのウェブページに装いを与える役割を担っています。

CSSを使うことで、以下のようなことができます。

つまり CSSでブログをおしゃれで見やすくできます。

ちなみに当ブログも CSSでカスタマイズしています。使用テーマは SWELLですが、デザインはデフォルトの SWELLには無いものばかりです。

SWELLのカスタマイズ依頼を無料で受け付けています。「こんなデザインにして欲しい！」などありましたら、お問合せいただくか、Twitterにて DMください。

SWELLの「追加CSS」でカスタマイズする方法３手順

それでは SWELL（スウェル）を CSSカスタマイズする手順を解説させていただきます。

手順を追って解説していきます。

手順

カスタマイズを開く

ダッシュボードから、

外観  カスタマイズ

と進みます。

手順

「追加CSS」を開き、CSSを追記する

追加CSSをクリックし、枠内に CSSを記述もしくはコピペします。

手順

「公開」をクリックする

最後に「公開」をクリックして完了です。

以上です。

SWELLで特定のページだけCSSを反映させる方法

SWELL（スウェル）をカスタマイズする際、特定のページだけ CSSを反映させたい時もあります。

• 特定の記事だけ
• 特定の固定ページだけ
• 特定のカテゴリーページだけ

手順をサクッと解説していきます。

① 特定の記事・固定ページだけにCSSを反映させる

特定の記事・固定ページだけに CSSを反映させる方法はカンタンです。

記事作成の画面に移ります。

画面を下にスライドすると、「 カスタムCSS & JS」の項目があります。

「 カスタムCSS & JS」の「CSS用コード」内に CSSをコピペして完了です。

「プレビュー」で CSSが反映されているか確認しましょう。

② 特定のカテゴリーページ等だけにCSSを反映させる

特定のカテゴリーページだけに CSSを反映させたい場合もあります。

たとえば私の場合は、特定のカテゴリーページの背景だけ黒にしました。

当ブログのメインページと CSSカテゴリーページの背景色が違うのを確認。

  ホーム画面の背景色

  SWELLカテゴリーの背景色

特定のカテゴリーを選択したい場合は、セレクタを指定すれば OKです。

セレクタとプロパティの関係は以下の通りです。

セレクタの確認方法

は、Macなら右クリック→検証

検証画面になったら、調べたい箇所をクリックすればセレクタを確認できます。

カテゴリーページの背景色を変更したい人は、以下の記事を参考にしてみてくださいね。

Coming Soon

SWELLでCSSが反映されない対処法・解決策

SWELLで CSSが反映されない時の対処法をお伝えしておきます。

それぞれカンタンに解説していきます。

キャッシュの問題

ブラウザキャッシュが古いため、新しい CSSが反映されない可能性があります。その場合は、ブラウザキャッシュをクリアすることで解決できます。

• Chrome：Ctrl + Shift + R
• Firefox：Shift + F5
• Safari：Option + Command + E

でキャッシュをクリアできます。

CSSファイルの場所

CSSファイルの場所が正しくないため、反映されないことがあります。

テーマエディタを使用して変更するか、FTPを使って直接ファイルを編集することができます。

CSSのプロパティの優先度

異なるセレクタが同じ CSSプロパティを使用している場合、優先度によって反映されないことがあります。

適用したいセレクタに !importantを追加することで優先度を上げることができます。

例）

sample{
color:#fff !important;
}

CSSの構文エラー

CSSファイルに誤った構文がある場合、CSSが反映されないことがあります。

CSSファイルをテキストエディタで開き、エラーを修正する必要があります。

プラグインの問題

プラグインが提供する CSSを適用する必要がある場合があります。また、複数のプラグインが同じ CSSを変更している場合には問題が発生することがあります。

この場合、プラグインを無効にして問題が解決するかどうかを確認することができます。

SWELLの「追加CSS」を使うときの注意点

SWELL（スウェル）の「追加CSS」で CSSを利用する際の注意点をお伝えいたします。

それぞれ解説していきます。

① 適切なセレクタを使おう

CSSを記述する際には、適切なセレクタを使用することが大切です。

同じ class名を複数の要素で使用する場合には、異なる class名を与える必要があります。これは、CSSが指定する要素が意図しない場所に適用されることを避けるためです。

たとえば、class名が「sample」という要素が2つある場合、class名を「sample-1」と「sample-2」といったように細かく区別して命名することで、CSSが正しく適用されるようになります。

HTML要素を正確に指定するために、適切なセレクタを選択する練習をしましょう。

また、同じ class名を複数の要素で使用する場合には異なる class名を与えるように意識して、コーディングを行う練習も重要です。

② カスケーディングと優先度について理解しよう

CSSを記述する際には、カスケーディングと優先度の考慮が必要です。

複数のスタイルが競合した場合、CSSは優先度の高いスタイルを適用します。優先度はセレクタの特定方法によって決まります。

スタイルを強制的に優先させるために !important キーワードを使用することもできます。

たとえば、クラスとタグを組み合わせたセレクタより、IDセレクタの方が優先度が高くなる。また、同じ優先度の場合、後に記述されたスタイルが優先されます。

以下の例は、h1要素に対して複数のスタイルが競合する場合です。

h1 {
font-size: 24px;
color: blue;
font-weight: bold;
}

/*↓下の方が優先される*/
h1 {
font-size: 18px;/*重複*/
color: red;/*重複*/
}

この場合、h1要素の文字は18pxの赤色になります。

優先度を理解し、競合したスタイルがどのように適用されるかを確認するために、いくつかのCSSルールを書いて実験してみましょう。

また、!importantキーワードはできるだけ使用せず、優先度を正しく設定することを心がけることが大切です。

③ コードをシンプルに保ち、コメントを活用しよう

コードをシンプルに保つことで読みやすさが向上し、コメントを活用することでコードの意図や目的を明確にできます。

不必要なプロパティや値は省略し、コメントを使ってコードの意図や目的を説明しましょう。これにより、コードの読みやすさが向上し、コードの変更や保守がカンタンになります。

また、コードの繰り返しは避ける必要があります。

コードの繰り返しを避けることで、コードの読みやすさが向上し、保守性が高まります。

同じプロパティや値が複数の箇所で使用される場合は、共通するクラスや IDを使用してまとめるなど、コードの繰り返しを避けるようにしましょう。

これにより、コードの量を減らし、読みやすさが向上します。

SWELLをCSSでカスタマイズするデメリット

SWELL（スウェル）を CSSでカスタマイズするデメリットを紹介します。

それぞれ解説します。

テーマアップデートの影響

SWELLテーマが更新された際に、カスタマイズした部分が上書きされる可能性があります。

そのため、再度カスタマイズする必要があります。

サイトスピードが遅くなる

CSSを読み込む時間が増え、サイトスピードが落ちる可能性があります。

これは SWELLだけでなく、他のテーマでも言えます。

当ブログは

• PC：99点 → 90点
• モバイル：90点 → 88点

となりました。

とは言え、カスタマイズする＝サイト速度が落ちるわけではありません。

適切な箇所、最低限の CSSに厳選すれば、サイトスピードはそこまで落ちません。

※特に、ユーザーが一番最初に目にするサイトのトップ画面の領域は、サイト速度に大きく関わるので注意が必要です。

私の経験上、上記はなるべく CSSを使わないことをオススメします。

不具合が発生する

別の CSS同士がぶつかると、不具合が発生する恐れがあります。

私もたまにありますが、意図していない要素にまで別の CSSは反映してしまい、デザインが崩れる経験が何度かあります。

CSSを記述するときは、セレクタをしっかり指定し、いくつかのページで確認しておきましょう。

SWELLをCSSでカスタマイズするメリット

SWELL（スウェル）を CSSでカスタマイズするメリットは、デメリットの 100倍あります。

それぞれ解説していきます。

個性的なデザインにできる

一番のメリットは、あなたのブログを唯一無二の個性的なサイトにデザインできることです。

「他のブログと違った、オリジナリティあるサイトにしたい！」と思ったことはありませんか？

私が CSSを勉強し始めるきっかけは、そう思ったからです。

SWELLには豊富なデザインパーツが揃っています。しかし、どこか同じデザイン感が拭えません。

CSSで見出しデザインや目次、テキストをデザインするだけで、他のサイトと差別化を図ることができます。

正直、CSSカスタマイズしているときは、小学生の図画工作の授業のように楽しい。

自分だけのサイトにデザインできるのが、CSSの最大の魅力ですよ。

ユーザーファーストを徹底できる

サイトは言わば、あなたのビジネスオフィスです。

ユーザーが訪問したときのおもてなしや、ユーザーの居心地がとても重要です。居心地の良いサイトは、記憶に残り「また訪問したい！」と思ってもらえるからです。

結果、PV数や収益に繋がりますよね。

ユーザーファーストで言えば、ボタンの見やすさや余白スペースの間隔、文字の大きさや目に優しい色使い。

ユーザーが読みにくいと感じるブログは、すぐ離脱されてしまいます。

少しでも長く滞在してもらうための工夫は５万とあります。

少しでも気になったところを CSSで修正できるのもメリットですね。

CVを上げることができる

CSSならクリックされやすいボタンの色やホバーエフェクトをカスタマイズすることもできます。

ときどき、ボタンなのか飾りなのか分からないサイトを見たことありませんか？

ボタンやバナーと理解されないと、クリックもされません。結果、収益に大きく響きます。

デザインだけでなく、そうしたクリック率を向上させる工夫ができるのも CSSのメリットです。

CSSに詳しくなる

私はブログ始めたての頃、CSSに関する知識ゼロでした。

しかし、どうしてもデザインを変えたく「コピペだけ」から CSSをスタートしました。

そこから、もっと自分で CSSを操りたい！と思い、独学で勉強。気づけばある程度は自分でカスタマイズできます。

CSSに詳しくなると、プログラミングの入り口に立てます。そこから新しい副業や、仕事を取ることもできる。

ブログを始め、CSSを勉強しておいて本当に良かったです。

まとめ：CSSでSWELLのデザインをカスタマイズしよう！

今回は SWELL（スウェル）のデザインを CSSでカスタマイズする方法を解説させていただきました。

CSSを使えば SWELLを個性的なデザインにカスタマイズすることができます。

周りのサイトと差別化を図りたい人は、ぜひ CSSに挑戦してみてくださいね。

※まだ SWELLを購入していない人は、SWELLで魅力的なブログをデザインする｜始め方３手順【10分で完了】をご覧ください。

今回は以上です。