節約・節税・収入源の多角化戦略なら『せつやる』へ

【コピペ】THE THORのおしゃれなリストサンプル24種

ブログノウハウ
悩みもの
悩みモノ
ワードプレステーマの「THE THOR」のリストってなんか【◦】がインパクト無さすぎじゃないですか？おしゃれで目立つリストに変更したい！

今回はこんな悩みを解決する記事です。

 この記事の内容　

  • WorｄPressテーマ「THE THOR」のリストデザインの変更方法
  • WordPressテーマ「THE THOR」のリストカラーの変更方法
  • コピペだけでOKなリストデザイン24種類

WordPressテーマ「THE THOR」のリストは、デフォルトの状態だと【◦】になっているのでシンプルすぎます。

リストは記事の結論を伝えたりするため頻繁に使う機会があるので、少しでも目立つようなリストに変更したいところですよね。

そんなシャイなリストの【◦】を目立ちたがり屋のボーイに変更していきましょう！

なお
THE THORのカスタマイズの更新情報はTwitter （@naobebe7）で案内しているのでフォローしてね
目次

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

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

WordPressテーマ「THE THOR」のリストのデザインを変更するのは追加cssを利用すればとても簡単です。

  • ⇐目立ちすぎず目立つを兼ね備えてみた
  • 【◦】よりいいでしょ
  • 「THE THOR」のオリジナルアイコンすべて使えるよ！

わたしが使いたかったのはシンプルだけど目立つアイコンだったので【✔】を使っています。

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

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

わたしと同じアイコンは嫌だって方は \ea12 を他のUnicodeに変更すれば自由にリストを変更することができます。

「THE THOR」のオリジナルアイコンのUnicodeは、ヒノさんの記事で紹介されているので好きな物を選んでみてくださいね。

サイズや位置を調整したのがこちら 

.content ul>li:before {
font-family: icomoon;
content: "\ea12";
top: 0.0em;
transform: scale(0.9);
}

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


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」のリストデザインの変更のあとはカラーを変更していきましょう。

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

とはいえ、WordPressテーマ「THE THOR」のカスタマイズは設定箇所が細かすぎるので見つけるのも一苦労。

下の順に進んでいくとリストのカラー設定がきます

【外観】→【カスタマイズ】→【パーツスタイル設定】→【リスト設定】
※画像クリックで拡大できます！

THE THOR「リストカラー」設定画面①

　

THE THOR「リストカラー」設定画面②

　

THE THOR「リストカラー」設定画面③

　

THE THOR「リストカラー」設定画面④

基本設定の場合はカラーＡを変更するとリストデザインの色が変更されます。

THE THORのリストデザインを変更：まとめ

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

リストはブログ運営していると頻繁に利用するものです。

特に重要なポイントなどリストにしていると読まれやすい部分になりますので、ぜひ皆さんも目立つアイコンを使ってみてはいかがでしょうか？

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

ブログノウハウの最新記事4件