WordPressでリストの背景に色を付ける方法

  • このエントリーをはてなブックマークに追加

WordPressでブログを書いていると「リスト」を使用して項目をまとめたりすることが多いのではないかと思います。

このリストの背景の色が初期設定で透明になっている場合は、背景に色を付けることで、さらにリストが見やすくなります

コアラ
リストって結構使うよな

まずは色を付ける前と後のリストを比べてみましょう。

下図は「番号なしリスト」の初期設定で、背景色が設定されていない場合のリストです。

初期設定の番号なしリストのイメージ

このリストの背景に色を付けると下図のようになります。

背景に色をつけたリストのイメージ

リストの背景に色がない場合は文章に埋もれてすぐに区別が付きにくいですが、背景の色を付けることですぐにリストと文章を区別することができます

こまかい部分ですが、少しでも読みやすい文章にするためには大事な部分ではないでしょうか。色が違うと自然と目もとまりますからね。

ただし、このままだと余白が少なくて少しバランスが悪いので、WordPressでリストの表示位置を変更する方法で紹介している方法で、リストの表示位置を変更するとさらに読みやすくなると思いますので、参考にしてください。

今回はやっとこブログでも使用しているWordPressのテーマXeoryで「番号なしリスト」と「番号付きリスト」の背景に色を付ける方法をご紹介します。

他のテーマを使用している場合は変更箇所が違うかもしれませんが、変更する内容は一緒のはずなので、リストの箇所のcssを見て、変更箇所を確認してみてください。

1.リストとは

リストは下記のように項目を箇条書きにして見やすくするものです。

  • リストにすると
  • 項目が箇条書きになって
  • 見やすくなるよ

リスト表示にすると項目が箇条書きされて、分かりやすく要点を示すことができます。文章自体もわかりやすくなりますので、ブログや記事を読んでもらえる可能性もあがるはずです。

ごちゃごちゃしていて何処になにが書いてあるかわからない文章って、本当に読む気なくなりますからね。分かりやすく書くって大事です。

例えば下記のように伝えたい項目が沢山あると文章が分かりにくいですよね。

リンゴが好きだけどミカンも好きです。あとブドウとグレープフルーツやイチゴが好きで桃とメロンも大好きです。

これをリストを使用して「自分が好きな果物」と題して箇条書きにすると、下記のようになります。

  • リンゴ
  • ミカン
  • ブドウ
  • グレープフルーツ
  • イチゴ
  • メロン

どうでしょうか?リスト表示にした方が断然分かりやすいし伝わりやすいですよね。伝えたい項目やまとめたい項目が多い場合は、リスト表示を使用して分かりやすく要点を示すようにしましょう。

コアラ
ごちゃごちゃした文章は読む気なくなるよな

2.リストの種類

リストには「黒丸」「白丸」「四角」「番号」など色々と種類がありますが、WordPressテーマ「Xeory」で使用されるリストは

  • 黒丸(番号なしリスト)
  • 番号(番号付きリスト)

上記2つです。このふたつのリストは、ブログを書くときに上に表示されているアイコンから選択することができます。「黒丸(番号なしリスト)」と「番号(番号付きリスト)」という名前です。

この2つのリストを使用する場所と、使用した場合どのように表示されるのか、実際に比べてみましょう。

 

2-1.番号なしリスト

番号なしリストは「黒丸」のことです。上のアイコンから「番号なしリスト」をクリックすると使用することが可能です。

ブログの上のアイコンから、番号なしリストを選ぶ

番号なしリストで作成されたリストは下記のように項目の左側に「黒丸」が表示されたリストが作成されます。

番号なしリストの表示例

2-2.番号付きリスト

番号付きリストはその名の通り「番号」が付いたリストです。上のアイコンから「番号付きリスト」をクリックすると使用することが可能です。

ブログの上のアイコンから、番号付きリストを選ぶ

番号付きリストで作成されたリストは項目の左側に、1から順番に数字が表示されたリストが作成されます。

番号付きリストの表示例

WordPressテーマ「Xeory」で使用できるリストは、基本的にこの2つになります。

正直この2つがあれば大体は大丈夫です。とりあえずはこの2つで問題なく使っていけるんじゃないでしょうか。もちろんcssを追加すれば「四角」にしたり、「画像」を表示したりも可能です。

