【WordPress】リストのデザインを見やすくする方法

WordPressで記事を書く際にリストのデザインが質素だなと思いオシャレな感じにしたいなと思いデザインを変更したのでその方法についてまとめようと思います。

他のブログやニュース記事などを見ているとリストのデザインが凝っているなと思いあれはどうやっているのか気になってました。

• WordPressのバージョン5.2.2
• テーマはStartMagazine

調査

cssを調整すれば、できるんだろうなと思っていましたが具体的にどのファイルを修正すればいいのかわからなかったので「WordPress + リスト + デザイン」ググって色々調べました。

参考にしたサイト

下記のブログが非常に参考になりました。

コピペで使えるリストデザイン34選：CSSで箇条書きをおしゃれに

タイトルにある通りほぼコピペでいけました。

いろんなデザインがあるので、気に入ったものをピックアップしてcssのコードを控えて置きました。

ピックアップしたデザイン

リスト

リストのデザインは肉球がかわいいかったので下記をピックアップしました。

番号付きリスト

番号付きリストのデザインはオレンジの差し色が良かったので下記をピックアップしました。

style.cssの修正

修正ファイル

※修正前にバックアップをとっておくことをオススメします。

wp-content/themes/start-magazine/style.css

リストのコード追加

↑で控えておいたコードに.entry-contentをつけるのがポイントです。

.entry-contentをつけると記事中のリストになるのでこれをつけないと色んな所にデザインが適用されてしまうので注意が必要です。

style.cssの末尾に以下のコードを追加してください。

    .entry-content ul {
  border: solid 2px #ff938b;
  background: #fffaf1;
  padding: 2em 2em 2em 2.3em;
  position: relative;
}
.entry-content li {
  margin-bottom: 15px;
}

.entry-content ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  font-size: 17px;
/*ポチ消す*/
  list-style-type: none!important;
}

.entry-content ul li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 700;
/*アイコン種類*/
  content: "\f1b0";
  position: absolute;
/*左端からのアイコンまで*/
  left : 1em; 
/*アイコン色*/
  color: #ff938b; 
}
    

番号付きリストのコード追加

↑のリストのコードの下に以下のコードを追加してください。

    .entry-content ol {
/*数字をリセット*/
  counter-reset:number; 
/*数字を一旦消す*/
  list-style-type: none!important; 
  padding: 0.3em 0.8em;
  border: solid 2px #ffb107;
}
.entry-content ol li {
  border-bottom: dashed 1px orange;
  position: relative;
  padding: 0.5em 0.5em 0.5em 30px;
  line-height: 1.5em;
}
.entry-content ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #ffb107;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.entry-content ol li:last-of-type {
/*最後のliの線だけ消す*/
  border-bottom: none; 
}
    

以上がリストのデザインを見やすくする方法でした。

デザインはサルワカさんのブログに色々あるのでデザインを変えて適用してみてください。

WordPressのリストのデザインを変更したいと思っている方が少しでも参考に慣れば幸いです。