【コピペだけ!】THE THORのリストをおしゃれにカスタマイズ!

【コピペだけ!】THE THORのリストをおしゃれにカスタマイズ!

 

ここあです!

 

最近、WordPressテーマ「THE THOR」の注目度も上がっており

2018年10月の発売以来、利用者も徐々に増えてきています。

そんな私も「THE THOR」のユーザーです。

 

とは言え、デザイン面に関しては

少しばかり不満があります…^^;

※そこはデザイナーの性なので、ごめんなさい(笑)

 

ということで、今回は私が少しだけ不満に思ってる

「THE THOR」のリスト表示をおしゃれにする方法

についてご紹介させていただきます。

 

なので、もしも私と同じように

「THE THOR」のリストデザインに不満がある場合は

ぜひ参考にしてくださいね^^

 

THE THORの番号なしリストはここが不満!

私が使っているこのテーマ「STORK」もそうですが

「THE THOR」も同様に「番号なしリスト」のデザインが

シンプルすぎて少し物足りないんですね^^;

 

↓STORKのデフォルトリスト

  • リスト表示
  • リスト表示
  • リスト表示

※黒丸だからショボくても、一応リストとしては分かる。

 

↓THE THORのデフォルトリスト

THE THOR リスト

※なぜ白丸?分かりにくくない?^^;

 

私はリスト表示というのを非常に重要視しています。

 

なぜなら、リスト表示は記事の要点を分かりやすくまとめ

読者に伝えるには欠かせない要素となるからです。

 

だからこそ、リストデザインはしっかりと整えたいし

番号なしリストも、せめてこの番号付きリストのように

存在感が欲しいわけです。※サンプルは「THE THOR」の番号付きリスト

THE THOR番号付きリスト

 

 

とは言え、THE THORには

リスト表示のデザインを変えることができる

「リストデザイン設定」というのがあります。

 

なので、ダッシュボードメニューから

外観 → カスタマイズ → パーツスタイル設定[THE]→ リスト設定で

設定を触れば、

 

確かにシンプルでも多少は存在感のある

リスト表示にすることは可能です。

THE THOR リスト

 

しかし私は、例えこのように背景が装飾できたとしても

この頭の白丸がどうしても分かりにくく納得できないんです^^;

わがままかっ!(笑)

 

ということで、THE THORのリスト表示を

可愛くおしゃれにするためのコードをご紹介致しますので

気になるコードがあれば「コピペ!」してぜひご活用ください^^

 

THE THORのリスト表示をおしゃれにする方法

まずはTHE THORのリスト表示を

おしゃれにする設定方法からご説明致します。

 

THE  THORをカスタマイズする場合は

外観 → テーマエディター をクリックし

ダッシュボードメニュー

 

 

以下のstyle-user.cssにコードを書く方法と

style-user.css

 

 

外観 → カスタマイズをクリックし

ダッシュボードメニュー

 

 

以下の追加CSSに書く方法と2つあります。

追加CSS

 

 

私は後者の外観 → カスタマイズ → 追加CSSに書く方が

おすすめなので、どちらでも良いというあなたは

追加CSSの方に記述するようにしてくださいね。

 

その方がプレビュー画面で見ながら

設定ができるので分かりやすいです^^

 

THE THORのおすすめリストデザイン

それではここからコピペだけで設定できる

THE THORのおすすめリストデザインをご紹介致します。

 

なお、今回ご紹介するコードは

あくまでもリスト表示の白丸を変更するコードなので

それ以外の設定は「リストデザイン設定」で行なってください。

 

右向き矢印のデザイン

チェックアイコンのリスト表示(1)

 

上記、右向き矢印のリスト表示に変更する場合は

以下のコードを追加CSSにコピペしてください。

.content ul > li::before {
font-family: "icomoon";
content: "\ea44";
transform: scale(.8);
}

.content ul li {
padding-left: 20px;
}

 

アイコンのカラーは特に設定しておりませんので

アイコンの色を変更する場合はダッシュボードメニューから

 

外観→カスタマイズ →パーツスタイル設定[THE]→リスト設定で行なってください。

リスト設定

 

また、アイコンによってはアイコンと文字が

近すぎるものがありますので

それを回避するためのコードも追加しています。

 

 

チェックアイコンのリストデザイン(1)

チェックアイコンのリストデザイン(2)

 

上記、チェックアイコンのリスト表示に変更する場合は

以下のコードを追加CSSにコピペしてください。

.content ul > li::before {
font-family: "icomoon";
content: "\ea12";
transform: scale(.8);
}

.content ul li {
padding-left: 20px;
}

 

 

チェックアイコンのリストデザイン(2)

チェックアイコンのリストデザイン(3)

 

上記、チェックアイコンのリスト表示に変更する場合は

以下のコードを追加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)

右向き三角のチェックリスト(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)

右向き三角のチェックリスト(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の「リストデザイン」

特に「番号なしリスト」のデザインを

分かりやくおしゃれにする方法をご紹介致しました。

 

ブログの記事は基本的に流し読みをされることが多く

そんな読者の目に止まるのは「見出し」や

「リストの部分」だと私は考えています。

 

なので、リスト表示は例え流し読みされても

読者に「要点がまとめてある部分」と

きちんと認識してもらいたいですし

 

要点を分かりやすく伝えることで

読者が気になったポイントだけでも

しっかりと読んでもらいたいと思っています。

 

だから私はリスト表示のデザインは重要だと思うし

リストのデザインを変更すべきだと思い

こうしてカスタマイズの方法をご紹介しました。

 

もちろん、それは私の主観でしかありませんが

それでもこんな私の思いに少しでも共感してくれる方が

いれば嬉しいです。

 

ということで、これからも少しずつ

THE THORのカスタマイズ記事を増やしていきますので

気になった方はぜひチェックしてくださいね^^

 

最後までお読みいただきありがとうございました!

 

リスト表示の変更はコピペだけでできるので

迷うことはないと思いますが^^;

 

もしも設定で分からないことがありましたら

お気軽にご相談くださいね。

「ここあ」に問い合わせをする

 

 

合わせて読みたい!

 

ネットで毎月30万円以上の自動収益を得ながら
「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●「デザインばか」のここあが半年で収益化したネットビジネスのノウハウ
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●ここあが副業にネットビジネスをすすめる理由
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●パソコン音痴でもパソコン一台で年収1000万円稼ぐ手法
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
●副業解禁の時代をナメているとこれからどうなってしまうのか?

などなど、掲載できるものだけをピックアップしてみました。

無料メール講座本編では、もっと秘匿性の高い内容もたくさん出していきます。

また、私がこれまで100万円以上投資して学んだ有料セミナーでしか手に入らない情報もコッソリ無料メール講座でお伝えしていきます。

※この無料メール講座は、有料講座で聞いた内容も多数含まれており、予告なく募集を終了する可能性があります。

ですので、募集している今のうちにプレゼントを受け取ってくださいね。

下記のボタンをクリックして

・「あなたのお名前
・「メールアドレス

を入力してご登録お願いします。

ここあ公式「LIFE DESIGN通信

お名前
メールアドレス

ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年に独立。現在はネットとデザインのスキルを活かし幅広い分野で活動中。己を磨き誠実に対応すれば、仕事や人脈、そして人生までも大きく変えることができる「ネットビジネスの素晴らしさ」、そして会社に頼らず「自分らしく生きる方法」をこのブログを通じて発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?