本ページはプロモーションが含まれています

【CSS】コピペで簡単！ブログの箇条書き（リスト）をおしゃれにデザインする方法

公開日

こんにちは。岐阜の拠点から、今日もWeb制作とブログ運営のリアルな情報をお届けする当ブログです。

前回の蛍光ペンマーカーの解説に続き、今回はブログ記事の読みやすさを劇的に向上させる「箇条書き（リスト）」のカスタマイズについて解説します。

文章を分かりやすくまとめる際に必須のリストタグ（<ul> や <ol>）ですが、WordPressテーマの初期設定のままだと、無機質な黒丸（・）や単調な数字が並ぶだけで、少し味気ないと感じることはありませんか？

今回は、プラグインを使わず、追加CSSへのコピペだけで実装できる「チェックマーク」と「おしゃれな数字」のリストデザインをプロ目線で紹介します。管理しやすいシンプルなクラス名を採用しているので、今後のメンテナンスも安心です。

この記事でわかること

  • コピペで使える！チェックマークのリスト（ul）
  • コピペで使える！ステップ解説に便利な数字リスト（ol）
  • 記事内での具体的なHTMLの書き方

【ulタグ用】おしゃれなチェックマークのリスト

メリットや特徴を並べる際、黒丸（・）よりも「チェックマーク」の方が、読者にポジティブな印象を与え、視覚的にも整理されます。疑似要素（::before）を使ってチェックマークを作るCSSです。

1. 追加CSSに貼り付けるコード

/* チェックマークのリスト */
.list_check {
    list-style: none; /* デフォルトの黒丸を消す */
    padding: 0;
    margin: 0 0 1.5em;
}

.list_check li {
    position: relative;
    padding-left: 1.5em; /* チェックマークのスペースを確保 */
    margin-bottom: 0.8em;
}

.list_check li::before {
    content: '';
    position: absolute;
    left: 0.2em;
    top: 0.3em;
    width: 6px;
    height: 12px;
    border-right: 2px solid #4caf50; /* チェックマークの色（緑） */
    border-bottom: 2px solid #4caf50;
    transform: rotate(45deg); /* 四角の枠線を45度傾けてチェックに見せる */
}

2. 記事作成画面（HTML）での使い方

<ul> タグに class="list_check" を追加するだけで反映されます。

<ul class="list_check">
    <li>CSSだけで実装できる</li>
    <li>プラグイン不要でサイトが重くならない</li>
    <li>カラーコードを変えれば何色でも作れる</li>
</ul>

【olタグ用】手順解説に便利な丸枠の数字リスト

「〇〇の手順」といったステップを解説する際は、数字付きリスト（<ol>）が適しています。CSSの counter-increment を使うと、デフォルトの数字を非表示にして、デザイン性の高いオリジナルの数字を作り出すことができます。

1. 追加CSSに貼り付けるコード

/* 丸枠のおしゃれな数字リスト */
.list_num {
    list-style: none;
    counter-reset: num; /* カウンターをリセット */
    padding: 0;
    margin: 0 0 1.5em;
}

.list_num li {
    position: relative;
    padding-left: 2.2em;
    margin-bottom: 1em;
}

.list_num li::before {
    counter-increment: num; /* 数字を1つずつ増やす */
    content: counter(num); /* 数字を表示 */
    position: absolute;
    left: 0;
    top: 0;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    border-radius: 50%; /* 丸くする */
    background: #ffc107; /* 背景色（マスタードイエロー） */
    color: #fff;
    text-align: center;
    font-size: 0.9em;
    font-weight: bold;
}

2. 記事作成画面（HTML）での使い方

同様に、<ol> タグに class="list_num" を追加して使います。

<ol class="list_num">
    <li>検証ツールでクラス名を確認する</li>
    <li>追加CSSにコードを貼り付ける</li>
    <li>HTMLでクラスを呼び出す</li>
</ol>

まとめ：リストを整えると、記事はもっと読まれる

ブログの読者は、文章を「読む」というより「流し見（スキャン）」しています。そのため、視覚的に目に入るリスト（箇条書き）のデザインが整っているだけで、記事全体のクオリティと読みやすさが大きく向上します。

今回紹介したコードは、現場でもよく使う極力無駄を省いたシンプルな構造です。ぜひブログのテーマカラーに合わせて色（#4caf50 などの部分）を変更し、活用してみてください。

＼ 「CSSが上手く反映されない…」とお悩みの方はこちら ／

Web制作・ブログカスタマイズを相談する

※サイト全体のデザイン調整や、複雑なCSSの実装サポートも承っております。

一覧へ!