THE THORのリストをカスタマイズ【コピペだけでOK】

こんにちは、 maruchi です。

今回は、昨今注目の「THE THOR」のリスト表示をカスタマイズについて紹介したいと思います。

デフォルトのリストでも問題ない方もいらっしゃると思いますが、ちょっとでもデザイン良くすることで、読み手にも伝わりやすくなったりします。

記事を読んでもらうためにもデザインは重要な要素になります。

この記事では、リストのデザインを変更するために、CSSのカスタマイズをするのですが、コピペするだけでOKなので簡単に変更できるようにしています。

そもそも「THE THOR」について詳しく知りたい方はこちらの記事も参考にしてください。

関連記事

WordPressテーマ「THE THOR（ザ・トール）」をおすすめする理由とは？

こんにちは、maruchiです。   今回の記事は、「THE THOR（ザ・トール）」というWordPressのテーマについてです。   有料のWordPressのテーマですが、この「THE TH[…]

THE THORのリストとは？

THE THORのリストは、デフォルトではデザインがいまいちと思う方も多いかと思います。

それがこちらです。

デフォルトのリスト表示はシンプルすぎて要点をまとめているはずなのに、わかりにくい（伝わりにくい）と感じています。

記事の中でも目立つ要素なので、リスト表示のデザインには読み手に伝わるようなしっかりとしたデザインにしたいですよね。

THE THORのリスト表示は、CSSにコードを追加するだけでおしゃれなデザインに変更することができます。

そのカスタマイズ方法について紹介しますね。

THE THORのリストをカスタマイズする方法

まずはリストをどこでカスタマイズするかについて手順を紹介します。

WordPressの管理画面から、

1. [外観]
2. [カスタマイズ]
3. [追加CSS]

この順番にクリックします。

すると以下のような画面が出てくるので、そこに変更したいコードをコピペするだけです。

やることはこれだけです。意外と簡単ですよね。

追加CSSに以下で紹介しているコードをコピペするだけで、リスト表示をカスタマイズすることが可能です。

THE THORのリストデザイン10選

リスト表示のデザインを10個まとめました。

こちらにあるものはコードも記載していますので、それをコピペするだけでデザイン変更することが可能です。

細かな調整も可能で、カラーやサイズ、幅調整という感じで、ブログに適したかたちで微調整もできます。

チェックアイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: “icomoon”;
content: “\ea12 “;/*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9);/*サイズ*/
}
.content ul li {
padding-left: 30px;/*幅調整*/
}

右矢印アイコン 1

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: “icomoon”;
content: “\ea36”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

右矢印アイコン 2

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e972”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

右三角アイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\ea44”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

右向き手アイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\ea06”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

スターアイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e9d8”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

鉛筆アイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e90d”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

羽アイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e90e”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

ホームアイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e905”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

¥マークアイコン

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加CSSにコピペすると変更できます。

追加CSS コピペ

.content ul > li::before {
font-family: ‘icomoon’;
content: “\e947”; /*Unicode*/
color: #000000; /*カラー*/
transform: scale(.9); /*サイズ*/
}
.content ul li {
padding-left: 30px; /*幅調整*/
}

他のアイコンが気になる方は、こちらのサイトで好みのアイコンを探しましょう。

THE THORのリストをカスタマイズ方法のまとめ

THE THORのリストのカスタマイズ方法を紹介しました。

読者に伝わりやすいリストにカスタマイズすることで、記事も読んでもらえるものに変わると考えています。

アイコンもたくさんあるので、自分にあったアイコンを設定し、ブログデザインをおしゃれにするために役立ててもらえればと思います。

今回は、番号がないリストのカスタマイズ方法を紹介しましたが、以下にて番号があるリストのカスタマイズ方法も紹介していますので気になる方はご覧ください。

Coming Soon