【CSSコピペで簡単】WordPressの箇条書きリストol・ulのデザインを変更する方法

Sponsored Link


WordPressの箇条書きリストのデザインを変更したい!

どうも、Linです。激走、みてます。

 

WordPressのサイトを運営していると、

箇条書きリスト(ol ul)のデザインを変更したい!

という瞬間があることでしょう。

何気に記事をかいていると頻出する要素なので、ここのデザインがかっこいいか悪いかでWordPressブログの将来の明暗を分けるといっても過言ではありません。

 

そこで今日は、新年早々、WordPressサイトのリストのデザインを変えまくっているぼくが、

WordPressサイトで箇条書きのデザインを簡単に変更する方法

をわかりやすくまとめてみました。

CSSのデザインコードをコピペするだけなので、WordPress初心者の方でも簡単にデザインを変更できるでしょう。

なお、執筆にあたり以下の超神記事を参考にさせていただきました。

  1. ulのデザイン変更
  2. olのデザイン変更

 

 

WordPressサイトのulリストのデザインを変更する方法

まずはリストのulのデザインですね。この箇条書きはご存知の通り、

順番は関係ない箇条書き(unorderd list)

のことで、このブログでは、

という感じで表示される要素ですね。

 

WordPressのサイトでは、これはぼく個人の好みなのですが、

記号+リスト要素

というデザインが気に入ってます笑 記号にはfontawesomeというサービスが提供している記号から好きなものを選び、あとは色を指定するだけの簡単なデザインですね。

 

Step1. CSSコードをコピペ

まずは、WordPressのstyle.cssというファイルに次のコードを貼り付けてみましょう。

 

Step2. Fontawesomeの記号を選ぶ

続いて、ulリストの前に表示する記号を選びます。

Fontawesomeという無料で使える記号のツールを利用するので、こちらのサイトからめぼしい記号を選んじゃいましょう。

選び方は簡単で、先ほどのページの「Search」という検索欄から自分が欲しいアイコンのキーワードを入力します。

wordpress 箇条書きリスト デザイン

今回は試しに「pen」のアイコンを探してみますね。

 

wordpress 箇条書きリスト デザイン

 

ウンウン。結構あるじゃないですか。

 

 

Step3. 記号をCSSで指定

めぼしい記号が見つかりましたら、詳細ページに遷移します。

そこで必要になってくるのが、

Unicode

という4つの数字・記号です。このペンのアイコンの例でいうと、

f040

がそれにあたりますね。

 

wordpress 箇条書きリスト デザイン

 

こいつを先ほどコピペしたCSSの「ul li:before」というセレクタの所の「content」というプロパティで指定してあげます。

content: “\ xxxx”;

という感じでxxxxに記号のユニコード4文字を打ち込めばオッケーです。

たとえば、penの記号にするときは、

になるわけですね。

 

 

Step4. 色の設定

あとはアイコンの色を設定します。色は「ul li:before」セレクタの「color」プロパティで指定していきますね。

サイトのメインカラーのカラーコードを打ち込めばオッケーです。

 

ってことで、以上の4ステップをまとめると、次のようなコードになりそうですね。

 

一旦、試しにWordPressのstyle.cssファイルにコードを追加してみましょう。

もし不具合が出たらそこをページを更新しながら修正していけば大丈夫です。

 

 

WordPressサイトのolリストのデザインを変更する方法

続いて、WordPressのolのデザインです。

olはordered listの略で、羅列の順番に意味がある箇条書きのことですね。このサイトでいうと、

  1. いち
  2. にい
  3. さん

という感じで表示される要素になります。

 

このWordPressのolのデザインは次の2ステップで終了です。

 

Step1. コードをとりあえず貼る

まずはWordPressのstyle.cssに下記のコードを貼り付けてみましょう。

 

Step2. 色を変更

あとはアイコンの色を変更するだけ。

変更箇所は、

ol liセレクタの「border-left」プロパティのカラーコードです。

という感じで、サイトのメインカラーなど設定した色をここで記述してあげましょう。

 

ここまで編集してやると、olのCSSコードは次のようになるはず。

 

 

記事以外のリスト要素もデザイン変わっちゃったんだけど!?

と、以上がWordPressサイトの箇条書きリストのデザイン変更方法でした。

CSSコードをstyle.cssにコピペするだけなので簡単なのですが、テーマによっては、

記事以外のパーツにもデザインが適用されてしまった!汗

なんて悲劇が起きてしまうでしょう。たとえば、ナビゲーションとかサイドバーとかフッターとかにですね。

 

そんなときは、

各セレクタの前に記事内容のクラス名をつけてあげればオッケーです。

たとえば、記事がarticle-bodyというブロックに入っていたら、「.article-body」というクラスのセレクタを追加して、

というように編集すればいいのですね(olの場合)。

 

これらのCSSコードはどのWordPressテーマを使っているかによって動くか動かないかなどの不具合が出ることがあります。

まずは一旦試しにCSSをstyle.cssにコピペしてみて、そこから不具合を修正するぐらいのスタンスでいきましょう。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる