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

こんにちは、 maruchi です。

 

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

 

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

 

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

 

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

 

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

関連記事

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

the_thor_osusume

 

 

THE THORのリストとは?

 

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

 

それがこちらです。

 

the_thor_list_123

 

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

 

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

 

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

 

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

 

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

the_thor_list2

 

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

 

WordPressの管理画面から、

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

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

 

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

 

the_thor_list_css

 

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

 

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

 

 

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

 

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

 

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

 

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

 

color: #000000; /*カラー*/
#000000 → この部分を変更するとカラーを変えられます。
transform: scale(.9);/*サイズ*/
9 → この部分を変更するとサイズを変えられます。
padding-left: 30px;/*幅調整*/
30 → この部分を変更するとアイコンとテキストの間隔を変えられます。

 

チェックアイコン

the_thor_list_ea12

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

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

 

右矢印アイコン 1

the_thor_list_ea36

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

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

 

右矢印アイコン 2

the_thor_list_e972

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

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

 

右三角アイコン

the_thor_list_ea44

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

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

 

右向き手アイコン

the_thor_list_ea06

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

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

 

スターアイコン

the_thor_list_e9d8

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

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

 

鉛筆アイコン

the_thor_list_e90d

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

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

 

羽アイコン

the_thor_list_e90e

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

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

 

ホームアイコン

the_thor_list_e905

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

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

 

¥マークアイコン

the_thor_list_e947

こちらのアイコンにリスト表示を変更する場合は、以下のコードを追加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

Advertising