WordPressのリスト(箇条書き)をCSSで綺麗に表示しよう!

WordPress で記事を書いていると箇条書きで表現したい項目が出てきます。この時に利用できるのがリストです。投稿ページのビジュアルエディタで、番号なしリスト番号付きリストを選ぶと画像のようなリストを入力することができるようになります。

ビジュアルエディタ

テーマによって若干表示は変わりますが、なんかオシャレじゃないですよね。記事の中で強調したい部分なのにすごく地味というか。

この記事では CSS を利用して WordPress のリストを綺麗にする方法を紹介しますので、ぜひみなさんのブログでも試してみてください。

ちなみにこのブログではこんな感じになっています。爽やかなデザインでなかなかいいと思いませんか?

スタイルシートを追加するために


まずはスタイルシートを追加できる環境を作りましょう。このブログではテーマに依存しない形でスタイルシートを追加・編集するために、Simple Custom CSS and JS というプラグインの利用を推奨しています。

Simple Custom CSS and JS をインストールしていない方は、以下のページを参考にインストールしてみてください。

WordPressに自作のCSS・JavaScript・HTMLを追加するには?

もしなんらかの理由があってプラグインのインストールをしたくない場合は、ダッシュボード > 外観 > カスタマイズ内にある 追加 CSS を開いてスタイルシートを入力するようにしてください。

CSS で綺麗にする方法


1. スタイルシートを入力するフォームを開く

ダッシュボード > Custom CSS & JS > Add Custom CSS を選んでください。

 

2. スタイルシートのタイトルを入力する

画像赤線のフォームにスタイルシートのタイトルを入力します。この例では Stylish List というタイトルにします。これは自分が管理するためのタイトルなのでなんでも構いません。覚えやすいタイトルを入力しましょう。

 

3. スタイルシートを入力する

まずタイトルの下にあるフォームの /* */ に囲まれた赤文字の英文はすべて削除しましょう。そして以下のコードをコピーして貼り付けてください。

 

すごく長いですが、これはこのブログで使っているリストのスタイルシートです。スタイルシートを貼り付けた後、右側にある 公開 ボタンを押すと、あなたのブログで使っているリストのデザインが変更されます。

 

4. とりあえず完成!

ブログの記事内にリストを入力してみてください。このような表示になっていたらデザインの変更は成功です。

もっと他のデザインはないの?


すごくたくさんのリスト用スタイルシートを提供してくれているサイトがあるので、それを使わせてもらいましょう!実はこのブログで使っている青いデザインのリストも、以下のサイトのスタイルシートを使わせてもらっています。

上記のサイトにアクセスしてみてください。綺麗なリストが画像付きで紹介されています。自分のブログで使ってみたいと思うデザインがあったら、さきほど作成したスタイルシートを編集して貼り付けてみましょう。

 

ダッシュボード > Custom CSS & JS > All Custom Code

画像のページに移動したらさきほど作成したスタイルシートの欄にある 編集 と書かれた部分を押してください。入力フォームが出てきますので、現在入力されているコードをすべて削除して、気に入ったリストの CSS を代わりに貼り付けてください。

 

WordPress でリストのスタイルシートを利用するコツ

ol.sample1{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

ol.sample1 li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

ol.sample1 li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

例えばこのスタイルシートを WordPress で利用する場合、そのまま貼っても使えません。以下のように編集する必要があります。

 

.entry-content ol{
  counter-reset:list;
  list-style-type:none;
  font: 14px/1.6 'arial narrow', sans-serif;
  padding: 0px;
  border: solid 1px #F6A38B;
}

.entry-content ol li{
  position:relative;
  line-height: 30px;
  margin: 7px 0 7px 40px;
  padding-left: 10px;
  font-weight: bold;
  font-size:14px;
}

.entry-content ol li:before{
  counter-increment: list;
  content: counter(list);
  position: absolute;
  left: -35px;
  width: 30px;
  height: 30px;
  background: #F6A38B;
  text-align: center;
  color: #fff;
  top: 50%;
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

一番最初に .entry-content を追加して、ol.sample1.sample1 を削除しました。.entry-content というのは、WordPress の記事に使われるスタイルシートのクラス名で、その内部にある <ol> タグのデザインを変更するという意味になります。

.entry-content を追加しないと、テーマに使われているリストのデザインも一緒に変更されてしまうので、ブログのデザインが崩れてしまうことがあります。

また .sample1 を削除したのは、これがついているとスタイルシートを適用するときに、毎回 <ol class=”sample1″> という書き方をしなければならないためです。リストを表示する度にテキストエディタでそのコードを入力するのは大変なので、スタイルシートのクラス名は削除しています。

この説明はスタイルシートの知識がないと、ちょっと難しいかもしれませんね。とりあえず最初に .entry-content を追加して、.sample1 と書かれている部分を削除すると覚えていてください。これを行うだけで、WordPress で 上記サイトの CSS が使えるようになります。

最後に


リストのデザインはうまく変更できましたか?

リストのデザインを変更しておくと、リストがアクセントになって記事が華やかに見えるので、これはできるだけやっておきたいテクニックです。

もしどうしてもわからないことがあったらコメント欄で聞いてください。自分にわかることならお答えします!

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)