ここあです！
最近、WordPressテーマ「THE THOR」の注目度も上がっており
2018年10月の発売以来、利用者も徐々に増えてきています。
そんな私も「THE THOR」のユーザーです。
とは言え、デザイン面に関しては
少しばかり不満があります…＾＾；
※そこはデザイナーの性なので、ごめんなさい（笑）
ということで、今回は私が少しだけ不満に思ってる
「THE THOR」のリスト表示をおしゃれにする方法
についてご紹介させていただきます。
なので、もしも私と同じように
「THE THOR」のリストデザインに不満がある場合は
ぜひ参考にしてくださいね＾＾
THE THORの番号なしリストはここが不満！
私が使っているこのテーマ「STORK」もそうですが
「THE THOR」も同様に「番号なしリスト」のデザインが
シンプルすぎて少し物足りないんですね＾＾；
↓STORKのデフォルトリスト
※黒丸だからショボくても、一応リストとしては分かる。
↓THE THORのデフォルトリスト
※なぜ白丸？分かりにくくない？＾＾；
私はリスト表示というのを非常に重要視しています。
なぜなら、リスト表示は記事の要点を分かりやすくまとめ
読者に伝えるには欠かせない要素となるからです。
だからこそ、リストデザインはしっかりと整えたいし
番号なしリストも、せめてこの番号付きリストのように
存在感が欲しいわけです。※サンプルは「THE THOR」の番号付きリスト
とは言え、THE THORには
リスト表示のデザインを変えることができる
「リストデザイン設定」というのがあります。
なので、ダッシュボードメニューから
外観 → カスタマイズ → パーツスタイル設定［THE］→ リスト設定で
設定を触れば、
確かにシンプルでも多少は存在感のある
リスト表示にすることは可能です。
しかし私は、例えこのように背景が装飾できたとしても
この頭の白丸がどうしても分かりにくく納得できないんです＾＾；
わがままかっ！（笑）
ということで、THE THORのリスト表示を
可愛くおしゃれにするためのコードをご紹介致しますので
気になるコードがあれば「コピペ！」してぜひご活用ください＾＾
THE THORのリスト表示をおしゃれにする方法
まずはTHE THORのリスト表示を
おしゃれにする設定方法からご説明致します。
THE THORをカスタマイズする場合は
外観 → テーマエディター をクリックし
以下のstyle-user.cssにコードを書く方法と
外観 → カスタマイズをクリックし
以下の追加CSSに書く方法と２つあります。
私は後者の外観 → カスタマイズ → 追加CSSに書く方が
おすすめなので、どちらでも良いというあなたは
追加CSSの方に記述するようにしてくださいね。
その方がプレビュー画面で見ながら
設定ができるので分かりやすいです＾＾
THE THORのおすすめリストデザイン
それではここからコピペだけで設定できる
THE THORのおすすめリストデザインをご紹介致します。
なお、今回ご紹介するコードは
あくまでもリスト表示の白丸を変更するコードなので
それ以外の設定は「リストデザイン設定」で行なってください。
右向き矢印のデザイン
上記、右向き矢印のリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- 追加CSSにコピペ
.content ul > li::before {font-family: "icomoon";content: "\ea44";transform: scale(.8);}.content ul li {padding-left: 20px;}
アイコンのカラーは特に設定しておりませんので
アイコンの色を変更する場合はダッシュボードメニューから
外観→カスタマイズ →パーツスタイル設定［THE］→リスト設定で行なってください。
また、アイコンによってはアイコンと文字が
近すぎるものがありますので
それを回避するためのコードも追加しています。
チェックアイコンのリストデザイン（1）
上記、チェックアイコンのリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- 追加CSSにコピペ
.content ul > li::before {font-family: "icomoon";content: "\ea12";transform: scale(.8);}.content ul li {padding-left: 20px;}
チェックアイコンのリストデザイン（2）
上記、チェックアイコンのリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\ea53";padding-right:10px;transform: scale(1.0);}.content ul li {padding-left: 20px;}
星マークのリストデザイン
上記、星マークのリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\e9da";transform: scale(.8);}.content ul li {padding-left: 20px;}
星マークのリスト表示にする時は、マークのカラーカードを
#ffbd23とするとサンプルの画像と全く同じ色になります。
右向き三角のリストデザイン（1）
上記、右向き三角のリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\ea17";padding-right:10px;transform: scale(1.0);}.content ul li {padding-left: 20px;}
右向き三角のリストデザイン（2）
上記、右向き三角のリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\ea1e";padding-right:10px;transform: scale(1.0);}.content ul li {padding-left: 20px;}
葉っぱアイコンのリストデザイン
上記、葉っぱアイコンのリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\e9aa";padding-right:10px;transform: scale(1.0);}.content ul li {padding-left: 20px;}
葉っぱの色はあなたが好きな色に設定してくださいね。
指差しアイコンのリストデザイン
上記、指差しアイコンのリスト表示に変更する場合は
以下のコードを追加CSSにコピペしてください。
- タイトル
.content ul > li::before {font-family: "icomoon";content: "\ea06";padding-right:10px;transform: scale(1.0);}.content ul li {padding-left: 20px;}
以上、全8種類。リスト表示に使えそうな
CSSコードをご紹介しましたので
ぜひTHE THORの「リストデザイン設定」と組み合わせ
おしゃれで可愛く、見た目にも分かりやすい
リスト表示を作ってみてくださいね。
リストアイコンの設定方法
リスト用のコードをコピペしても
「微調整したい！」という方は絶対にいるはずです＾＾
ということで簡単に調整方法だけご説明致しますので
「自分が思ってたバランスと違う！」と思ったあなたは
ご自身でご調整ください！調整方法は簡単なので。
どのCSSコードにも必ず
transform: scale(1.0);やtransform: scale(0.8);
などと書かれた部分があります。
ここがリストアイコンのサイズ調整のコードとなります。
なので、アイコンサイズを大きくしたい場合は
transform: scale(1.0); → transform: scale(1.2);としたり
逆にアイコンサイズを小さくしたい場合は
transform: scale(1.0); → transform: scale(0.8);に
したりしながら調整してみてください。
そして、アイコンサイズを微調整すると
アイコンと文字との間隔もバランスが崩れますので
そんな時は
下記コードの
.content ul li {padding-left: 20px;←ここで隙間を調整}
padding-left: 20px;の20pxの数字を30px;など
数字を大きくしながら間隔を広げてみてください。
もちろん15px;にすれば、逆に間隔は縮まりますので
文字とアイコンの間隔はあなたが「ちょうど良い！」と思う
絶妙なバランスで調整してみてくださいね＾＾
以上が、リストアイコンの大きさと文字との間隔を
調整する方法です。
調整するコードさえ分かれば
数字を変更するだけなので初心者のあなたでも
十分できると思います＾＾
THE THORのリストをおしゃれにする方法まとめ
今回はTHE THORの「リストデザイン」
特に「番号なしリスト」のデザインを
分かりやくおしゃれにする方法をご紹介致しました。
ブログの記事は基本的に流し読みをされることが多く
そんな読者の目に止まるのは「見出し」や
「リストの部分」だと私は考えています。
なので、リスト表示は例え流し読みされても
読者に「要点がまとめてある部分」と
きちんと認識してもらいたいですし
要点を分かりやすく伝えることで
読者が気になったポイントだけでも
しっかりと読んでもらいたいと思っています。
だから私はリスト表示のデザインは重要だと思うし
リストのデザインを変更すべきだと思い
こうしてカスタマイズの方法をご紹介しました。
もちろん、それは私の主観でしかありませんが
それでもこんな私の思いに少しでも共感してくれる方が
いれば嬉しいです。
ということで、これからも少しずつ
THE THORのカスタマイズ記事を増やしていきますので
気になった方はぜひチェックしてくださいね＾＾
最後までお読みいただきありがとうございました！
