箇条形式で情報を列挙する際に、よく使用されるのがリストです。
WordPressテーマには標準で、様々なリストのデザインが用意されています。
例えば、当サイトで使用しているテーマ「STORK」の場合、下記のようなデザインになります。
![「STORK」のリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list3.jpg)
ちょっと地味ですよね・・・。
次に、こちらも人気テーマ「AFFINGER5」の場合、下記のようなデザインになります。
![「AFFINGER5」のリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list4.jpg)
こちらも同じく地味になっています・・・。
最後に、当サイトで使用しているテーマ「THE THOR」の場合、下記のようなデザインになります。
![「THE THOR」のリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list5.jpg)
白丸で印象は変わりますが、やっぱり地味です・・・。
WordPressテーマのリストは地味が標準なのでしょうか?笑
ということで、今回は「THE THOR」のリストをおしゃれにカスタマイズする方法をご紹介します。
目次
リストの白丸を変更
白丸が地味なので、アイコンに変更してみます。
変更するアイコンはFontAwesomeというWebアイコンフォントです。
フォントとして使用することができるアイコンです。
フォント扱いとなるので、CSSで色を変更したり、サイズを変更することも可能です。
「Font Awesome」の詳細は、下記記事でご紹介しております。
よろしければご覧ください。
このFontAwesomeを使用したカスタマイズをいくつか用意しましたので、お好みに合わせて使用してください。
お好みのアイコンに変更
FontAwesomeを使用し、リストの白丸をお好みのアイコンに変更します。
箇条書きなので、例としてチェックリストのように変更してみます。
![チェックリストに変更](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list6.jpg)
.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公式サイトのアイコン一覧から確認することができます。
![アイコン一覧](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list9.jpg)
アイコンを選択するとUnicodeが表示されますので、コピーしてコードに貼り付けてください。
![Unicodeの確認画面](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list10.jpg)
アイコンがリストに反映されれば、完了です。
アイコンのカラーを変更
リストのカラーはカスタマイズ画面から変更することができます。
![リストカラーの変更画面](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list7.jpg)
しかし、classを指定し、リスト毎にカラーを変更されたいという方も多いと思います。
そんな方のため、カスタマイズ画面から変更するのではなく、CSSでリストアイコンのカラーを変更できるコードを用意しました。
![アイコンのカラーを変更](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list8.jpg)
.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」などのカラーコードを指定することもできます。
コピペで簡単サンプルリスト
リストで使えそうなサンプルのリストを用意してみました。
コードをコピペするだけで、簡単に使用することができますので、ぜひご利用ください。
丸チェックリスト
![丸チェックリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list11.jpg)
通常のチェックに加え、丸チェックにしたリストです。
カラーもピンクにし、可愛い感じにしています。
.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; /* テキストの位置 */
}
四角チェックリスト
![四角チェックリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list12.jpg)
先ほどの丸チェックから四角チェックに変え、雰囲気を変えています。
.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; /* テキストの位置 */
}
ブックマークリスト
![ブックマークリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list13.jpg)
ブックマークのアイコンです。
チェックリストは重要事項を記載することも多いので、記憶に残す意味でもブックマークのアイコンにしてみました。
.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; /* テキストの位置 */
}
ブックリスト
![ブックリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list14.jpg)
ブックのアイコンにし、少し賢明そうな感じを取り入れてみました。
.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; /* テキストの位置 */
}
メモチェックリスト
![メモチェックリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list15.jpg)
メモをする感じのアイコンで、リストにしてみました。
.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; /* テキストの位置 */
}
キューブリスト
![キューブリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list16.jpg)
キューブのアイコンに変更し、楽しい感じのリストにしてみました。
.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; /* テキストの位置 */
}
羽ペンリスト
![羽ペンリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list17.jpg)
暗めの羽ペンリストにし、格好良さを出してみました。
.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; /* テキストの位置 */
}
ハートリスト
![ハートリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list18.jpg)
ハートのアイコンにし、ピンクを基調としたサイトで使用できそうなリストにしました。
.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; /* テキストの位置 */
}
ハンドリスト
![ハンドリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list19.jpg)
チェックとはまた異なり、指でポイントとする感じを出してみました。
.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; /* テキストの位置 */
}
ひらめきリスト
![ひらめきリスト](https://giga-log.com/wp-content/uploads/2019/08/the-thor-list20.jpg)
電球マークを使用し、ひらめきの感じをリストにしてみました。
.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は無料で使用でき、さらにアイコンの数も日々増えています。
ぜひお好みのアイコンを探してみてください。
![](https://giga-log.com/wp-content/uploads/2018/02/72dpi-02-1.jpg)
最後までお読み頂き、ありがとうございました。