WordPressの箇条書きリストのデザインを変更したい！
どうも、Linです。激走、です。
WordPressのサイトを運営していると、
箇条書きリスト（ol ul）のデザインを変更したい！
という瞬間があることでしょう。
記事に頻出する要素なので、箇条書きのデザインの良し悪しがブログの明暗をわけるといっても過言ではありません。
そこで今日は、新年早々、WordPressサイトのリストのデザインを変えまくったぼくが、
WordPressサイトで箇条書きのデザインを簡単に変更する方法
を記念にまとめてみました。
CSSのデザインコードをコピペするだけなので、WordPress初心者の方でも簡単にデザインを変更できるでしょう。
なお、執筆にあたり以下の超神記事を参考にさせていただきました↓
- ulのデザイン変更
- olのデザイン変更
WordPressサイトのulリストのデザインを変更する方法
まずはリストのulのデザインですね。
ulとは、
順番は関係ない箇条書き（unorderd list）
のことで、このブログでは、
- あ
- い
- う
- え
- お
という感じで表示される要素ですね。
これはぼく個人の好みなのですが、
記号＋リストの内容
というデザインが気に入ってます。このブログでは、
マウスのカーソル＋リストの内容
というデザインに設定してみました。
記号にはfontawesomeというサービスから好きなものを選び、あとは色を指定するだけで簡単にデザインが可能です。
Step1. CSSコードをコピペ
まずは、WordPressのstyle.cssに次のコードを貼り付けてみましょう。
ul {
border: solid 2px #ff938b;
background: #fffaf1;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;/*ポチ消す*/
}
ul li:before {
font-family: FontAwesome;
content: "\f1b0";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #ff938b; /*アイコン色*/
}
Step2. Fontawesomeの記号を選ぶ
続いて、記号を選びます。
Fontawesomeという無料で使える記号のツールを利用するので、こちらのサイトから選んじゃいましょう。
選び方は簡単で、先「Search」とう検索欄から自分が欲しいアイコンのキーワードを入力します。
今回は試しに「pen」のアイコンを探してみますね。
ウンウン。結構あるじゃないですか。
Step3. 記号をCSSで指定
めぼしい記号が見つかりましたら、詳細ページに遷移します。
そこで必要になってくるのが、
Unicode
という4つの数字・記号です。このペンのアイコンの例でいうと、
f040
がそれにあたりますね。
こいつを先ほどコピペしたCSSの「ul li:before」というセレクタの「content」というプロパティに指定してあげます。
content: “\ xxxx”;
という感じでxxxxに記号のユニコード4文字を打ち込めばオッケーです。
たとえば、penの記号にするときは、
ul li:before {
font-family: FontAwesome;
content: "\f040";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #ff938b; /*アイコン色*/
}
になるわけですね。
Step4. 色の設定
あとはアイコンの色を設定します。
色は「ul li:before」セレクタの「color」プロパティで指定していきますね。
ul li:before {
font-family: FontAwesome;
content: "\f1b0";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #サイトのメインカラー; /*アイコン色*/
}
サイトのメインカラーのカラーコードを打ち込めばオッケーです。
ってことで、以上の4ステップをまとめると、次のようなコードになりそうですね↓
ul {
border: solid 2px #ff938b;
background: #fffaf1;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;/*ポチ消す*/
}
ul li:before {
font-family: FontAwesome;
content: "\Unicode";/*アイコン種類*/
position: absolute;
left : 1em; /*左端からのアイコンまで*/
color: #サイトカラー; /*アイコン色*/
}
一旦、試しにWordPressのstyle.cssファイルにコードを追加してみましょう。
もし不具合が出たらそこをページを更新しながら修正していけば大丈夫です。
WordPressサイトのolリストのデザインを変更する方法
続いて、WordPressのolのデザインです。
olはordered listの略で、順番に意味がある箇条書きのことですね。
このサイトでいうと、
- いち
- にい
- さん
と表示される要素になります。
このWordPressのolのデザインは次の2ステップで終了です。
Step1. コードをとりあえず貼る
まずはWordPressのstyle.cssに下記のコードを貼り付けてみましょう。
ol{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0;
}
ol li{
position: relative;
padding: 0.5em;
line-height: 1.5em;
border-left : solid 35px #5c9ee7;
margin-bottom: 5px;ol
}
ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -35px;
width: 35px;
height: 1em;
line-height: 1;
text-align:center;
}
Step2. 色を変更
あとはアイコンの色を変更するだけ。
変更箇所は、
ol liセレクタの「border-left」プロパティのカラーコードです。
ol li{
position: relative;
padding: 0.5em;
line-height: 1.5em;
background: #f1f8ff;
border-left : solid 35px #サイトメインカラー;
margin-bottom: 5px;
}
という感じで、サイトのメインカラーなど設定した色をここで記述してあげましょう。
ここまで編集してやると、olのCSSコードは次のようになるはず。
ol{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0;
}
ol li{
position: relative;
padding: 0.5em;
line-height: 1.5em;
background: #f1f8ff;
border-left : solid 35px #サイトメインカラー;
margin-bottom: 5px;
}
ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -35px;
width: 35px;
height: 1em;
line-height: 1;
text-align:center;
}
記事以外のリスト要素もデザイン変わっちゃったんだけど！？
と、以上がWordPressサイトの箇条書きリストのデザイン変更方法でした。
CSSコードをstyle.cssにコピペするだけなので簡単なのですが、テーマによっては、
記事中以外の箇条書きにもデザインが適用されてしまった！汗
なんて悲劇が起きてしまうでしょう。
たとえば、ナビゲーションとかサイドバーとかフッターとかにですね。
そんなときは、
各セレクタの前に記事ブロック要素のクラス名をつけてあげればオッケーです。
たとえば、記事がarticle-bodyというdiv要素に入っていたら、「.article-body」というクラスのセレクタを追加して、
.artcile-body ol{
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0;
}
.artcile-body ol li{
position: relative;
padding: 0.5em;
line-height: 1.5em;
background: #f1f8ff;
border-left : solid 35px #サイトメインカラー;
margin-bottom: 5px;
}
.artcile-body ol li:before{
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*数字のデザイン変える*/
display:inline-block;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
top: 50%;
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: -35px;
width: 35px;
height: 1em;
line-height: 1;
text-align:center;
}
というように編集すればいいのですね（olの場合）。
CSSコードはどのWordPressテーマを使っているかによって不具合が出ることがあります。
試しにCSSをstyle.cssにコピペしてみて、そこから不具合を修正するぐらいのスタンスでいきましょう。
それでは！
Lin
おそらく、ブロガー。
今年でフリーランス 6年目。
