【コピペでできる】SWELLのカスタマイズーリストブロックをカスタマイズ

2024年1月17日

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

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

今回は、CSSを使って、カード型の投稿リストブロック（PC表示）を4カラム化する方法を紹介していきます。

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

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

＼おしゃれで使いやすい／

SWELLのCSSコードの貼り方

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

それでは、リストブロックをカスタマイズしていきます。

今回は、PC表示で最大3カラムにした設定で４カラム表示になるカスタマイズを紹介しますので、事前に、最大カラム数(PC)を3列に設定していきます。

追加するコードは以下となります。

/*-- リストブロック4カラム --*/
@media (min-width: 1020px) {
.-type-card.-pc-col3 .p-postList__item {
width: calc(100% / 4);
}
}

これは、デフォルトで(100% / 3)となっている部分を、(100% / 4)と書き換えたことによりカラム数を４に変更させています。
(100% / 4)の部分を(100% / 5)などにすると、5カラムなどにもできます。

クラス名.-type-cardの部分を、.-type-thumbに変えるとサムネイル型でも対応することができます。

スマホ表示の場合は、ここで設定したCSSは影響されず（min-width: 1020px;となっているため）別で設定したカラム数が表示されます。

上記のCSSでは追加CSSに挿入した場合サイト全体に、各ページの カスタムCSS &JSに挿入した場合、そのページ全体に影響してしまうため、最大カラム数（PC）を3列に設定した場合、自動的にすべての投稿リストブロックが4列（4カラム）表示になってしまいます。

上で説明した通りにCSSを追加すると、サイト全体もしくは特定のページ全体に影響してしまいます。
それを解消するために、CSSにちょっと工夫をしてみます。

まず投稿リストブロックの設定画面の最下部にある「高度な設定 > 追加CSSクラス」に-pc-col4と追加します。
既にクラス名が割り振られていると思いますので、それは消さずに半角スペースで空けてからクラスを追加するようにしてください。

その後、先程のCSSに.-pc-col4を追加して、以下の通りに変更します。

/*-- リストブロック4カラム --*/
@media (min-width: 1020px) {
.-pc-col4 .-type-card.-pc-col3 .p-postList__item {
width: calc(100% / 4);
}
}

他の投稿リストブロックでも、PC表示を4カラムに設定したい投稿リストブロックのみにクラス名-pc-col4を追加すれば、4カラムにすることができます。

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

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

よかったらシェアしてね！