SWELLで「ここだけ変えたい」ときはどうする？標準機能でできること・CSSが必要なこと

WordPressテーマ「SWELL」は、最初からかなり多くの機能が用意されています。

そのため、専門的なコードを書かなくても、

「文字の色を変えたい」

「トップページの見せ方を変えたい」

「ボタンを追加したい」

といったことは、標準機能だけで対応できるケースも少なくありません。

ただ、実際に使っていると、

「もう少しだけこうしたい」

という場面が出てきます。

今回は、SWELLの標準機能でできることと、CSSなどの追加調整が必要になるケースについて簡単に紹介します。

まずはSWELLの標準機能でできないか確認

SWELLは設定項目がかなり多いテーマです。

たとえば、

・ヘッダーやフッター

・メニュー

・文字サイズやカラー

・サイドバー

・ボタン

・ブログパーツ

・ウィジェット

・各種ブロック

・スマートフォン表示

など、多くの項目を管理画面から変更できます。

そのため、

「CSSを書かなければ無理かな？」

と思っていたことが、実は設定を変更するだけでできるケースもあります。

まずは標準機能で対応できるか確認するのがおすすめです。

「設定場所が分からない」だけのケースも多い

SWELLは機能が豊富な反面、

設定項目がどこにあるのか分かりにくい

ということもあります。

WordPressの管理画面だけでなく、

「カスタマイズ」

「SWELL設定」

「投稿・固定ページの編集画面」

「ブログパーツ」

など、設定する場所が分かれているからです。

機能そのものは用意されていても、

「どこを触ればいいの？」

となってしまうことがあります。

この場合はCSSを書く必要はなく、正しい設定場所が分かればすぐ解決することもあります。

CSSが必要になるのはこんな場合

一方で、SWELLの標準設定だけでは対応しにくい調整もあります。

たとえば、

・特定部分だけ余白を変えたい

・ボタンの位置を細かく調整したい

・PCとスマホで表示を変えたい

・特定のページだけデザインを変更したい

・標準設定にはない色やサイズにしたい

・要素を横並びにしたい

・細かいレイアウトを調整したい

といったケースです。

こうした場合は、CSSを追加することで対応できることがあります。

SWELL全体のデザインを大きく変更するのではなく、

「この部分だけ少し変える」

という調整なら、数行〜数十行程度のCSSで済むケースもあります。

CSSを増やしすぎないことも大切

CSSで変更できるからといって、何でもCSSで上書きすればいいわけではありません。

SWELLの標準機能でできることまでCSSで変更してしまうと、

・後からどこで変更したか分からなくなる

・テーマのアップデート後に表示が変わる

・スマホだけ表示がおかしくなる

といったことが起こる場合があります。

そのため、

標準機能でできることは標準機能で。

足りない部分だけCSSで補う。

という使い方が管理しやすいと思います。

さらに複雑な変更はPHPやプラグインが必要なことも

デザイン調整だけならCSSで対応できることが多いですが、

「表示条件を変更したい」

「SWELLにはない機能を追加したい」

「特定の処理を自動化したい」

といった内容になると、PHPやプラグインなどが必要になる場合もあります。

このあたりは変更内容によって大きく異なります。

まずは、

「何をしたいのか」

を整理してから、一番シンプルな方法を選ぶのがおすすめです。

SWELLの「ここだけ変えたい」に対応しています

SWELLを使っていて、

「設定場所が分からない」

「標準機能では思った通りにならない」

「CSSで少しだけ調整してほしい」

「スマホ表示だけ整えたい」

といった場合は、設定・修正・カスタマイズのお手伝いもしています。

SWELLの標準機能で対応できる場合はできるだけ標準機能を使い、必要な場合のみCSSなどで調整します。

「これってSWELLでできる？」という段階でも大丈夫です。

対象ページと変更したい内容を確認したうえで、対応方法をご案内します。