WordPressテーマ「SWELL」のリストを階層化して子リストの装飾を消す方法

※当サイトにはプロモーションが含まれています。

クライアント

SWELLの「リストスタイル」で、子リストの装飾を削除してくれ！

にゃテック

おけまるだにゃ。

ワードプレス（WordPress）テーマのSWELL（スウェル）には、様々なリストスタイルが用意されています。

ただ、このリストを入れ子（ネスト）構造にした際に、子リストにも自動で装飾（赤い矢印の箇所）が適用されます。

そこで今回は、子リストを追加する方法と、SWELLで子リストの装飾を意図的に解除するCSSについて解説します。

SWELLのリスト項目を階層（入れ子）にする方法

子リストの装飾を意図的に解除するCSSを紹介する前に、まずはSWELLのリスト項目（リストスタイル）で、子階層を追加・削除する方法について説明しておきます。

リストに階層構造（入れ子）を持たせるには、対象のリスト項目を選択し、ブロックツールバーの「インデント」ボタンをクリックします。

この操作方法は、SWELLに限らず、“GOLD BLOG”や“JIN:R”など、他のWordPressテーマでも共通だと思います。

子リストの装飾を意図的に解除するCSS

それでは、SWELLで子リストの装飾を意図的に解除するCSSについてです。

SWELLでは、冒頭で触れたとおり、様々なリストスタイルが用意されています。

そして、このリストスタイルには、次のようなCSSクラスが付与されています。

今回は、これらのクラスに対して、子リスト側の:beforeを無効化して装飾を打ち消したいと思います。

その場合の記述は、次の通りです。

/* 子リストの ::beforeを無効化 */
.is-style-index > li > .wp-block-list > li::before,
.is-style-check_list > li > .wp-block-list > li::before,
.is-style-good_list > li > .wp-block-list > li::before,
.is-style-triangle_list > li > .wp-block-list > li::before,
.is-style-bad_list > li > .wp-block-list > li::before,
.is-style-num_circle > li > .wp-block-list > li::before {
content: none !important;
display: none !important;
}

/* 子リスト（ul）自体のマーカーと余白を調整 */
.is-style-index > li > .wp-block-list,
.is-style-check_list > li > .wp-block-list,
.is-style-good_list > li > .wp-block-list,
.is-style-triangle_list > li > .wp-block-list,
.is-style-bad_list > li > .wp-block-list,
.is-style-num_circle > li > .wp-block-list {
list-style: none;
padding-left: 0;
margin-left: -1em; /* 左右の余白調整 */
}

にゃのらいと

これを記述すると、子階層（２番目）の装飾が無効化されるにゃ。

なお、margin-left: -1em;の部分の数値を調整することで、左右の余白を調整できます。

にゃテック

もし、子階層（３番目の階層）の装飾を無効化したい場合は、下記のように記述します。

.is-style-num_circle > li > .wp-block-list > li > .wp-block-list >li::before {
content: none !important;
display: none !important;
}

このように、階層が1つ深くなるごとに、.wp-block-list > li がセレクタの途中に追加される形になります。

今回は、３階層目までを無効化したところ、次のような表示になりました。

にゃのらいと

・（中点）がなくなったにゃ。

CSSの記述する箇所

このCSSは「外観 ＞ カスタマイズ ＞ 追加CSS」に記述しても構いませんが、その場合は影響範囲が広くなってしまいます。

そのため、投稿ページや固定ページの下部にある「カスタムCSS＆JS」のCSS欄に記載する方法がおすすめです。

にゃテック

以上、子リストを追加（削除）する方法と、SWELLで子リストの装飾を意図的に解除する方法でした。

SWELLを効率的に学んで最速でサイトを作るには？

ワードプレステーマのSWELLを効率的に学んで、最速でサイトを作成するには、オンライン講座のUdemyで学ぶのが最適です。

「Udemy(ユーデミー)」は、世界中で人気のあるオンライン学習プラットフォームで、日本ではベネッセ（Benesse）と提携して運営をしています。

日本最大のオンライン学習のプラットフォームだけあって、ワードプレステーマのSWELLを学べる講座がいくつか用意されています。

※画像は講座へのリンクになっています

※画像は講座へのリンクになっています

なお、Udemyでは定期的にセールを開催しています。

セール時は通常価格より、90%以上の値引きされた価格で購入する事ができます。

新規受講生割引などがある場合もありますので、まずは公式サイトで確認してみてください。