【THE THOR】リストの〇を好きなアイコンに変更する方法(初心者でも簡単カスタム)

【THE THOR】を使用しているレイカです。

今回の記事では

【THE THOR】のリスト で標準でつく、先頭の〇を 好きなアイコンに変更する方法を説明いたします。

 
Eika
〇じゃなくてもっとかわいいものにしたい!

好きなアイコンに変更した結果はこんな形です。

 
Rei
♡にしました。
 

これからリストの〇を変更する方法を説明していきます。

※リストのデザインは、【外観】→【カスタマイズ】→【パーツスタイル設定[THE]】→【リスト設定】より設定してください。

※この記事で説明するのは、「番号なしリスト」のアイコン変更となります。

 
Rei
5分ぐらいで終わります。

【THE THOR】リストの〇を好きなアイコンに変更する方法(初心者でも簡単カスタム)

変更したい【THE THOR】の標準アイコンを選ぶ

【THE THOR】では標準で約500個ほどのアイコンが搭載されています。

下記のサイトより気になるアイコンを選んでください。

カスログ for THE THOR

THE THOR(ザ・トール)のオリジナルアイコンのUnicodeを一覧にしてまとめてあります。CSS の疑似要素などで…

変更したいアイコンが見つかったら、「Unicode」の名前をメモしてください。

【THE THOR】のリスト変更方法

【外観】→【カスタマイズ】を選択します。

【追加CSS】を選択します。

【追加CSS】に下記のコードをコピーして、ペーストしてください。

“ここにUnicodeを入れる”というところは、変更したいアイコンの「Unicode」を入れます。

.content ul>li:before {
font-family: icomoon;
content: “ここにUnicodeを入れる”;
}
 
Rei
以上でおしまいです。
 
Eika
アイコンの大きさを微調整したい場合は下へ

アイコンの大きさを変更したい場合

transform: scale(数字を入力) を追記することで、アイコンの大きさを変更できます。

.content ul>li:before {
font-family: icomoon;
content: “ここにUnicodeを入れる”;
transform: scale(数字);}

例) transform: scale(2) とした場合

 
Rei
かなり大きくなってしまいました。

私は1としています。

リストの文字の開始位置を調整したい場合

リスト左側からの文字の開始位置も調整できます。

上記のコードの下に、下記のコードをペーストしてください。

.content ul li {
padding-left: 25px;
}

例)リスト左側からの文字の開始位置「padding-left: 60px」とした場合

 
Rei
結構離れているのがわかりますでしょうか。

【THE THOR】リストの〇を好きなアイコンに変更する方法 まとめ

リストデザインが物足りなく悩んでいる方におすすめのカスタムとなります。

好きなように微調整してみてください。

 
Rei
初心者でも簡単にカスタムできます。

ぜひやってみてはいかがでしょうか?

では、また。

NO IMAGE

Reika Blog

『暮らしが楽になる便利グッズ』『ブログ運営』