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

当ページのリンクには広告が含まれています。

人気テーマ「SWELL」は、組み込まれている機能だけでもかなり自分好みのデザインにできます。
ただ、人気のテーマゆえに、似たようなデザインになりがち…
そんな時に、独自のデザインを取り入れられるのがCSSでのカスタマイズです。

今回は、CSSを使って、カテゴリー一覧のサブタイトルを非表示にする方法を紹介していきます。

そもそも、「サブタイトル」とは

上の画像の赤い四角の場所にあります。

SWELLの管理画面でカテゴリーの編集をする際に、サブタイトルをつけておけばそれが表示されるのですが、特に何もいれないと、このように「category」と表示されてしまいます。
ちょっと嫌だなぁ…となった場合は、非表示にしてしまいましょう。

SWELLのテーマを使用する前はCocoonテーマでいろいろ遊んでいた筆者が、コピペで可能なカスタマイズ例を紹介していきますので、ぜひ参考にしてみてください。

カスタマイズは自己責任にてお取り組みください。心配な方は、作業前にバックアップを取っておくことをおすすめします。

目次

SWELLのCSSコードの貼り方

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

  1. 管理画面内のカスタマイズにある追加CSS
  2. テーマファイルエディタのstyle.css
  3. 記事の編集画面下部「カスタムCSS & JS」

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

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;
}

サブタイトルが表示されなくなっていれば完了です。

まとめ

コード改変は、WordPressの中でも中〜上級者向けの部分かもしれません。

焦らずゆっくりと、自分好みのページを作っていきましょう。

よかったらシェアしてね!
目次