3.リストの背景に色を付ける

早速リストの背景に色を付けていきましょう。こちらはスタイルシートからcssと検索して変更する方法です。「いや、面倒くさいだろう、それは」という方は、4.コピペでリストの背景に色を付けるを参考にしてください。

まずはWordPressのトップページから「外観 → テーマの編集」をクリックしましょう。

WordPressのトップページから、外観→テーマの編集をクリック

次にスタイルシート(style.css)をクリックします。

スタイルシートをクリックする

この部分から変更箇所を検索して、cssを追記していきます。「番号なしリスト」と「番号付きリスト」では変更する箇所が違いますので、ひとつずつ説明していきます。

3-1.番号なしリストの背景に色を付ける

まずは「番号なしリスト」の背景の設定をしていきましょう。キーボードの「Ctrlキー」を押しながら「Fキー」を押して「.post-content ul」で検索をすると、下記の場所が表示されるはずです。

.post-content ulで検索する

この場所にcssを追記していきましょう。初期設定のcssは下記のようにリストのスタイルの設定だけ記載されています。

↓↓初期設定のcss↓↓


.post-content ul {
  list-style: disc;
}

ここに背景色を設定するcss「background-color」を追記していきます。

↓↓追加後のcss↓↓


.post-content ul {
  list-style: disc;
  background-color: #eee;
}

これで「番号なしリスト」の背景に色が付いているはずです。今回は薄いグレーの「#eee」を設定しましたが、好みで色は変更してください。

カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。

カラーピッカーで色を決める

3-2.番号付きリストの背景に色を付ける

次は「番号付きリスト」の背景色を設定していきましょう。キーボードの「Ctrlキー」を押しながら「Fキー」を押して「.post-content ol」で検索をすると、下記の場所が表示されるはずです。

先ほどの「番号なしリスト」の部分のひとつ下の部分ですね。

.post-content olで検索する

この場所にcssを追記していきましょう。こちらも初期設定のcssは下記のようにリストのスタイルの設定だけ記載されています。

↓↓初期設定のcss↓↓


.post-content ol {
  list-style: decimal;
}

こちらにも背景色を設定するcss「background-color」を追記していきます。

追加後のcss


.post-content ol {
  list-style: decimal;
  background-color: #eee;
}

 

これで「番号付きリスト」の背景にも色が付いているはずです。

4.コピペでリストの背景に色を付ける

いちいち「スタイルシート(style.css)」にcssを追記するのが面倒くさい。という方はコピペで背景色を設定してしまいましょう。カスタマイズの追記cssにコピペするだけでリストの背景に色をつけることが可能です。

コアラ
ぶっちゃけコッチの方が簡単

4-1.コピペする場所

まずはWordPressトップページから「外観 → カスタマイズ」を選択しましょう。

WordPressトップページから「外観 → カスタマイズ」を選択

下図の画面が出たら「追記css」をクリックしましょう。

「追記css」をクリック

下図の赤枠部分にコピペすればOKです。

cssをコピペする場所

4-2.コピペするcss

早速cssを追記していきましょう。「追記css」の部分にコピペするだけです。

右側に自分のサイトが表示されていますが、コピペすると右側のデザインがリアルタイムで変更されます。今回はリストの背景色なので、カラーコードを何度か変えてみて、納得のいく色になったら、上の「保存して公開」をクリックすればOKです。

コピペするcssは下記の通りです。「番号なしリスト」「番号付きリスト」の両方に背景色をつけていくので、両方に「background-color」を設定しています。

↓↓コピペ用css↓↓

.post-content ul,
.post-content ol{ 
  background-color: #eee;
}

これでリストの背景に指定したカラーコードの色が付いているはずですので、確認してみてください。

5.まとめ

以上が「WordPressでリストの背景に色を付ける方法(テーマ:Xeory)」です。

リストは項目をまとめるときによく使用するはずですので、文章の中にそのまま表示されるよりは、背景に色を付けて区別したほうが見やすくなるはずです。

自分のブログに合わせて背景色を設定して、少しでも読みやすいブログや文章を作成するようにしましょう。

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

スポンサーリンク
  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*