記事の中に箇条書きを使うことってよくあると思います。その箇条書きをもっとキレイなデザインにしたいと思ったことありませんか?私も以前はデフォルトのままでしたが、ただの黒丸で味気ない感じです。これを装飾するために何時間もかけてしまってはモッタイナイですが、実はサクッと簡単に編集できます。今回はCSSを編集して装飾する方法を紹介します。まとめ:WordPressの箇条書きをCSSで装飾するスポンサーリンク味気ない箇条書きのリストタグが、簡単な編集でこんなに変わるデフォルトの箇条書きってこんな感じです。WordPressの素のリストタグただの•を並べる箇条書き意外と簡単に装飾出来るこれだとちょっと味気ない、無機質な感じがしますよね。書くなら、もっとキレイに見せたいと思うかもしれません。私が今使っている装飾だと、こんな感じです。気に入っていて、しばらくこれで行こうと思います。WordPressの素のリストタグただの「•」を並べる箇条書き意外と簡単に装飾出来るとはいえ、私も最初はWebsite-Noteで記事を書き始めてからしばらく、デフォルトの「•」そのままの箇条書きでした。同じ内容なら、デフォルトよりもキレイに装飾したほうが、訪問者の印象もいいです。ここで間違えちゃいけないのが、デザインをキレイにしようと思って何時間も何日も費やしてしまうことです。記事を書くための時間を、最初から何時間もデザインのために使ってしまうのはとてももったいないこと。1記事でも多くの記事を書けと、先輩方からよくアドバイスされました。デザインに最初から100%を求めず、80%OKなラインまでサクッと持っていけば良しとするのが良いでしょう。リストのタグにはulタグ、olタグ、liタグがあるulタグとかolタグって、WordPressだと記事編集するとこの上のほうに表示されるやつです。ulタグを使うとこんな感じです。ulタグの代わりにolタグで囲むと、箇条書きが数字の連番になります。リストタグをCSSで装飾するまずはCSSにこのソースを追加してみてください。#0055B2;}そして、HTML側はこんな感じです。class="odd">意外と簡単に装飾出来る</li></ul>そうするとこのデザインになります。枠を付けて、文字の色を若干変えただけでだいぶん印象が変わりますね。リストタグに枠を付ける色を変える意外と簡単に装飾出来るデザインは1から考えず、コピペできるものを使うしっかりWebデザインを勉強している方なら別ですが、初めから全部考えてサイトを作るには時間がかかりすぎます。その時間は記事を書くための時間に充てるべき。サンプルを公開しているサイトから、欲しいデザインのCSSを拾って適用するのが簡単です。私がいつも活用しているサイトはこちらです。コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれにFontAwesomeで文字化けするときは太字にしてみる色んなサイトのサンプルのCSSには、必ずと言っていいほどFontAwesomeというWebフォントが利用されています。このサイトでも使わせてもらっています。厄介なのが、このFontAwesome、文字化けすることがあるんです。私もh2の見出しを編集するとき、文字化けに悩みました。解決方法は、FontAwesomeを使うところに、太字にするタグを入れるだけです。bold;もしFontAwesomeのフォントが文字化けして上手く表示されなかったら試してみてください。これでも反映されなければ、必要な設定が足りていないのかもしれません。コチラの記事を参考にしてみてください。Awesome入れたら文字化けするときの対処法スポンサーリンクまとめ:WordPressの箇条書きをCSSで装飾するCSSを使って箇条書きのulタグなどを編集する方法でした。試行錯誤して上手く表示されたときは嬉しいものですが、出来れば記事を書くのを優先したいですよね。CSSを編集するのが難しければ、プラグインを使う方法もあります。簡単なのは、最初からステキなデザインが用意されているJINというテーマを使うことです。有料テーマですが、デザインに悩む時間を手軽に買えると考えれば安くて効果の高い投資かもしれません。個人的には自分でデザインをいじる楽しさを知ってほしいですけども。言いながら、私も次のサイトはJINを使う予定です。あのデザインがいい感じですし。箇条書きのデザインをいじってみようかなーと思ったら、参考にしてみてくださいね。管理人プロフィールアラサーの独身で、都内でシステムエンジニアをしつつサイトを運営しています。趣味はブログとMMO(ネトゲ)とサイクリングです。彼女と遠距離恋愛真っただ中です。役に立つWeb関連の記事をマイペースに更新中です。詳しい管理人プロフィールはこちらです。WiMax2+のキャッシュバックを受け取りました【Anime】2020年冬おすすめアニメ「痛いのは嫌なので防御力に極振りしたいと思います。2018Website-Note。