WordPressテーマ「SWALLOW」でリストマークを変更する方法

Listmark 00 ブログ

どうも、室井です。

今回はWordPressテーマ「SWALLOW」でリストマークを変更する方法を紹介します。

通常、SWALLOWで番号なしリストを表示するとこうなります。

Listmark 01

リストマークの色は「サイトカラー設定」の「記事ページ見出し(H2)背景」で設定した色が反映されます。

リスト単体で使用する場合は問題ありませんが、BOXを使用した際に色の組み合わせが気に入らないことがありますよね。

なので、こんな風に色と形を変更してみましょう。

Listmark 02

どのBOXと組み合わせても違和感がないように、濃いグレーに変更してみました。

CSSからリストマークを変更する

通常のテーマではリストマークの形を変更する際 list-style-typeプロパティを使用します。

しかし、SWALLOWでは list-style-typeプロパティを使用しても変更することができません
SWALLOWは list-style-typeプロパティが none(マーカーを表示しない)に設定されています。

つまり、リストマークに関する設定を記述している部分が他にあるということですね。

どこに記述されているのか探ってみると、style.css にそれらしい記述がありました。

コードの意味をザックリ解説すると、.entry-content でCSSの有効範囲を投稿記事に限定。

before を使うことで、<li></li>で囲った文字列の前に指定した文字を追加しています。

文字の指定をしているのが2~9行目です。

Font Awesomeというアイコンフォントのclass名を3行目の content で、
色を9行目の color で設定しています。

子テーマにこのコードをコピーして、content と color を書き換えましょう。
直接書き換えても変更できますが、テーマの更新時に戻ってしまうので非推奨です。

最初に紹介した濃いグレーの「>」に変更するなら、このようなコードになります。

HTMLカラーコードの後に !important を忘れずに追加してください。
「サイトカラー設定」の「記事ページ見出し(H2)背景」で設定した色の優先度が高いため、
!important で優先度を上げないと設定した色が反映されません。

これでリストマークが濃いグレーの「>」に変更されました。
変更が反映されない場合は、ブラウザのキャッシュを消去してみてください。

他のアイコンに変更する手順

今回は例として「>」に変更しました。
Font Awesome の2,000種類以上のアイコンから他のアイコンに変更することもできます。

  1. Font Awesomeのアイコン一覧ページを開く
    Listmark 03
  2. 使いたいアイコンをクリックして Unicode をコピーListmark 04
  3. content にコピーした Unicode をペースト

 

これでアイコンが変更されたはずです。
以上、「SWALLOW」でリストマークを変更する方法でした。

「SWALLOW」は非常に優秀なテーマですが、発売されたばかりなので情報が少ないですね。
「SWALLOW」利用者として調べたことはまとめていきたいです。