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

Sponsored Link


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

どうも、Linです。激走、です。

 

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

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

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

記事に頻出する要素なので、箇条書きのデザインの良し悪しがブログの明暗をわけるといっても過言ではありません。

 

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

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

を記念にまとめてみました。

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

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

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

 

 

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

まずはリストのulのデザインですね。

ulとは、

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

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

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

 

これはぼく個人の好みなのですが、

記号+リストの内容

というデザインが気に入ってます。このブログでは、

マウスのカーソル+リストの内容

というデザインに設定してみました。

記号にはfontawesomeというサービスから好きなものを選び、あとは色を指定するだけで簡単にデザインが可能です。

 

Step1. CSSコードをコピペ

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

 

Step2. Fontawesomeの記号を選ぶ

続いて、記号を選びます。

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というdiv要素に入っていたら、「.article-body」というクラスのセレクタを追加して、

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

 

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

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

 

それでは!

Lin

飯橋凛(Ihashi Lin)

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


Sponsored Link

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



もう1本読んでみる