【コピペでできる】SWELLのカスタマイズ ー カテゴリー一覧のサブタイトルを非表示にする

SWELLのCSSコードの貼り方

SWELLをCSSでカスタマイズする場合、コードを記述する場所が3パターンあります。

まずはこれらコード記述場所についての違いを解説していきます。

1｜カスタマイズ「追加CSS」

サイト全体に反映させたい場合は、ここにCSSコードを貼るのが一般的です。

左メニュー → 外観 → カスタマイズ → 追加CSS

と進むと、コード記述箇所があらわれます。

ここに記述すれば、横の画面にリアルタイムでデザインが反映されますので、とても便利です。

全ページに反映させるCSSコードを書くときは、まず「追加CSS項目」を活用してください。ただしここに記述すると、サイトのソースコードを見られたときに追加した分のCSSが丸見えになるというデメリットはあります。

だからといって特別に困ったことがあるわけではありませんが、あまり人から見られたくない場合などは、後述する「style.css」に書くと良いでしょう。

2｜テーマエディタのstyle.css

SWELLのテーマファイルに、直接CSSを記述することもできます。

外観 → テーマファイルエディター → スタイルシート（style.css）

と進むと、下記のような画面へ。
ここに記述すると、全ページで読み込まれます。

ここに書くと、ソースコードを見られたときにも表向きは見えないメリットがあります。style.cssを覗かれれば見られますが、それはもう仕方のないことです。

まずはカスタマイザーの追加CSS項目に書いて動作をチェックして、問題なさそうなコードはstyle.cssに移すような使い方が良いかと思います。

この方法でカスタマイズをする場合は、必ず子テーマを使用してください。
親テーマのstyle.cssを使ってしまうとテーマのアップデートがあった際にファイルが上書きされてしまうため、加えた変更点がリセットされてしまいます。

3｜SWELL編集画面下部「カスタムCSS ＆ JS」

SWELLには、各投稿ページや固定ページ編集画面の下部にCSSコードを入力する項目が用意されています。

ここの「CSS用コード」欄に貼ったCSSコードは、その記事だけに反映されます。
そのページにだけ反映させたいCSSは、この部分に記述すれば他のページでは読み込まれませんので、個別で書くと良いでしょう。

/*-- カテゴリー一覧のサブタイトル非表示 --*/
.c-pageTitle__subTitle{
	display: none;
}