ブログ運営・SEO・収益化に悩んだら「ナオログ」へ

【THE THOR カスタマイズ】目立つリスト24選【コピペ可】

WordPressテーマ「THE THOR」のリストカスタマイズ記事はじめました。

「THE THOR」のリストは、デフォルト(何もしてない)の状態だと【】になってるんで全然パンチ力が無いんですよね〜

THE THORのリスト

やっぱ、全然目立ってへんやん!

リストを頻繁に使うわたしにとってチョボが【】っていうのはどうしても納得できない点です。

「THE THOR」を利用している人正直みんな思ってんじゃ無いですか?思ったことないなら、あなたはセンスが・・・(ウソっす)

それでは、シャイなリストのチョボ【】を目立ちたがり屋のボーイに変更していきましょう!

THE THORのリストデザインを変更する方法

THE THORのリストのデザインを変更するのは追加cssを利用すればめっちゃ簡単です。

カスタマイズは自己責任でおねがいします!

ちなみにわたしが変更したリストのアイコンは です。

  • 目立ちすぎず目立つを兼ね備えてみた
  • よりいいでしょ
  • 他にもアイコンはいろいろあるよ

利用できるアイコンの種類はかなりの数がありますが、わたしが使いたいのはシンプルかつ目立つアイコン。

同じアイコンが使いたい方はこちらのコードを追加cssに貼り付けるだけで完了します。

.content ul>li:before { font-family: icomoon; content: "\ea1e";}

はい!めっちゃ簡単でしたね。

わたしと同じアイコンは嫌だって方は \a1e をほかのUnicodeに変更するだけでオールOK

オリジナリティに溢れたリストデザイン見してね。

アイコンリストのUnicodeは、ヒノさんがたくさん紹介してくれているので参考にどうぞ

カスログ for THE THOR

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

ちなみに上のコードを貼り付けるとサイズ感や配置感に多少の違和感が出るので、最終的に貼り付けたコードがこちらです。

.content ul>li:before { font-family: icomoon; content: "\ea1e"; top: .05em; transform: scale(1.2);}

これでリストと文章の距離感や上下の配置感も調整できているかなと思います。

THE THORのリストカラーを変更する方法

リストのカラーをcssで変更することも可能ですが、THE THORには様々なパーツをカスタマイズする機能が付いているので色については本来の機能で設定していきましょう。

とは言っても、THE THORのカスタマイズは細かすぎて設定できる場所がどこにあるのかを見つけるのも一苦労。

下の手順で設定していきましょう。

リストのカラー設定

【外観】→【カスタマイズ】→【パーツスタイル設定】→【リスト設定】

リストのカラー設定

リストデザイン設定のデザイン選択でリストの背景等も設定できますが、マーク部分のカラー設定を行ったら完了です。

THE THORのリストのコピペデザイン

ここからはコピペだけで変更できるようにTHE THORのオリジナルアイコンの中から23種類のリストデザインを紹介していきます。

リストとして使えそうなモノはすべて用意できたかなと思います。

:右向きの指指し

右向き指のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9b8"; transform: scale(.9);}

:右向きのサークル

右向き指のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea44"; transform: scale(.9);}

:細めの右矢印

細めの右矢印リストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea3e"; transform: scale(.9);}

:太い右矢印

太い右矢印のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea36"; transform: scale(.9);}

:吹き出し

吹き出しのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e974"; transform: scale(.9);}

:吹き出し(中抜き)

吹き出し(中抜き)のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea87"; transform: scale(.9);}

:羽ペン

羽ペンのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e90e"; transform: scale(.9);}

:スピーカー

スピーカーのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e923"; transform: scale(.9);}

:ハート

ハートのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9db"; transform: scale(.9);}

:パックマン

パックマンのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e91f"; transform: scale(.9);}

:星マーク

星マークのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9da"; transform: scale(.9);}

:ファイル

ファイルのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e92f"; transform: scale(.9);}

:押しピン

押しピンのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e94f"; transform: scale(.9);}

:かみなり

かみなりのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9bb"; transform: scale(.9);}

:クリップボード

クリップボードのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9be"; transform: scale(.9);}

:大きい丸

大きい丸のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea56"; transform: scale(.9);}

:チェックマーク

チェックマークのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea12"; transform: scale(.9);}

:くり抜きチェックマーク

くり抜きチェックマークのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea13"; transform: scale(.9);}

:四角の中にチェック

四角の中にチェックのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea53"; transform: scale(.9);}

:ロケット

ロケットのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9ab"; transform: scale(.9);}

:丸の中に三角

丸の中に三角のリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea17"; transform: scale(.9);}

:ボリューム

ボリュームのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\ea28"; transform: scale(.9);}

:スマイル

スマイルのリストサンプル
.content ul>li:before { font-family: icomoon; content: "\e9e2"; transform: scale(.9);}

シンプルなリストも

シンプルなリストの表示のcssの質問がありましたので最後に紹介しておきます。

  • 結局シンプルなリストが一番?
  • 記事の内容を充実させるのが良いよね
  • リストはあくまで補助的な役割
.content ul>li:before { font-family: icomoon; content: "●"; color:#323232; top: -.05em; transform: scale(0.9);}

THE THORのリストデザインを変更する方法:まとめ

今回はわたしが利用しているWordPressテーマ「THE THOR」のリストのデザインを変更していきました。

リストはブログ運営していると頻繁に利用するものです。特に重要なポイントなどリストにしていると読まれやすい部分になりますので、ぜひ皆さんも目立たせられるアイコンを利用しましょう!

わたしが変更したリストのアイコンも含めて24種類を紹介したのでぜひ参考にしてみてください。

最新情報をチェックしよう!