THE THOR ザ・トール 丸を消す リストの行頭文字削除方法

タイトルではわかりづらいですが、以下のような症状。

 

普通にリストを使っているだけであれば特に問題になりません。

 

ワードプレスではオリジナルのメニューをつくることができます。

例えば↓

通常はこれをCSSでレイアウト整えて使いますよね。

そのとき、上記画像のようにリスト行頭文字の○が消えないのです。

 

THE THOR 丸を消す リストの行頭文字削除方法

 

クラス名を指定、または指定してあるクラス名を調べて利用します。

.content ul.クラス名 > li:before {
content:""
}

上記を追加CSSに記述。

クラス名を指定しないとサイト内全てのリスト行頭文字が消えてしまいます。

 

• 自分でリストを作るときには、必ずクラス名をつけて。
• プラグインなどの場合は自力でクラス名を調べる。

※カスタマイズは自己責任でお願いします。

 

この方法はTwitterでヒノ(@hinomotoooo)さんに教えていただきました。

THE THORのカスタマイズをモリモリするサイトを運営されています↓

https://customize.hinomotoo.com/thor

 

リストにIDが指定されている場合

プラグインなどによってはリストにIDが指定されています。

IDの場合は記述が変わって以下のようになります。

※ IDがsampleIDという名前の場合

#sampleID li:before {
content: "";
}

以上です。

 

カスタマイズは自己責任でお願いします。

 

リスト行頭文字〇が消えないワケ

 

その理由はわかりませんw

しかし僕がリスト行頭文字を消せなかった理由はわかります。

 

リスト行頭文字の消し方をググるとCSSが出てきます。

list-style: none;

いくら検索しても出てくるのはコレ↑やコレの画像対応バージョン。

これがTHORのリストには効きません。なぜ効かないのかは前述通りわかりません。

 

○が出てもサンプル画像のような感じなので本人が気にしなければ問題ないと言えばない。

 

THE THOR プラグインで丸が出る

 

自分でメニューを作る以外にも、画像付きで記事一覧などを出すプラグインなどを使用するときに、この症状が出ます。

これは相当困ります。

 

---

 

代表例として
AmazonのAssociates Link Builder（アマゾン アソシエイトリンクビルダー）です。

このプラグインを使用するとAmazonの商品リンクが簡単に格好良く作れるのですが、行頭文字が出てしまうのです。

見た目が悪いし、○の一文字分レイアウトにズレがでます。

 

Amazonアソシエイトリンクビルダーの〇を消す

参考までにアソシエイトリンクビルダーに使用したCSSを載せておきます。

クラス名は「aalb-400-pc-product-list」

/*Amazonリスト行頭削除*/
.content ul.aalb-400-pc-product-list > li:before{content:""}

役に立てば幸いです。

※カスタマイズは自己責任でお願いします。

 

あとがき

 

この○は色々な場面で出てきてしまいます。

現在のところ、そのつどクラス名をしらべて対処するしかありません。

クラス名は調べたいサイトで右クリックから検証を選び、地道に探し当てています。

検証の状態でCSSを書き換えテストすることもできるので（大変だけど）とても便利です。勉強にもなります。

 

THE THOR 記事一覧