【THE THOR】コピペで簡単!リストのカスタマイズ12選!

箇条形式で情報を列挙する際に、よく使用されるのがリストです。

WordPressテーマには標準で、様々なリストのデザインが用意されています。

 

例えば、当サイトで使用しているテーマ「STORK」の場合、下記のようなデザインになります。

「STORK」のリスト

ちょっと地味ですよね・・・。

 

次に、こちらも人気テーマ「AFFINGER5」の場合、下記のようなデザインになります。

「AFFINGER5」のリスト

こちらも同じく地味になっています・・・。

 

最後に、当サイトで使用しているテーマ「THE THOR」の場合、下記のようなデザインになります。

「THE THOR」のリスト

白丸で印象は変わりますが、やっぱり地味です・・・。

WordPressテーマのリストは地味が標準なのでしょうか?笑

 

ということで、今回は「THE THOR」のリストをおしゃれにカスタマイズする方法をご紹介します。







 

リストの白丸を変更

白丸が地味なので、アイコンに変更してみます。

変更するアイコンはFontAwesomeというWebアイコンフォントです。

Webアイコンフォントとは?

フォントとして使用することができるアイコンです。

フォント扱いとなるので、CSSで色を変更したり、サイズを変更することも可能です。

 

「Font Awesome」の詳細は、下記記事でご紹介しております。

よろしければご覧ください。

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!のアイキャッチ画像

【Web知識不要】Font Awesome 5の使い方とカスタマイズ方法を解析!!

2018年2月17日

このFontAwesomeを使用したカスタマイズをいくつか用意しましたので、お好みに合わせて使用してください。

 

お好みのアイコンに変更

FontAwesomeを使用し、リストの白丸をお好みのアイコンに変更します。

箇条書きなので、例としてチェックリストのように変更してみます。

チェックリストに変更

.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f00c"; /* アイコンのUnicode */
	font-weight: 900;
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

もしアイコンを変更される場合は、Unicode「f00c」の箇所を変更します。

UnicodeはFontAwesome公式サイトのアイコン一覧から確認することができます。

アイコン一覧

 

アイコンを選択するとUnicodeが表示されますので、コピーしてコードに貼り付けてください。

Unicodeの確認画面

アイコンがリストに反映されれば、完了です。

 

アイコンのカラーを変更

リストのカラーはカスタマイズ画面から変更することができます。

リストカラーの変更画面

 

しかし、classを指定し、リスト毎にカラーを変更されたいという方も多いと思います。

そんな方のため、カスタマイズ画面から変更するのではなく、CSSでリストアイコンのカラーを変更できるコードを用意しました。

アイコンのカラーを変更

.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f075"; /* アイコンのUnicode */
	font-weight: 900;
	color: blue; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

カラーを変更される場合は、「color: blue;」の箇所を変更してください。

「#ff0000」などのカラーコードを指定することもできます。



コピペで簡単サンプルリスト

リストで使えそうなサンプルのリストを用意してみました。

コードをコピペするだけで、簡単に使用することができますので、ぜひご利用ください。

 

丸チェックリスト

丸チェックリスト

通常のチェックに加え、丸チェックにしたリストです。

カラーもピンクにし、可愛い感じにしています。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f058"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ff007f; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

四角チェックリスト

四角チェックリスト

先ほどの丸チェックから四角チェックに変え、雰囲気を変えています。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f14a"; /* アイコンのUnicode */
	font-weight: 900;
	color: #007fff; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

ブックマークリスト

ブックマークリスト

ブックマークのアイコンです。

チェックリストは重要事項を記載することも多いので、記憶に残す意味でもブックマークのアイコンにしてみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f02e"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ff7f00; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}



ブックリスト

ブックリスト

ブックのアイコンにし、少し賢明そうな感じを取り入れてみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f02d"; /* アイコンのUnicode */
	font-weight: 900;
	color: #008000; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

メモチェックリスト

メモチェックリスト

メモをする感じのアイコンで、リストにしてみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f044"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ff00ff; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

キューブリスト

キューブリスト

キューブのアイコンに変更し、楽しい感じのリストにしてみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f1b3"; /* アイコンのUnicode */
	font-weight: 900;
	color: #1e90ff; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}



羽ペンリスト

羽ペンリスト

暗めの羽ペンリストにし、格好良さを出してみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f56b"; /* アイコンのUnicode */
	font-weight: 900;
	color: #696969; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

ハートリスト

ハートリスト

ハートのアイコンにし、ピンクを基調としたサイトで使用できそうなリストにしました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f004"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ffc0cb; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

ハンドリスト

ハンドリスト

チェックとはまた異なり、指でポイントとする感じを出してみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f0a4"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ff0000; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}

 

ひらめきリスト

ひらめきリスト

電球マークを使用し、ひらめきの感じをリストにしてみました。


.content ul > li::before {
	font-family: "Font Awesome 5 Free"; 
	content: "\f0eb"; /* アイコンのUnicode */
	font-weight: 900;
	color: #ffff1e; /* アイコンのカラー */
	transform: scale(.8); /* アイコンのサイズ */
}

.content ul li {
	padding-left: 20px; /* テキストの位置 */
}






 

まとめ

WordPressテーマ「THE THOR」のリストをカスタマイズする方法について、ご紹介しました。

画像を使用することも可能ですが、Webアイコンフォントという便利なものがあります。

リストに画像を使用するのは、今日古くなっていると言っても過言ではありません。笑

FontAwesomeは無料で使用でき、さらにアイコンの数も日々増えています。

ぜひお好みのアイコンを探してみてください。

はらちゃん
標準のリストは正直なところ地味なので、デザインにこだわる方は変更してみてくださいね。

最後までお読み頂き、ありがとうございました。









コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です